Tutorial on the method of controller inheritance in AngularJS

Recently in the angularjs project, I saw that the controller has a lot of repetitive code. There are a lot of codes in the controller that are very similar to functions (such as the CRUD method under the controller), and there is too much repetitive work. Later I thought about whether I could propose a service, but if I think about it carefully, these CRUDs are originally called from the Service. If I propose a Service, it will cause confusion in the Service and unclear responsibilities. Because I have done some backend work, can I use the idea of ​​​​the backend to inherit the controller? This article mainly introduces the use of controller inheritance in AngularJS. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Controllerservice Implementation Inheritance After some research, I found that AngularJS has provided us with controller inheritance. We just need to use controllerservice . $controller service api

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

How are properties in nested controllers inherited?

==The attribute value is a string

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>

Above, the name field in ParentCtrl is shared by ChildCtrl, but the name field in ChildCtrl is changed The value will not affect the name value in ParentCtrl. When the name value in ChildCtrl is changed, the nested relationship between ParentCtrl and ChildCtrl is broken. Changing the name field value in ParentCtrl again will not affect the name value in ChildCtrl.

Above, the value assigned to the variable in ParentCtrl is a string type. What if the object type is assigned to the field in ParentCtrl?

==The attribute value is the object

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>

Above, the vm object in ParentCtrl is shared by ChildCtrl, and of course the object is also shared In the name field, when changing the vm.name value in ChildCtrl, it will affect ParentCtrl, that is, the nested relationship between ParentCtrl and ChildCtrl will not be broken.

How are methods inherited in nested controllers?

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>

Using the add method in ArrayCtrl, adding is no problem; and the add method in ArrayCtrl can also be used by CollctionCtrl;

And in Methods in parent controllers can be overridden in child controllers.

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>

Code case

1. Create a base.controller.js file

(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;
    }
  }
})();

The code is very simple. We provide a simple formValid() method in BaseController, and also initialize and call a getList() method.

2. Create a Service. This service provides data services

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

3. Create the child.controller.js file, which is our most important file

(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();      
      
    }
  }
})();

In this way, we realize controller inheritance through $controller service, and we can also pass the injected services needed by the child controller into the base controller. ({ $scope, $scope,CRUDServices:ExtendServices }), our child controller has already used the magic power to get the list without writing a single line of code. If we need to call form validation, just call vm.bFormValid() directly.

4. Create the child.html file, we can bind it directly

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

Conclusion

After this, we can propose a public controller to encapsulate some commonly used methods. In the controller, we only need to write different methods related to the business. The maintainability of the code is greatly improved, and the amount of code will also be reduced.

Related recommendations:

Zend_Controller_Plugin plug-in usage

Node.js framework ThinkJS development controller explanation

Creating Controller for WeChat web development

The above is the detailed content of Tutorial on the method of controller inheritance in AngularJS. For more information, please follow other related articles on the PHP Chinese website!