AngularJS Module方法詳解
AngularJS是什么？
AngularJs（后面就簡稱ng了）是一個用于設(shè)計動態(tài)web應(yīng)用的結(jié)構(gòu)框架。首先，它是一個框架，不是類庫，是像EXT一樣提供一整套方案用于設(shè)計web應(yīng)用。它不僅僅是一個javascript框架，因為它的核心其實是對HTML標簽的增強。
何為HTML標簽增強？其實就是使你能夠用標簽完成一部分頁面邏輯，具體方式就是通過自定義標簽、自定義屬性等，這些HTML原生沒有的標簽/屬性在ng中有一個名字：指令（directive）。后面會詳細介紹。那么，什么又是動態(tài)web應(yīng)用呢？與傳統(tǒng)web系統(tǒng)相區(qū)別，web應(yīng)用能為用戶提供豐富的操作，能夠隨用戶操作不斷更新視圖而不進行url跳轉(zhuǎn)。ng官方也聲明它更適用于開發(fā)CRUD應(yīng)用，即數(shù)據(jù)操作比較多的應(yīng)用，而非是游戲或圖像處理類應(yīng)用。
為了實現(xiàn)這些，ng引入了一些非常棒的特性，包括模板機制、數(shù)據(jù)綁定、模塊、指令、依賴注入、路由。通過數(shù)據(jù)與模板的綁定，能夠讓我們擺脫繁瑣的DOM操作，而將注意力集中在業(yè)務(wù)邏輯上。
另外一個疑問，ng是MVC框架嗎？還是MVVM框架？官網(wǎng)有提到ng的設(shè)計采用了MVC的基本思想，而又不完全是MVC，因為在書寫代碼時我們確實是在用ng-controller這個指令(起碼從名字上看，是MVC吧)，但這個controller處理的業(yè)務(wù)基本上都是與view進行交互，這么看來又很接近MVVM。讓我們把目光移到官網(wǎng)那個非醒目的title上：“AngularJS — Superheroic JavaScript MVW Framework”。
AngularJS中的Module類負責(zé)定義應(yīng)用如何啟動，它還可以通過聲明的方式定義應(yīng)用中的各個片段。我們來看看它是如何實現(xiàn)這些功能的。
一.Main方法在哪里
如果你是從Java或者Python編程語言轉(zhuǎn)過來的，那么你可能很想知道AngularJS里面的main方法在哪里？這個把所有東西啟動起來，并且第一個被執(zhí)行的方法在哪里？JavaScript代碼里面負責(zé)實例化并且把所有東西組合到一起，然后命令應(yīng)用開始運行的那個方法在哪里？
事實上，AngularJS并沒有main方法，AngularJS使用模塊的概念來代替main方法。模塊允許我們通過聲明的方式來描述應(yīng)用中的依賴關(guān)系，以及如何進行組裝和啟動。使用這種方式的原因如下：
1.模塊是聲明式的。這就意味著它編寫起來更加容易，同時理解起來也很容易，閱讀它就像讀普通的英文一樣！
2.它是模塊化的。這就迫使你去思考如何定義你的組件和依賴關(guān)系，讓它們變得更加清晰。
3.它讓測試更加容易。在單元測試呂，你可以有選擇地加入模塊，并且可以避免代碼中存在無法進行單元測試的內(nèi)容。同時，在場景測試中，你可以加載其他額外的模塊，這樣就可以更好地和其他組件配合使用。
例如，在我們的應(yīng)用中有一個叫做"MyAwesomeApp"的模塊。在HTML里面，只要把以下內(nèi)容添加到<html>標簽中（或者從技術(shù)上說，可以添加到任何標簽中）：
<html ng-app="MyAwesomeApp">
ng-app指令就會告訴AngularJS使用MyAwesomeApp模塊來啟動你的應(yīng)用。那么，應(yīng)該如何定義模塊呢？舉例來說，我們建議你為服務(wù)、指令和過濾器分別定義不同的模塊。然后你的主模塊可以聲明依賴這些模塊。
這樣可以使得模塊管理更加容易，因為它們都是良好的、完備的代碼塊，每個模塊有且只有一種職能。同時，單元測試可以只加載它們所關(guān)注的模塊，這樣就可以減少初始化的次數(shù)，單元測試也會變得更精致、更專注。
二.加載和依賴
模塊加載動作發(fā)生在兩個不同的階段，這一點從函數(shù)名上面就可以反映出來，它們分別是Config代碼塊和Run代碼塊（或者叫做階段）。
1.Config代碼塊
在這一階段里面，AngularJS會連接并注冊好所有數(shù)據(jù)源。因此，只有數(shù)據(jù)源和常量可以注入到Config代碼塊中。那些不確定是否已經(jīng)初始化好的服務(wù)不能注入進來。
2.Run代碼塊
Run代碼塊用來啟動你的應(yīng)用，并且在注射器創(chuàng)建完成之后開始執(zhí)行。為了避免在這一點開始之后再對系統(tǒng)進行配置操作，只有實例和常量可以被注入到Run代碼塊中。你會發(fā)現(xiàn)，在AngularJS中，Run代碼塊是與main方法最類似的東西。
三.快捷方法
利用模塊可以做什么呢？我們可以用它來實例化控制器、指令、過濾器以及服務(wù)，但是利用模塊類還可以做更多事情。如下模塊配置的API方法：
1.config(configFn)
利用此方法可以做一些注冊工作，這些工作需要在模塊加載時完成。
2.constant(name, object)
此方法會首先運行，所以你可以用它來聲明整個應(yīng)用范圍內(nèi)的常量，并且讓它們在所有配置（config方法）和實例（后面的所有方法，例如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)
如果你想要在注射器啟動之后執(zhí)行某些操作，而這些操作需要在頁面對用戶可用之前執(zhí)行，就可以使用此方法。
7.value(name,object)
允許在整個應(yīng)用中注射值。
8.factory(name,factoryFn)
如果你有一個類或者對象，需要首先為它提供一些邏輯或者參數(shù)，然后才能對它初始化，那么你就可以使用這里的factory接口。factory是一個函數(shù)，它負責(zé)創(chuàng)建一些特定的值（或者對象）。我們來看一個greeter(打招呼)函數(shù)的實例，這個函數(shù)需要一條問候語來初始化：
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之間的不同點在于，factory會直接調(diào)用傳遞給它的函數(shù)，然后返回執(zhí)行的結(jié)果；而service將會使用"new"關(guān)鍵字來調(diào)用傳遞給它的構(gòu)造方法，然后再返回結(jié)果。所以，前面的greeter Factory可以替換成下面這個greeter Service：
myApp.service('greeter', Greeter);
每當我們需要一個greeter實例的時候，AngularJS就會調(diào)用新的Greeter()來返回一個實例。
10.provider(name,providerFn)
provider是這幾個方法中最復(fù)雜的部分（顯然，也是可配置性最好的部分）。provider中既綁定了factory也綁定了service，并且在注入系統(tǒng)準備完畢之前，還可以享受到配置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);
};
});
這樣我們就可以在運行時動態(tài)設(shè)置問候語了（例如，可以根據(jù)用戶使用的不同語言進行設(shè)置）。
var myApp = angular.module(myApp, []).config(function(greeterProvider) {
greeterProvider.setSalutation('Namaste');
});
- JavaScript的Module模式編程深入分析
- nodejs中exports與module.exports的區(qū)別詳細介紹
- seajs1.3.0源碼解析之module依賴有序加載
- node.js的exports、module.exports與ES6的export、export default深入詳解
- 詳解Sea.js中Module.exports和exports的區(qū)別
- node.js報錯：Cannot find module ''ejs''的解決辦法
- node.js中module.exports與exports用法上的區(qū)別
- 深入淺析AngularJS中的module(模塊)
- 詳解AngularJS中module模塊的導(dǎo)入導(dǎo)出
- js module大戰(zhàn)
相關(guān)文章
這篇文章主要介紹了js常用正則表達式集錦，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
Angular中的ActivatedRoute和Router原理解釋
這篇文章主要為大家介紹了Angular中的ActivatedRoute和Router原理解釋，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
基于AngularJs + Bootstrap + AngularStrap相結(jié)合實現(xiàn)省市區(qū)聯(lián)動代碼
這篇文章主要給大家介紹基于AngularJs + Bootstrap + AngularStrap相結(jié)合實現(xiàn)省市區(qū)聯(lián)動的實例代碼，非常不錯具有參考借鑒價值，感興趣的朋友一起看看吧2016-05-05
這篇文章主要介紹了AngularJS過濾器用法,結(jié)合實例形式簡單的分析了AngularJS過濾器的功能及基本用法,并舉例說明了自定義過濾器的實現(xiàn)技巧,需要的朋友可以參考下2016-11-11
下面小編就為大家?guī)硪黄仙Ｕ刟ngularjs中的$state.go。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了Angular中的Promise對象($q介紹),本文講解了Promise模式、Q Promise的基本用法、AngularJs中的$q.defferd等內(nèi)容,需要的朋友可以參考下2015-03-03
從?Angular?Route?中提前獲取數(shù)據(jù)的方法詳解
這篇文章主要介紹了從?Angular?Route?中提前獲取數(shù)據(jù),通過本文，你將學(xué)會使用?resolver，?在?Angular?App?中應(yīng)用?resolver，應(yīng)用到一個公共的預(yù)加載導(dǎo)航，本文給大家介紹的非常詳細，需要的朋友可以參考下2022-07-07
AngularJS之自定義服務(wù)詳解(factory、service、provider)
本篇文章主要介紹了AngularJS之自定義服務(wù)詳解(factory、service、provider)，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-04-04
本篇文章主要介紹了angular中使用Socket.io實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
本篇文章主要介紹了Angular 5 給組件本身的標簽添加樣式class的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04