angularjs controller 继承

前沿

最近在angularjs项目当中，看到 controller 好多都是重复性的代码，在 controller 当中有好多代码很类似 function（好比 controller 下的 CRUD 方法），重复性工做太多。后来想，可不能够提出一个service ，但仔细想一想，这些CRUD 原本就是从 Service 中调用的，若是在提出Service，会形成 Service 比较混乱，职责不清晰 。 由于本身作过一些后端，借助后端的思想，是否是能够 controller 继承。

\(controller service 实现继承 通过一番查阅资料，发现anguarjs 已经帮咱们提供了 controller 继承 。咱们只需借助 `\)controller service` 。$controller service api

// 参数的解释
// 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当中，只须要去写关于业务不一样的 方法。 代码可维护性大大提升,代码量也会减下来。