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當中，只需要去寫關於業務不同的 方法。 代碼可維護性大大提高,代碼量也會減下來。