angularjs controller 继承

前沿

最近在angularjs项目当中，看到 controller 好多都是重复性的代码，在 controller 当中有好多代码很相似 function（比如 controller 下的 CRUD 方法），重复性工作太多。后来想，可不可以提出一个service ，但仔细想想，这些CRUD 本来就是从 Service 中调用的，如果在提出Service，会造成 Service 比较混乱，职责不清晰。因为自己做过一些后端，借助后端的思想，是不是可以 controller 继承。

$controller service 实现继承

经过一番查阅资料，发现anguarjs 已经帮我们提供了 controller 继承。我们只需借助 $controller service 。[(controller service api](https://docs.angularjs.org/api/ngMock/service/)controller)

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

代码案例

1.创建一个 base.controller.js 文件

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

代码很简单，我们在 BaseController中提供了一个简单的 formValid() 方法，还初始化调用了一个getList() 方法。

2.创建一个Service 。这个 service 来提供数据服务

(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.创建 child.controller.js 文件 也就是我们最主要的一个文件

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

这样，我们通过 $controller service 实现了 controller 的继承，也可以把 child controller 需要的注入的服务传入到 base controller 当中。（ { $scope, $scope,CRUDServices:ExtendServices }），我们child controlller 一行代码都没有写，就已经用了获取列表的 magic power 。如果我们需要调用表单验证,直接调用 vm.bFormValid() 就可以。

4.创建 child.html 文件 ，我们直接绑定就ok

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

结束语

这样下来以后我们可以提出一个公共的 controller ，封装一些常用的方法，在 controller当中，只需要去写关于业务不同的方法。代码可维护性大大提高,代码量也会减下来。