国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
AngularJS開發(fā)指南17:Controller組件

在AngularJS中,控制器是一個(gè)Javascript函數(shù)(類型/類),用來(lái)增強(qiáng)除了根作用域意外的作用域?qū)嵗?。?dāng)你或者AngularJS本身通過(guò)scope.$new倆創(chuàng)建一個(gè)新的子作用域?qū)ο髸r(shí),有一個(gè)選項(xiàng)能讓你將它當(dāng)做參數(shù)傳遞給控制器。這能使AngularjS將控制器和這個(gè)作用域聯(lián)系起來(lái),增強(qiáng)作用域的行為。

控制器用于:

  • 設(shè)置好作用域?qū)ο蟮某跏紶顟B(tài)。
  • 給作用域?qū)ο笤黾有袨椤?/li>

給作用于對(duì)象設(shè)置初始狀態(tài)

一般來(lái)說(shuō),當(dāng)你創(chuàng)建應(yīng)用時(shí),你需要對(duì)它的作用域設(shè)置初始狀態(tài)。

AngularJS將對(duì)作用域?qū)ο笳{(diào)用控制器的構(gòu)造函數(shù)(從某種意義上來(lái)說(shuō)就像使用的Javascript的apply方法),以此來(lái)設(shè)置作用域的初始狀態(tài)。這意味著AngularJS不會(huì)創(chuàng)建控制器類型的實(shí)例(不會(huì)使用new方法來(lái)調(diào)用控制器構(gòu)造函數(shù))??刂破骺偸菍?duì)某個(gè)已存在的作用域?qū)ο笳{(diào)用。formatDate

你可以通過(guò)創(chuàng)建一個(gè)模型屬性來(lái)設(shè)置初始作用域的初始狀態(tài)。 比如:

function GreetingCtrl($scope) { $scope.greeting = 'Hola!'; }

GreetingCtrl控制器創(chuàng)建了一個(gè)模板中可以調(diào)用的叫greeting的模型。

給作用域?qū)ο笤黾有袨?/h2>

AngularJS作用域?qū)ο蟮男袨槭怯勺饔糜虻姆椒▉?lái)表示的。這些方法是可以在模板或者說(shuō)視圖中調(diào)用的。這些方法和應(yīng)用模型交互,并且能改變模型。

如我們?cè)谀P湍且徽滤f(shuō)的,任何對(duì)象(或者原生的類型)被賦給作用域后就會(huì)變成模型。任何賦給作用域的方法,都能在模板或者說(shuō)視圖中被調(diào)用,并且能通過(guò)表達(dá)式或者ng事件指令調(diào)用。(比如,ngClick)

正確地使用控制器

總的來(lái)說(shuō),一個(gè)控制器不應(yīng)該做太多工作。它應(yīng)該只包含單個(gè)視圖的業(yè)務(wù)邏輯。

保持控制器職責(zé)單一的最常見做法是將那些不屬于控制器的工作抽離到服務(wù)中,然后通過(guò)依賴注入在控制器中使用這些服務(wù)。這在依賴注入服務(wù)的章節(jié)中會(huì)詳細(xì)討論。

不要用控制器干下面的事情:

  • 控制器應(yīng)該只關(guān)心業(yè)務(wù)邏輯。DOM操作(表現(xiàn)層邏輯)通常會(huì)把測(cè)試弄得很難。將任何表現(xiàn)層邏輯放到控制器中都會(huì)顯著地增加對(duì)業(yè)務(wù)邏輯的測(cè)試難度。AngularJS提供dev_guide.templates.databinding用來(lái)自動(dòng)進(jìn)行DOM操作。如果你需要手動(dòng)操作DOM,將表現(xiàn)層的邏輯抽離到指令中。
  • 對(duì)輸入格式化 — 你應(yīng)該用AngularJS的表單控制來(lái)實(shí)現(xiàn)格式化。.
  • 對(duì)輸出格式化 — 該用AngularJS的過(guò)濾器實(shí)現(xiàn)。.
  • 在控制器中運(yùn)行無(wú)狀態(tài)或者有狀態(tài)但在控制器中共享的代碼 — 該用服務(wù)來(lái)實(shí)現(xiàn).
  • 實(shí)例化組件或者控制其它組件的生命周期(比如創(chuàng)建一個(gè)服務(wù)的實(shí)例).

