快捷導(dǎo)航

AngularJS Module方法詳解

更新時(shí)間：2015年12月08日 09:27:54 投稿：mrr

AngularJS中的Module類負(fù)責(zé)定義應(yīng)用如何啟動(dòng)，它還可以通過聲明的方式定義應(yīng)用中的各個(gè)片段。我們來看看它是如何實(shí)現(xiàn)這些功能的

AngularJS是什么？

AngularJs（后面就簡(jiǎn)稱ng了）是一個(gè)用于設(shè)計(jì)動(dòng)態(tài)web應(yīng)用的結(jié)構(gòu)框架。首先，它是一個(gè)框架，不是類庫(kù)，是像EXT一樣提供一整套方案用于設(shè)計(jì)web應(yīng)用。它不僅僅是一個(gè)javascript框架，因?yàn)樗暮诵钠鋵?shí)是對(duì)HTML標(biāo)簽的增強(qiáng)。

何為HTML標(biāo)簽增強(qiáng)？其實(shí)就是使你能夠用標(biāo)簽完成一部分頁(yè)面邏輯，具體方式就是通過自定義標(biāo)簽、自定義屬性等，這些HTML原生沒有的標(biāo)簽/屬性在ng中有一個(gè)名字：指令（directive）。后面會(huì)詳細(xì)介紹。那么，什么又是動(dòng)態(tài)web應(yīng)用呢？與傳統(tǒng)web系統(tǒng)相區(qū)別，web應(yīng)用能為用戶提供豐富的操作，能夠隨用戶操作不斷更新視圖而不進(jìn)行url跳轉(zhuǎn)。ng官方也聲明它更適用于開發(fā)CRUD應(yīng)用，即數(shù)據(jù)操作比較多的應(yīng)用，而非是游戲或圖像處理類應(yīng)用。

為了實(shí)現(xiàn)這些，ng引入了一些非常棒的特性，包括模板機(jī)制、數(shù)據(jù)綁定、模塊、指令、依賴注入、路由。通過數(shù)據(jù)與模板的綁定，能夠讓我們擺脫繁瑣的DOM操作，而將注意力集中在業(yè)務(wù)邏輯上。

　另外一個(gè)疑問，ng是MVC框架嗎？還是MVVM框架？官網(wǎng)有提到ng的設(shè)計(jì)采用了MVC的基本思想，而又不完全是MVC，因?yàn)樵跁鴮懘a時(shí)我們確實(shí)是在用ng-controller這個(gè)指令(起碼從名字上看，是MVC吧)，但這個(gè)controller處理的業(yè)務(wù)基本上都是與view進(jìn)行交互，這么看來又很接近MVVM。讓我們把目光移到官網(wǎng)那個(gè)非醒目的title上：“AngularJS — Superheroic JavaScript MVW Framework”。

AngularJS中的Module類負(fù)責(zé)定義應(yīng)用如何啟動(dòng)，它還可以通過聲明的方式定義應(yīng)用中的各個(gè)片段。我們來看看它是如何實(shí)現(xiàn)這些功能的。

一.Main方法在哪里

如果你是從Java或者Python編程語(yǔ)言轉(zhuǎn)過來的，那么你可能很想知道AngularJS里面的main方法在哪里？這個(gè)把所有東西啟動(dòng)起來，并且第一個(gè)被執(zhí)行的方法在哪里？JavaScript代碼里面負(fù)責(zé)實(shí)例化并且把所有東西組合到一起，然后命令應(yīng)用開始運(yùn)行的那個(gè)方法在哪里？

事實(shí)上，AngularJS并沒有main方法，AngularJS使用模塊的概念來代替main方法。模塊允許我們通過聲明的方式來描述應(yīng)用中的依賴關(guān)系，以及如何進(jìn)行組裝和啟動(dòng)。使用這種方式的原因如下：

1.模塊是聲明式的。這就意味著它編寫起來更加容易，同時(shí)理解起來也很容易，閱讀它就像讀普通的英文一樣！

2.它是模塊化的。這就迫使你去思考如何定義你的組件和依賴關(guān)系，讓它們變得更加清晰。

3.它讓測(cè)試更加容易。在單元測(cè)試呂，你可以有選擇地加入模塊，并且可以避免代碼中存在無法進(jìn)行單元測(cè)試的內(nèi)容。同時(shí)，在場(chǎng)景測(cè)試中，你可以加載其他額外的模塊，這樣就可以更好地和其他組件配合使用。

例如，在我們的應(yīng)用中有一個(gè)叫做"MyAwesomeApp"的模塊。在HTML里面，只要把以下內(nèi)容添加到<html>標(biāo)簽中（或者從技術(shù)上說，可以添加到任何標(biāo)簽中）：

復(fù)制代碼代碼如下:

ng-app指令就會(huì)告訴AngularJS使用MyAwesomeApp模塊來啟動(dòng)你的應(yīng)用。那么，應(yīng)該如何定義模塊呢？舉例來說，我們建議你為服務(wù)、指令和過濾器分別定義不同的模塊。然后你的主模塊可以聲明依賴這些模塊。

