Tutorial zur Methode der Controller-Vererbung in AngularJS

Kürzlich habe ich im AngularJS-Projekt gesehen, dass der Controller viele sich wiederholende Codes enthält, die den Funktionen sehr ähnlich sind (z. B. die CRUD-Methode unter dem Controller). ist zu viel repetitive Arbeit. Später habe ich darüber nachgedacht, ob ich einen Dienst vorschlagen könnte, aber wenn ich sorgfältig darüber nachdenke, werden diese CRUDs ursprünglich vom Dienst aufgerufen. Wenn ich einen Dienst vorschlage, führt dies zu Verwirrung im Dienst und zu unklaren Verantwortlichkeiten. Kann ich die Idee des Backends nutzen, um den Controller zu erben, da ich einige Backend-Arbeiten durchgeführt habe? In diesem Artikel wird hauptsächlich die Verwendung der Controller-Vererbung in AngularJS vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Vererbung der Controllerservice-Implementierung Nach einigen Recherchen habe ich herausgefunden, dass AngularJS uns eine Controller-Vererbung ermöglicht hat. Wir müssen nur den Controllerservice verwenden. $controller service api

// 参数的解释
// constructor 可以是 function 也可以是 string 
//      如果传入一个 function, 就会当成 controller 的构造函数
//      如果传入一个 string，就会根据字符串去$controllerProvider 找 注册的 controller
//locals 是一个对象，注入来自局部的 controller ,在这里我们认为 child controller
$controller(constructor, locals, [bindings])

Wie werden Eigenschaften in verschachtelten Controllern vererbt?

==Der Attributwert ist eine Zeichenfolge

myApp.controller("ParentCtrl", function($scope){
  $scope.name = "darren";
})

myApp.controller("ChildCtrl", function($scope){

})

<p ng-controller="ParentCtrl">
  <label>父控制器中的name变量值</label> <input ng-model="name" />
  <p ng-controller="ChildCtrl">
     <label>子控制器中的name变量值</label> <input ng-model="name" />
     
     <ul>
      <li>child controller name: {{name}}</li>
      <li>parent controller name: {{$parent.name}}</li>
     </ul>
  </p>
</p>

Oben wird das Namensfeld in ParentCtrl von ChildCtrl gemeinsam genutzt, aber ändern Sie das Der Namensfeldwert hat keinen Einfluss auf den Namenswert in ParentCtrl. Wenn der Namenswert in ChildCtrl geändert wird, wird die verschachtelte Beziehung zwischen ParentCtrl und ChildCtrl unterbrochen.

Oben ist der der Variablen in ParentCtrl zugewiesene Wert ein Zeichenfolgentyp. Was ist, wenn der Objekttyp dem Feld in ParentCtrl zugewiesen ist?

==Der Attributwert ist das Objekt

myApp.controller("ParentCtrl", function($scope){
  $scope.vm = {
    name: "John"
  };
})

myApp.controller("ChildCtrl", function($scope){

})

<p ng-controller="ParentCtrl">
  <label>父控制器中的vm.name变量值</label> <input ng-model="vm.name" />
  <p ng-controller="ChildCtrl">
     <label>子控制器中的vm.name变量值</label> <input ng-model="vm.name" />
     
     <ul>
      <li>child controller name: {{vm.name}}</li>
      <li>parent controller name: {{$parent.vm.name}}</li>
     </ul>
  </p>
</p>

Oben wird das VM-Objekt in ParentCtrl von ChildCtrl gemeinsam genutzt, und natürlich auch gemeinsam genutzt. Ohne das Namensfeld im Objekt wirkt sich eine Änderung des vm.name-Werts in ChildCtrl auf ParentCtrl aus, dh die verschachtelte Beziehung zwischen ParentCtrl und ChildCtrl wird nicht unterbrochen.

Wie werden Methoden in verschachtelten Controllern vererbt?

myApp.controller("ArrayCtrl", function($scope){
  $scope.myArray = ["John", "Andrew"];
  
  $scope.add = function(name){
    $scope.myArray.push(name);
  }
})

myApp.controller("CollectionCtrl", function($scope){

})

<p ng-controller="ArrayCtrl">
  <label>My Array:</label><span>{{myArray}}</span>
  
  <label>parent controller:</label>
  <input ng-model="parentName" />
  <button ng-click="add(parentName)">Add New Item</button>
  
  <p ng-controller="CollectionCtrl">
    <label>child controller:</label>
    <input ng-model="childName" />
    <input type="number" ng-model="index" />
    <button ng-click="add(childName)">Add New Item</button>
  </p>
</p>

