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当中，只需要去写关于业务不同的方法。代码可维护性大大提高,代码量也会减下来。

巴特西

angularjs controller 继承

前沿

$controller service 实现继承

代码案例

结束语

最新文章

热门文章