首頁 >web前端 >js教程 >AngularJS中controller控制器繼承的方法教程

AngularJS中controller控制器繼承的方法教程

小云云原創: 2017-12-28 10:32:261872瀏覽

最近在angularjs專案當中，看到 controller 好多都是重複性的程式碼，在 controller 當中有好多程式碼很相似 function（例如 controller 下的 CRUD 方法），重複性工作太多。後來想，可不可以提出一個service ，但仔細想想，這些CRUD 本來就是從 Service 中呼叫的，如果在提出Service，會造成 Service 比較混亂，職責不清晰。因為自己做過一些後端，借助後端的思想，是不是可以 controller 繼承。本文主要介紹了AngularJS中controller控制器繼承的使用方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

controllerservice實作繼承經過一番查閱資料，發現AngularJS已經幫我們提供了controller繼承。我們只需借助 controllerservice 。 $controller service api

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

#嵌套控制器中屬性是如何被繼承的？

==屬性值是字串

myApp.controller("ParentCtrl", function($scope){
  $scope.name = "darren";
})

myApp.controller("ChildCtrl", function($scope){

})

<p ng-controller="ParentCtrl">
  <label>父控制器中的name变量值</label> <input ng-model="name" />
  <p ng-controller="ChildCtrl">
     <label>子控制器中的name变量值</label> <input ng-model="name" />
     
     <ul>
      <li>child controller name: {{name}}</li>
      <li>parent controller name: {{$parent.name}}</li>
     </ul>
  </p>
</p>

以上，ParentCtrl中的name字段被ChildCtrl分享，但改變ChildCtrl中的name字段值卻不會影響ParentCtrl中的name值，當改變ChildCtrl中的name值，ParentCtrl和ChildCtrl的巢狀關係被打破，再次改變ParentCtrl中的name欄位值也不會影響ChildCtrl中的name值。

以上，給ParentCtrl中的變數賦值是字串類型，如果給ParentCtrl中的欄位賦值物件類型呢？

==屬性值是物件

==屬性值是物件

myApp.controller("ParentCtrl", function($scope){
  $scope.vm = {
    name: "John"
  };
})

myApp.controller("ChildCtrl", function($scope){

})

<p ng-controller="ParentCtrl">
  <label>父控制器中的vm.name变量值</label> <input ng-model="vm.name" />
  <p ng-controller="ChildCtrl">
     <label>子控制器中的vm.name变量值</label> <input ng-model="vm.name" />
     
     <ul>
      <li>child controller name: {{vm.name}}</li>
      <li>parent controller name: {{$parent.vm.name}}</li>
     </ul>
  </p>
</p>

以上，ParentCtrl中vm物件的被ChildCtrl分享，當然也分享了對象中的name字段，當改變ChildCtrl中的vm.name值會影響到ParentCtrl，也就是不會把ParentCtrl和ChildCtrl之間的嵌套關係打破。

嵌套控制器中方法是如何被繼承的？

myApp.controller("ArrayCtrl", function($scope){
  $scope.myArray = ["John", "Andrew"];
  
  $scope.add = function(name){
    $scope.myArray.push(name);
  }
})

myApp.controller("CollectionCtrl", function($scope){

})

<p ng-controller="ArrayCtrl">
  <label>My Array:</label><span>{{myArray}}</span>
  
  <label>parent controller:</label>
  <input ng-model="parentName" />
  <button ng-click="add(parentName)">Add New Item</button>
  
  <p ng-controller="CollectionCtrl">
    <label>child controller:</label>
    <input ng-model="childName" />
    <input type="number" ng-model="index" />
    <button ng-click="add(childName)">Add New Item</button>
  </p>
</p>

使用ArrayCtrl中的add方法，加入沒問題；而且ArrayCtrl中的add方法也可以被CollctionCtrl使用；

而且在子控制器中可以重寫父控制器中的方法。

myApp.controller("CollectionCtrl", function($scope){
  //插入到某个位置
  $scope.add = function(name, index){
    $scope.myArray.splice(index,0, name);
  }
})

<p ng-controller="ArrayCtrl">
  <label>My Array:</label><span>{{myArray}}</span>
  
  <label>parent controller:</label>
  <input ng-model="parentName" />
  <button ng-click="add(parentName)">Add New Item</button>
  
  <p ng-controller="CollectionCtrl">
    <label>child controller:</label>
    <input ng-model="childName" />
    <input type="number" ng-model="index" />
    <button ng-click="add(childName, index)">Add New Item</button>
  </p>
</p>

程式碼案例

1.建立一個base.controller.js 檔案

(function() {
  &#39;use strict&#39;;

  angular
    .module(&#39;DemoApp&#39;)
    .controller(&#39;BaseCtrl&#39;, BaseCtrl);

  //手动注入一些服务
  BaseCtrl.$inject = [&#39;$scope&#39;,&#39;CRUDServices&#39;];

  /* @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() {
  &#39;use strict&#39;;

  angular
    .module(&#39;DemoApp&#39;)
    .service(&#39;ExtendServices&#39;, ExtendServices);

  ExtendServices.$inject = [];

  /* @ngInject */
  function ExtendServices() {

    return {
      getList: getList  //获取 list 列表
    }

    ////////////////

    function getList() {
      return [{ id: 1, name: &#39;张三&#39; }, { id: 2, name: &#39;李四&#39; }]
    }
  }
})();

3.建立child.controller.js 檔案也就是我們最主要的一個檔案

(function() {
  &#39;use strict&#39;;

  angular
    .module(&#39;DemoApp&#39;)
    .controller(&#39;ChildCtrl&#39;, ChildCtrl);

  //手动注入一些服务
  //ExtendServices 用来提供数据的 Servie
  ChildCtrl.$inject = [&#39;$scope&#39;, &#39;$controller&#39;,&#39;ExtendServices&#39;];

  /* @ngInject */
  function ChildCtrl($scope, $controller,ExtendServices) {

    var vm = this;

    //调用我们父 controller 
    var parentCtrl = $controller(&#39;BaseCtrl&#39;, { $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

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

結束語

這樣下來以後我們可以提出一個公共的controller ，封裝一些常用的方法，在controller當中，只需要去寫關於業務不同的方法。程式碼可維護性大大提高,程式碼量也會減下來。

AngularJS中controller控制器繼承的方法教程

相關文章