angglarjs controller継承

最前線
最近angglarjsプロジェクトの中で、controllerを見ると、多くは重複コードで、controllerの中に多くのコードが似ているfunction(例えば、controllerの下のCRUD方法)があり、重複性の仕事が多すぎる.後から考えて、serviceを提出してもいいですか?しかし、よく考えてみると、これらのCRUDはもともとServiceから呼び出されたものです.Serviceを提出すると、Serviceが混乱して、職責がはっきりしません.自分でいくつか後端をしたことがあるため、後端の思想に助けを借りて、controllerが受け継ぐことができるのではありませんか?
\(controller serviceは継続して資料を調べることを実現しました.anggur jsはすでに私達にcontrollerの継承を提供してくれました.私達は`.controler service app

//      
// 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を作成します.このサービスはデータサービスを提供します.

(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パワーを使いました.フォーム検証を呼び出す必要があるなら、直接vm.bFormValid()を呼び出してもいいです.
4.child.html を作成し、直接連結すればOKです.

    
    
{
     {item}}

結尾語
このようにして後で私達は一つの共通のcontrollerを提案して、いくつかのよく使う方法をカプセル化して、controllerの中で、業務に関して異なっている方法だけを書く必要があります.コードの維持性が大幅に向上し、コード量も減少します.
転載先:https://www.cnblogs.com/qiaojie/p/5721098.html