將控制器和AngularJS的作用域?qū)ο舐?lián)系起來(lái)

你可以顯示地用scope.$new來(lái)將控制器和作用域?qū)ο箫@示地聯(lián)系起來(lái),或者隱式地通過(guò)ngController指令或者$route服務(wù)來(lái)聯(lián)系。

控制器構(gòu)造函數(shù)和方法的例子

為了闡述AngularJS的控制器組件的運(yùn)行原理,讓我們來(lái)創(chuàng)建一個(gè)擁有下面這些組件的小應(yīng)用:

  • 一個(gè)有兩個(gè)按鈕和一條消息的模板
  • 一個(gè)叫spice的字符串模型。
  • 一個(gè)擁有兩個(gè)方法的控制器。方法是用來(lái)設(shè)置spice的值得。

模板中的消息包含了一個(gè)對(duì)spice模型的綁定,它初始的字符串是“very”。這個(gè)spice模型會(huì)被設(shè)置成 chili 或者 jalapeno,這取決于哪個(gè)按鈕會(huì)被點(diǎn)擊。消息會(huì)通過(guò)data-binding自動(dòng)更新。

一個(gè) spice 控制器例子

<body ng-controller="SpicyCtrl"> <button ng-click="chiliSpicy()">Chili</button> <button ng-click="jalapenoSpicy()">Jalape?o</button> <p>The food is {{spice}} spicy!</p></body>function SpicyCtrl($scope) { $scope.spice = 'very'; $scope.chiliSpicy = function() {   $scope.spice = 'chili'; } $scope.jalapenoSpicy = function() {  $scope.spice = 'jalape?o'; }}

例子中有下面這些需要注意:

  • ngController指令是用來(lái)(隱式地)為模板創(chuàng)建作用域的。并且使用命令中指定的spicyCtrl控制器來(lái)增強(qiáng)這個(gè)作用域。
  • spicyCtrl只是一個(gè)純Javascript函數(shù)。使用了駝峰式命名法(可選)命名并以Ctrl或者Controller結(jié)尾。
  • 對(duì)作用域?qū)ο筚x予一個(gè)新的屬性會(huì)創(chuàng)建或者更新模型。
  • 控制器方法能夠直接通過(guò)賦格作用域?qū)ο筮@個(gè)方式創(chuàng)建(如例子中的chiliSpicy方法)。
  • 控制器中的所用方法都能在模板中調(diào)用(在body元素或者子元素中).
  • NB:AngularJS的老版本(1.0RC之前的)能讓你用它來(lái)替換$scope方法。但是現(xiàn)在不行了。在作用域中定義的方法中,他和$scope是可以互換的(AngularJS將它設(shè)置成$scope),那是在你的控制器構(gòu)造函數(shù)中就不行了。
  • NB: AngularJS的老版本(1.0RC之前的)自動(dòng)給作用域?qū)ο笤吞砑臃椒?,現(xiàn)在不會(huì)了。所有的方法都必須手動(dòng)添加到作用域。

控制器方法可以接受參數(shù),像下面里中演示的:

控制器方法參數(shù)的例子

<body ng-controller="SpicyCtrl"> <input ng-model="customSpice" value="wasabi"> <button ng-click="spicy('chili')">Chili</button> <button ng-click="spicy(customSpice)">Custom spice</button> <p>The food is {{spice}} spicy!</p></body>function SpicyCtrl($scope) { $scope.spice = 'very'; $scope.spicy = function(spice) {   $scope.spice = spice; }}

注意SpicyCtrl控制器只定義了一個(gè)叫spicy的方法,它接受一個(gè)叫做spice的參數(shù)。和這個(gè)控制器相關(guān)的模板在第一個(gè)按鈕事件中傳遞了一個(gè)chili常量給控制器方法,在第二個(gè)按鈕中傳遞一個(gè)模型屬性。

控制器繼承示例

