最近在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() { '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; } } })();
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(); } } })();
4.建立child.html 文件,我們直接綁定就ok
#
<p> <!-- 直接绑定 vm.bList 就会看到输出结果--> <p ng-repeat="item in vm.bList">{{item}}</p> </p>
結束語
這樣下來以後我們可以提出一個公共的controller ,封裝一些常用的方法,在controller當中,只需要去寫關於業務不同的方法。 程式碼可維護性大大提高,程式碼量也會減下來。
Zend_Controller_Plugin外掛用法Node.js框架ThinkJS 開發 controller解說####### ######微信網頁開發之創建Controller######以上是AngularJS中controller控制器繼承的方法教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!