AngularJS의 컨트롤러 상속 방법에 대한 튜토리얼

최근 AngularJS 프로젝트에서 컨트롤러에 기능과 매우 유사한 코드(예: 컨트롤러 아래의 CRUD 메소드)가 너무 많고 반복적인 코드가 많은 것을 봤습니다. 반복적인 작업. 나중에 서비스를 제안해도 되는지 고민했는데, 곰곰이 생각해 보면 이런 CRUD는 원래 서비스에서 호출되는 것이었습니다. 서비스를 제안하면 서비스에 혼란이 생기고 책임이 불명확해집니다. 백엔드 작업을 좀 했으니 백엔드 아이디어를 활용해 컨트롤러를 상속받을 수 있나요? 이번 글에서는 주로 AngularJS의 컨트롤러 상속 활용에 대해 소개하고 있는데, 에디터가 꽤 좋다고 생각해서 지금부터 공유하고 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

Controllerservice는 상속을 구현합니다. 정보를 확인한 결과 AngularJS가 컨트롤러 상속을 제공한다는 것을 알았습니다. 우리는 단지 컨트롤러 서비스를 사용해야 합니다. $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의 필드 이름 값, ParentCtrl과 ChildCtrl 간의 중첩 관계가 깨지고 ParentCtrl의 이름 필드 값을 다시 변경해도 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에서 공유됩니다. 물론 객체의 name 필드도 의 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 }), 우리의 하위 컨트롤러는 이미 한 줄의 코드도 작성하지 않고 목록을 가져오는 마법의 힘을 사용했습니다. 양식 유효성 검사를 호출해야 하는 경우 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 웹 개발 생성 컨트롤러

위 내용은 AngularJS의 컨트롤러 상속 방법에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!