AngularJS中的控制器繼承是基于作用域的繼承的。讓我們看下面這個(gè)例子:

<body ng-controller="MainCtrl"> <p>Good {{timeOfDay}}, {{name}}!</p> <div ng-controller="ChildCtrl">   <p>Good {{timeOfDay}}, {{name}}!</p>   <p ng-controller="BabyCtrl">Good {{timeOfDay}}, {{name}}!</p></body>function MainCtrl($scope) { $scope.timeOfDay = 'morning'; $scope.name = 'Nikki';}function ChildCtrl($scope) { $scope.name = 'Mattie';}function BabyCtrl($scope) { $scope.timeOfDay = 'evening'; $scope.name = 'Gingerbreak Baby';}

注意我們是如何在模板中嵌套我們的ngController指令的。這個(gè)模板結(jié)構(gòu)會(huì)使得AngularJS為視圖創(chuàng)建四個(gè)作用域:

  • 根作用域
  • MainCtrl作用域, 它包含了模型timeOfDay和模型name。
  • ChildCtrl作用域,它繼承了上層作用域的timeOfDay,復(fù)寫了name。
  • BabyCtrl作用域,復(fù)寫了MainCtrl中定義的timeOfDay和ChildCtrl中的name。

控制器的繼承和模型繼承是同一個(gè)原理。所以在我們前面的例子中,所有的模型都用返回相應(yīng)字符串的控制器方法代替。

注意:常規(guī)的原型繼承對(duì)控制器來(lái)說(shuō)不起作用。因?yàn)檎缥覀冎疤岬降模刂破鞑皇侵苯訉?shí)例化的,而是對(duì)作用域?qū)ο笳{(diào)用的。

測(cè)試控制器

盡管有很多測(cè)試控制器的方法。但最好的是像我們下面這樣展示的。這個(gè)例子注入了$rootScope和$controller。

控制器函數(shù):

function myController($scope) {   $scope.spices = [{"name":"pasilla", "spiciness":"mild"},                  {"name":"jalapeno", "spiceiness":"hot hot hot!"},                  {"name":"habanero", "spiceness":"LAVA HOT!!"}];   $scope.spice = "habanero";}

控制器測(cè)試:

describe('myController function', function() {  describe('myController', function() {    var scope;    beforeEach(inject(function($rootScope, $controller) {      scope = $rootScope.$new();      var ctrl = $controller(myController, {$scope: scope});    }));    it('should create "spices" model with 3 spices', function() {      expect(scope.spices.length).toBe(3);    });    it('should set the default value of spice', function() {      expect(scope.spice).toBe('habanero');    });  });});

如果你需要測(cè)試嵌套的控制器,你需要?jiǎng)?chuàng)建和DOM中相同相同的作用域?qū)蛹?jí)。

describe('state', function() {    var mainScope, childScope, babyScope;    beforeEach(inject(function($rootScope, $controller) {        mainScope = $rootScope.$new();        var mainCtrl = $controller(MainCtrl, {$scope: mainScope});        childScope = mainScope.$new();        var childCtrl = $controller(ChildCtrl, {$scope: childScope});        babyScope = childCtrl.$new();        var babyCtrl = $controller(BabyCtrl, {$scope: babyScope});    }));    it('should have over and selected', function() {        expect(mainScope.timeOfDay).toBe('morning');        expect(mainScope.name).toBe('Nikki');        expect(childScope.timeOfDay).toBe('morning');        expect(childScope.name).toBe('Mattie');        expect(babyScope.timeOfDay).toBe('evening');        expect(babyScope.name).toBe('Gingerbreak Baby');    });});
本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
AngularJS進(jìn)階(九)控制器controller之間如何通信
AngularJS自學(xué)之路(三)
ionic中獲取ng
學(xué)習(xí)AngularJs:Directive指令用法(完整版)
AngularJS快速入門指南18:Application   是時(shí)候創(chuàng)建一個(gè)真正的AngularJS單頁(yè)面應(yīng)用程序了(SPA)。 一個(gè)AngularJS應(yīng)用程序示例   你已經(jīng)了解了足夠多的內(nèi)容
AngularJS1:directive和controller如何通信
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服