Tutoriel sur la méthode d'héritage de contrôleur dans AngularJS

Récemment, dans le projet angulairejs, j'ai vu que le contrôleur avait beaucoup de code répétitif dans le contrôleur qui sont très similaires aux fonctions (comme la méthode CRUD sous le contrôleur), et là. c'est trop de travail répétitif. Plus tard, j'ai réfléchi à la possibilité de proposer un service, mais si j'y réfléchis bien, ces CRUD sont initialement appelés depuis le service. Si je propose un service, cela provoquera une confusion dans le service et des responsabilités peu claires. Parce que j'ai effectué du travail sur le backend, puis-je utiliser l'idée du backend pour hériter du contrôleur ? Cet article présente principalement l'utilisation de l'héritage de contrôleur dans AngularJS. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Héritage d'implémentation de Controllerservice Après quelques recherches, j'ai découvert qu'AngularJS nous a fourni un héritage de contrôleur. Nous avons juste besoin d’utiliser le service contrôleur. $controller service api

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

Comment les propriétés des contrôleurs imbriqués sont-elles héritées ?

==La valeur de l'attribut est une chaîne

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>

Ci-dessus, le champ de nom dans ParentCtrl est partagé par ChildCtrl, mais changez le La valeur du champ de nom n'affectera pas la valeur du nom dans ParentCtrl. Lorsque la valeur du nom dans ChildCtrl est modifiée, la relation imbriquée entre ParentCtrl et ChildCtrl est rompue. La modification de la valeur du champ de nom dans ParentCtrl n'affectera pas la valeur du nom dans ChildCtrl.

Ci-dessus, la valeur attribuée à la variable dans ParentCtrl est de type chaîne. Et si le type d'objet est attribué au champ dans ParentCtrl ?

==La valeur de l'attribut est l'objet

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>

Ci-dessus, l'objet vm dans ParentCtrl est partagé par ChildCtrl, et bien sûr également partagé Sans le champ de nom dans l'objet, la modification de la valeur vm.name dans ChildCtrl affectera ParentCtrl, c'est-à-dire que la relation imbriquée entre ParentCtrl et ChildCtrl ne sera pas rompue.

Comment les méthodes sont-elles héritées dans les contrôleurs imbriqués ?

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>

En utilisant la méthode add dans ArrayCtrl, l'ajout ne pose aucun problème ; et la méthode add dans ArrayCtrl peut également être utilisée par CollctionCtrl ; 🎜> Et les méthodes du contrôleur parent peuvent être remplacées dans le contrôleur enfant.

Cas de code

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. Créez un fichier base.controller.js

Le code est très simple. Nous fournissons une méthode formValid() simple dans BaseController, et initialisons également une méthode getList().

(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. Créez un service. Ce service fournit des services de données

3 Créez le fichier child.controller.js, qui est notre fichier le plus important

(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: '李四' }]
    }
  }
})();

De cette façon, nous réalisons l'héritage du contrôleur via le service $controller, et nous pouvons également transmettre les services injectés nécessaires au contrôleur enfant dans le contrôleur de base. ({ $scope, $scope,CRUDServices:ExtendServices }), notre contrôleur enfant a déjà utilisé le pouvoir magique pour obtenir la liste sans écrire une seule ligne de code. Si nous devons appeler la validation du formulaire, appelez simplement vm.bFormValid() directement.

(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. Créez le fichier child.html et liez-le directement

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

Conclusion

Après cela, nous pouvons proposer un contrôleur public pour encapsuler certaines méthodes couramment utilisées. Dans le contrôleur, il suffit d'écrire différentes méthodes liées au métier. La maintenabilité du code est grandement améliorée et la quantité de code sera également réduite.

Recommandations associées :

Utilisation du plug-in Zend_Controller_Plugin

Explication du développement du contrôleur ThinkJS du framework Node.js

Création d'un contrôleur pour le développement web WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!