AngularJSのコントローラー継承方法のチュートリアル

最近、angularjs プロジェクトで、コントローラーに繰り返しコードがたくさんあることに気づきました。コントローラー内には関数 (コントローラーの下の CRUD メソッドなど) によく似たコードがたくさんあり、多すぎます。繰り返しの作業。後でサービスを提案できないかと考えたのですが、よく考えてみるとこれらのCRUDは本来Serviceから呼び出されるもので、提案するとService内で混乱が生じたり、責任が曖昧になってしまいます。 バックエンドの作業をいくつか行ったので、バックエンドのアイデアを使用してコントローラーを継承できますか?この記事では、AngularJS におけるコントローラーの継承の使い方を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

Controllerservice は継承を実装します。情報を確認したところ、AngularJS がコントローラーの継承を提供していることがわかりました。必要なのは、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の名前フィールドはChildCtrlと共有されていますが、ChildCtrlの名前フィールドの値を変更しても、名前を変更する際のParentCtrlの名前の値には影響しません。 ChildCtrl のフィールド name 値、ParentCtrl と ChildCtrl の間のネストされた関係が壊れており、ParentCtrl の name フィールド値を再度変更しても、ChildCtrl の名前値には影響しません。

上記では、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 によって共有されます。もちろん、vm.name の値もオブジェクト内に共有されます。 ChildCtrl が変更されると、 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() {
  '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. サービスを作成します。このサービスはデータサービスを提供します

(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サービスを通じてコン​​トローラーの継承を実現します子コントローラーに必要な挿入されたサービスを基本コントローラーに渡すこともできます。 ({ $scope, $scope,CRUDServices:ExtendServices })、子コントローラーはすでに魔法の力を使用して、コードを 1 行も記述することなくリストを取得しています。フォーム検証を呼び出す必要がある場合は、vm.bFormValid() を直接呼び出してください。

4. child.html ファイルを作成し、直接バインドできます

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

結論

この後、コントローラー内で一般的に使用されるメソッドをカプセル化するパブリック コントローラーを提案できます。ビジネスについて書くには別のアプローチが必要です。 コードの保守性が大幅に向上し、コード量も削減されます。

関連する推奨事項:

Zend_Controller_Pluginプラグインの使用法

Node.jsフレームワークThinkJS開発コントローラーの説明

WeChat Web開発作成コントローラー

以上がAngularJSのコントローラー継承方法のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。