AngularJS中controller控制器繼承的使用方法
前沿
最近在angularjs項(xiàng)目當(dāng)中，看到 controller 好多都是重復(fù)性的代碼，在 controller 當(dāng)中有好多代碼很相似 function（比如 controller 下的 CRUD 方法），重復(fù)性工作太多。后來(lái)想，可不可以提出一個(gè)service ，但仔細(xì)想想，這些CRUD 本來(lái)就是從 Service 中調(diào)用的，如果在提出Service，會(huì)造成 Service 比較混亂，職責(zé)不清晰 。 因?yàn)樽约鹤鲞^(guò)一些后端，借助后端的思想，是不是可以 controller 繼承。
controllerservice實(shí)現(xiàn)繼承經(jīng)過(guò)一番查閱資料，發(fā)現(xiàn)AngularJS已經(jīng)幫我們提供了controller繼承。我們只需借助 controllerservice 。$controller service api
// 參數(shù)的解釋 // constructor 可以是 function 也可以是 string // 如果傳入一個(gè) function, 就會(huì)當(dāng)成 controller 的構(gòu)造函數(shù) // 如果傳入一個(gè) string，就會(huì)根據(jù)字符串去$controllerProvider 找 注冊(cè)的 controller //locals 是一個(gè)對(duì)象，注入來(lái)自局部的 controller ,在這里我們認(rèn)為 child controller $controller(constructor, locals, [bindings])
嵌套控制器中屬性是如何被繼承的？
==屬性值是字符串
myApp.controller("ParentCtrl", function($scope){
$scope.name = "darren";
})
myApp.controller("ChildCtrl", function($scope){
})
<div ng-controller="ParentCtrl">
<label>父控制器中的name變量值</label> <input ng-model="name" />
<div 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>
</div>
</div>
以上，ParentCtrl中的name字段被ChildCtrl分享，但改變ChildCtrl中的name字段值卻不會(huì)影響ParentCtrl中的name值，當(dāng)改變ChildCtrl中的name值，ParentCtrl和ChildCtrl的嵌套關(guān)系被打破，再次改變ParentCtrl中的name字段值也不會(huì)影響ChildCtrl中的name值。
以上，給ParentCtrl中的變量賦值是字符串類(lèi)型，如果給ParentCtrl中的字段賦值對(duì)象類(lèi)型呢？
==屬性值是對(duì)象
myApp.controller("ParentCtrl", function($scope){
$scope.vm = {
name: "John"
};
})
myApp.controller("ChildCtrl", function($scope){
})
<div ng-controller="ParentCtrl">
<label>父控制器中的vm.name變量值</label> <input ng-model="vm.name" />
<div 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>
</div>
</div>
以上，ParentCtrl中vm對(duì)象的被ChildCtrl分享，當(dāng)然也分享了對(duì)象中的name字段，當(dāng)改變ChildCtrl中的vm.name值會(huì)影響到ParentCtrl，也就是不會(huì)把ParentCtrl和ChildCtrl之間的嵌套關(guān)系打破。
嵌套控制器中方法是如何被繼承的？
myApp.controller("ArrayCtrl", function($scope){
$scope.myArray = ["John", "Andrew"];
$scope.add = function(name){
$scope.myArray.push(name);
}
})
myApp.controller("CollectionCtrl", function($scope){
})
<div 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>
<div 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>
</div>
</div>
使用ArrayCtrl中的add方法，添加沒(méi)問(wèn)題；而且ArrayCtrl中的add方法也可以被CollctionCtrl使用；
而且在子控制器中可以重寫(xiě)父控制器中的方法。
myApp.controller("CollectionCtrl", function($scope){
//插入到某個(gè)位置
$scope.add = function(name, index){
$scope.myArray.splice(index,0, name);
}
})
<div 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>
<div 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>
</div>
</div>
代碼案例
1.創(chuàng)建一個(gè) base.controller.js 文件
(function() {
'use strict';
angular
.module('DemoApp')
.controller('BaseCtrl', BaseCtrl);
//手動(dòng)注入一些服務(wù)
BaseCtrl.$inject = ['$scope','CRUDServices'];
/* @ngInject */
function BaseCtrl($scope,CRUDServices) {
var _this = this;
//當(dāng)前 controller 提供一些方法
_this.bFormValid = formValid;
activate();
////////////////
//初始化時(shí)候調(diào)用
function activate() {
getList();
}
// 獲取數(shù)據(jù)列表
function getList() {
//把當(dāng)前的結(jié)果賦值給 bList 屬性上
_this.bList = CRUDServices.getList();
}
// 表單驗(yàn)證
function formValid(){
//do some thing
return false;
}
}
})();
代碼很簡(jiǎn)單，我們?cè)?BaseController中提供了一個(gè)簡(jiǎn)單的 formValid() 方法，還初始化調(diào)用了一個(gè)getList() 方法。
2.創(chuàng)建一個(gè)Service 。這個(gè) service 來(lái)提供數(shù)據(jù)服務(wù)
(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.創(chuàng)建child.controller.js 文件 也就是我們最主要的一個(gè)文件
(function() {
'use strict';
angular
.module('DemoApp')
.controller('ChildCtrl', ChildCtrl);
//手動(dòng)注入一些服務(wù)
//ExtendServices 用來(lái)提供數(shù)據(jù)的 Servie
ChildCtrl.$inject = ['$scope', '$controller','ExtendServices'];
/* @ngInject */
function ChildCtrl($scope, $controller,ExtendServices) {
var vm = this;
//調(diào)用我們父 controller
var parentCtrl = $controller('BaseCtrl', { $scope, $scope,CRUDServices:ExtendServices })
//通過(guò) angular.extend 把父控制器上的 方法和屬性 綁定到 子的對(duì)象上
angular.extend(vm, parentCtrl);
activate();
////////////////
function activate() {
//調(diào)用表單驗(yàn)證方法
vm.bFormValid();
}
}
})();
這樣，我們通過(guò) $controller service 實(shí)現(xiàn)了 controller 的繼承 ，也可以把 child controller 需要的注入的服務(wù) 傳入到 base controller 當(dāng)中 。（{ $scope, $scope,CRUDServices:ExtendServices }），我們child controlller 一行代碼都沒(méi)有寫(xiě)，就已經(jīng)用了 獲取 列表的 magic power 。如果我們需要調(diào)用表單驗(yàn)證,直接調(diào)用 vm.bFormValid() 就可以。
4.創(chuàng)建child.html 文件 ，我們直接 綁定就ok
<div>
<!-- 直接綁定 vm.bList 就會(huì)看到輸出結(jié)果-->
<div ng-repeat="item in vm.bList">{{item}}</div>
</div>
結(jié)束語(yǔ)
這樣下來(lái)以后我們可以提出一個(gè) 公共的 controller ，封裝一些常用的方法，在 controller當(dāng)中，只需要去寫(xiě)關(guān)于業(yè)務(wù)不同的 方法。 代碼可維護(hù)性大大提高,代碼量也會(huì)減下來(lái)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
對(duì)于一個(gè)Sass用戶(hù),只需要理解Sass擴(kuò)展部分如何工作的,就能完全理解SCSS,下面這篇文章主要給大家介紹了關(guān)于Angular中SASS樣式的詳細(xì)使用教程,需要的朋友可以參考下2022-05-05
今天小編就為大家分享一篇angularJS1 url中攜帶參數(shù)的獲取方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
這篇文章主要給大家介紹了關(guān)于angular8和ngrx8結(jié)合使用的詳細(xì)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用angular8具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Angular項(xiàng)目中$scope.$apply()方法的使用詳解
這篇文章主要給大家介紹了關(guān)于Angular項(xiàng)目中$scope.$apply()方法使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Angularjs具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)看看吧。2017-07-07
教你用AngularJS框架一行JS代碼實(shí)現(xiàn)控件驗(yàn)證效果
簡(jiǎn)單來(lái)說(shuō)Angular.js是google開(kāi)發(fā)者設(shè)計(jì)和開(kāi)發(fā)的一套前端開(kāi)發(fā)框架，幫助你簡(jiǎn)化前端開(kāi)發(fā)的負(fù)擔(dān)。到底能簡(jiǎn)化到什么程度呢，今天我們來(lái)看下，一行代碼實(shí)現(xiàn)控件驗(yàn)證效果，有木有嚇尿？2014-06-06
在JavaScript的AngularJS庫(kù)中進(jìn)行單元測(cè)試的方法
這篇文章主要介紹了在JavaScript的AngularJS庫(kù)中進(jìn)行單元測(cè)試的方法,主要針對(duì)AngularJS中的控制器相關(guān),需要的朋友可以參考下2015-06-06
基于AngularJS+HTML+Groovy實(shí)現(xiàn)登錄功能
AngularJS是一款客戶(hù)端MVC的javascript框架，而客戶(hù)端MVC代表未來(lái)架構(gòu)(為什么要使用MVC+REST+CQRS架構(gòu))，如果你有Struts或SpringMVC等后端MVC框架編程經(jīng)驗(yàn)，學(xué)習(xí)Angular會(huì)很快，基本是按照同一個(gè)MVC思路實(shí)現(xiàn)的，本文給大家介紹AngularJS+HTML+Groovy實(shí)現(xiàn)登錄功能2016-02-02
這篇文章主要介紹了Angular封裝WangEditor富文本組件,得益于Angular的強(qiáng)大，封裝WangEditor組件非常簡(jiǎn)單，需要的朋友可以參考下2021-07-07
AngularJs 終極購(gòu)物車(chē)(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇AngularJs 終極購(gòu)物車(chē)的實(shí)例講解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
這篇文章主要介紹了AngularJS中的過(guò)濾器使用詳解,過(guò)濾器是AngularJS中處理文本的一個(gè)非常有用的功能,需要的朋友可以參考下2015-06-06