Mit der Add-Methode in ArrayCtrl ist das Hinzufügen kein Problem; die Add-Methode in ArrayCtrl kann auch von CollctionCtrl verwendet werden; 🎜> Und die Methoden im übergeordneten Controller können im untergeordneten Controller überschrieben werden.

Codebeispiel

myApp.controller("CollectionCtrl", function($scope){
  //插入到某个位置
  $scope.add = function(name, index){
    $scope.myArray.splice(index,0, name);
  }
})

<p ng-controller="ArrayCtrl">
  <label>My Array:</label><span>{{myArray}}</span>
  
  <label>parent controller:</label>
  <input ng-model="parentName" />
  <button ng-click="add(parentName)">Add New Item</button>
  
  <p ng-controller="CollectionCtrl">
    <label>child controller:</label>
    <input ng-model="childName" />
    <input type="number" ng-model="index" />
    <button ng-click="add(childName, index)">Add New Item</button>
  </p>
</p>

1. Erstellen Sie eine base.controller.js-Datei

Der Code ist sehr einfach. Wir stellen eine einfache formValid()-Methode in BaseController bereit und initialisieren auch eine getList()-Methode.

(function() {
  'use strict';

  angular
    .module('DemoApp')
    .controller('BaseCtrl', BaseCtrl);

  //手动注入一些服务
  BaseCtrl.$inject = ['$scope','CRUDServices'];

  /* @ngInject */
  function BaseCtrl($scope,CRUDServices) {
    var _this = this;
    //当前 controller 提供一些方法
    _this.bFormValid = formValid;

    activate();

    ////////////////

    //初始化时候调用
    function activate() {

      getList();
    }

    // 获取数据列表
    function getList() {
      //把当前的结果赋值给 bList 属性上
      _this.bList = CRUDServices.getList();
    }

    // 表单验证
    function formValid(){

      //do some thing
      return false;
    }
  }
})();

2. Erstellen Sie einen Dienst. Dieser Dienst stellt Datendienste bereit

3. Erstellen Sie die Datei child.controller.js, die unsere wichtigste Datei ist

(function() {
  'use strict';

  angular
    .module('DemoApp')
    .service('ExtendServices', ExtendServices);

  ExtendServices.$inject = [];

  /* @ngInject */
  function ExtendServices() {

    return {
      getList: getList  //获取 list 列表
    }

    ////////////////

    function getList() {
      return [{ id: 1, name: '张三' }, { id: 2, name: '李四' }]
    }
  }
})();

Auf diese Weise realisieren wir die Controller-Vererbung über den $controller-Dienst und können auch die vom untergeordneten Controller benötigten injizierten Dienste an den Basis-Controller weiterleiten. ({ $scope, $scope,CRUDServices:ExtendServices }), unser untergeordneter Controller hat bereits die magische Kraft genutzt, um die Liste abzurufen, ohne eine einzige Codezeile zu schreiben. Wenn wir die Formularvalidierung aufrufen müssen, rufen Sie einfach vm.bFormValid() direkt auf.

(function() {
  'use strict';

  angular
    .module('DemoApp')
    .controller('ChildCtrl', ChildCtrl);

  //手动注入一些服务
  //ExtendServices 用来提供数据的 Servie
  ChildCtrl.$inject = ['$scope', '$controller','ExtendServices'];

  /* @ngInject */
  function ChildCtrl($scope, $controller,ExtendServices) {

    var vm = this;

    //调用我们父 controller 
    var parentCtrl = $controller('BaseCtrl', { $scope, $scope,CRUDServices:ExtendServices })

    //通过 angular.extend 把父控制器上的 方法和属性 绑定到 子的对象上
    angular.extend(vm, parentCtrl);


    activate();

    ////////////////

    function activate() {
      
      //调用表单验证方法
      vm.bFormValid();      
      
    }
  }
})();

4. Erstellen Sie die Datei child.html und binden Sie sie direkt

<p>
  <!-- 直接绑定 vm.bList 就会看到输出结果-->
  <p ng-repeat="item in vm.bList">{{item}}</p>
</p>

Fazit

Danach können wir einen öffentlichen Controller vorschlagen, um einige häufig verwendete Methoden zu kapseln. Im Controller müssen wir nur verschiedene geschäftsbezogene Methoden schreiben. Die Wartbarkeit des Codes wird erheblich verbessert und auch die Codemenge wird reduziert.

Verwandte Empfehlungen:

Verwendung des Zend_Controller_Plugin-Plug-Ins

Erläuterung zur Entwicklung des ThinkJS-Controllers für das Node.js-Framework

Controller für die WeChat-Webentwicklung erstellen

Das obige ist der detaillierte Inhalt vonTutorial zur Methode der Controller-Vererbung in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!