這樣可以使得模塊管理更加容易，因?yàn)樗鼈兌际橇己玫?、完備的代碼塊，每個(gè)模塊有且只有一種職能。同時(shí)，單元測(cè)試可以只加載它們所關(guān)注的模塊，這樣就可以減少初始化的次數(shù)，單元測(cè)試也會(huì)變得更精致、更專注。

二.加載和依賴

模塊加載動(dòng)作發(fā)生在兩個(gè)不同的階段，這一點(diǎn)從函數(shù)名上面就可以反映出來，它們分別是Config代碼塊和Run代碼塊（或者叫做階段）。

1.Config代碼塊

在這一階段里面，AngularJS會(huì)連接并注冊(cè)好所有數(shù)據(jù)源。因此，只有數(shù)據(jù)源和常量可以注入到Config代碼塊中。那些不確定是否已經(jīng)初始化好的服務(wù)不能注入進(jìn)來。

2.Run代碼塊

Run代碼塊用來啟動(dòng)你的應(yīng)用，并且在注射器創(chuàng)建完成之后開始執(zhí)行。為了避免在這一點(diǎn)開始之后再對(duì)系統(tǒng)進(jìn)行配置操作，只有實(shí)例和常量可以被注入到Run代碼塊中。你會(huì)發(fā)現(xiàn)，在AngularJS中，Run代碼塊是與main方法最類似的東西。

三.快捷方法

利用模塊可以做什么呢？我們可以用它來實(shí)例化控制器、指令、過濾器以及服務(wù)，但是利用模塊類還可以做更多事情。如下模塊配置的API方法：

1.config(configFn)

利用此方法可以做一些注冊(cè)工作，這些工作需要在模塊加載時(shí)完成。

2.constant(name, object)

此方法會(huì)首先運(yùn)行，所以你可以用它來聲明整個(gè)應(yīng)用范圍內(nèi)的常量，并且讓它們?cè)谒信渲茫╟onfig方法）和實(shí)例（后面的所有方法，例如controller、service等）方法中可用。

3.controller(name,constructor)

它的基本作用是配置好控制器方便后面使用。

4.directive(name,directiveFactory)

可以使用此方法在應(yīng)用中創(chuàng)建指令。

5.filter(name,filterFactory)

允許你創(chuàng)建命名的AngularJS過濾器，就像前面章節(jié)所討論的那樣。

6.run(initializationFn)

如果你想要在注射器啟動(dòng)之后執(zhí)行某些操作，而這些操作需要在頁(yè)面對(duì)用戶可用之前執(zhí)行，就可以使用此方法。

7.value(name,object)

允許在整個(gè)應(yīng)用中注射值。

8.factory(name,factoryFn)

如果你有一個(gè)類或者對(duì)象，需要首先為它提供一些邏輯或者參數(shù)，然后才能對(duì)它初始化，那么你就可以使用這里的factory接口。factory是一個(gè)函數(shù)，它負(fù)責(zé)創(chuàng)建一些特定的值（或者對(duì)象）。我們來看一個(gè)greeter(打招呼)函數(shù)的實(shí)例，這個(gè)函數(shù)需要一條問候語(yǔ)來初始化：

function Greeter(salutation) {
 this.greet = function(name) {
 return salutation + ' ' + name;
};
}

greeter函數(shù)示例如下：

myApp.factory('greeter', function(salut) {
 return new Greeter(salut);
});

然后可以這樣來調(diào)用它：

var myGreeter = greeter('Halo');

9.service(name,object)

factory和service之間的不同點(diǎn)在于，factory會(huì)直接調(diào)用傳遞給它的函數(shù)，然后返回執(zhí)行的結(jié)果；而service將會(huì)使用"new"關(guān)鍵字來調(diào)用傳遞給它的構(gòu)造方法，然后再返回結(jié)果。所以，前面的greeter Factory可以替換成下面這個(gè)greeter Service：

myApp.service('greeter', Greeter);

每當(dāng)我們需要一個(gè)greeter實(shí)例的時(shí)候，AngularJS就會(huì)調(diào)用新的Greeter()來返回一個(gè)實(shí)例。

10.provider(name,providerFn)

provider是這幾個(gè)方法中最復(fù)雜的部分（顯然，也是可配置性最好的部分）。provider中既綁定了factory也綁定了service，并且在注入系統(tǒng)準(zhǔn)備完畢之前，還可以享受到配置provider函數(shù)的好處（也就是config塊）。

我們來看看使用provider改造之后的greeter Service是什么樣子：

myApp.provider('greeter', function() {
 var salutation = 'Hello';
 this.setSalutation = function(s) {
 salutation = s;
}
 function Greeter(a) {
 this.greet = function() {
 return salutation + ' ' + a;
}
}
 this.$get = function(a) {
 return new Greeter(a);
};
});

這樣我們就可以在運(yùn)行時(shí)動(dòng)態(tài)設(shè)置問候語(yǔ)了（例如，可以根據(jù)用戶使用的不同語(yǔ)言進(jìn)行設(shè)置）。

var myApp = angular.module(myApp, []).config(function(greeterProvider) {
greeterProvider.setSalutation('Namaste');
});

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫(kù)

CMS

常用工具

AngularJS Module方法詳解

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具