AngularJS Module類的方法

時間 2019-11-10

原文原文鏈接

AngularJS中的Module類負責定義應用如何啓動，它還能夠經過聲明的方式定義應用中的各個片斷。咱們來看看它是如何實現這些功能的。html

一.Main方法在哪裏編程

若是你是從Java或者Python編程語言轉過來的，那麼你可能很想知道AngularJS裏面的main方法在哪裏？這個把全部東西啓動起來，而且第一個被執行的方法在哪裏？JavaScript代碼裏面負責實例化而且把全部東西組合到一塊兒，而後命令應用開始運行的那個方法在哪裏？app

事實上，AngularJS並無main方法，AngularJS使用模塊的概念來代替main方法。模塊容許咱們經過聲明的方式來描述應用中的依賴關係，以及如何進行組裝和啓動。使用這種方式的緣由以下：編程語言

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

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

3.它讓測試更加容易。在單元測試呂，你能夠有選擇地加入模塊，而且能夠避免代碼中存在沒法進行單元測試的內容。同時，在場景測試中，你能夠加載其餘額外的模塊，這樣就能夠更好地和其餘組件配合使用。函數

例如，在咱們的應用中有一個叫作"MyAwesomeApp"的模塊。在HTML裏面，只要把如下內容添加到<html>標籤中（或者從技術上說，能夠添加到任何標籤中）：單元測試

<html ng-app="MyAwesomeApp">

ng-app指令就會告訴AngularJS使用MyAwesomeApp模塊來啓動你的應用。那麼，應該如何定義模塊呢？舉例來講，咱們建議你爲服務、指令和過濾器分別定義不一樣的模塊。而後你的主模塊能夠聲明依賴這些模塊。測試

這樣可使得模塊管理更加容易，由於它們都是良好的、完備的代碼塊，每一個模塊有且只有一種職能。同時，單元測試能夠只加載它們所關注的模塊，這樣就能夠減小初始化的次數，單元測試也會變得更精緻、更專一。this

二.加載和依賴

模塊加載動做發生在兩個不一樣的階段，這一點從函數名上面就能夠反映出來，它們分別是Config代碼塊和Run代碼塊（或者叫作階段）。

1.Config代碼塊

在這一階段裏面，AngularJS會鏈接並註冊好全部數據源。所以，只有數據源和常量能夠注入到Config代碼塊中。那些不肯定是否已經初始化好的服務不能注入進來。

2.Run代碼塊

Run代碼塊用來啓動你的應用，而且在注射器建立完成以後開始執行。爲了不在這一點開始以後再對系統進行配置操做，只有實例和常量能夠被注入到Run代碼塊中。你會發現，在AngularJS中，Run代碼塊是與main方法最相似的東西。

三.快捷方法

利用模塊能夠作什麼呢？咱們能夠用它來實例化控制器、指令、過濾器以及服務，可是利用模塊類還能夠作更多事情。以下模塊配置的API方法：

1.config(configFn)

利用此方法能夠作一些註冊工做，這些工做須要在模塊加載時完成。

2.constant(name, object)

此方法會首先運行，因此你能夠用它來聲明整個應用範圍內的常量，而且讓它們在全部配置（config方法）和實例（後面的全部方法，例如controller、service等）方法中可用。

3.controller(name,constructor)

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

4.directive(name,directiveFactory)

可使用此方法在應用中建立指令。

5.filter(name,filterFactory)

容許你建立命名的AngularJS過濾器，就像前面章節所討論的那樣。

6.run(initializationFn)

若是你想要在注射器啓動以後執行某些操做，而這些操做須要在頁面對用戶可用以前執行，就可使用此方法。

7.value(name,object)

容許在整個應用中注射值。

8.factory(name,factoryFn)

若是你有一個類或者對象，須要首先爲它提供一些邏輯或者參數，而後才能對它初始化，那麼你就可使用這裏的factory接口。factory是一個函數，它負責建立一些特定的值（或者對象）。咱們來看一個greeter(打招呼)函數的實例，這個函數須要一條問候語來初始化：

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

greeter函數示例以下：

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

而後能夠這樣來調用它：

var myGreeter = greeter('Halo');

9.service(name,object)

factory和service之間的不一樣點在於，factory會直接調用傳遞給它的函數，而後返回執行的結果；而service將會使用"new"關鍵字來調用傳遞給它的構造方法，而後再返回結果。因此，前面的greeter Factory能夠替換成下面這個greeter Service：

myApp.service('greeter', Greeter);

每當咱們須要一個greeter實例的時候，AngularJS就會調用新的Greeter()來返回一個實例。

10.provider(name,providerFn)

provider是這幾個方法中最複雜的部分（顯然，也是可配置性最好的部分）。provider中既綁定了factory也綁定了service，而且在注入系統準備完畢以前，還能夠享受到配置provider函數的好處（也就是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);
};
});

這樣咱們就能夠在運行時動態設置問候語了（例如，能夠根據用戶使用的不一樣語言進行設置）。

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

每當有人須要一個greeter實例時，AngularJS就會在內部調用$get方法。

附：angular.module('MyApp',[...])和angular.module('MyApp')之間有一個很小可是卻很重要的不一樣點

angular.module('MyApp',[...])會建立一個新的Angular模塊，而後把方括號（[...]）中的依賴列表加載進來；而angular.module('MyApp')會使用由第一個調用定義的現有的模塊。

因此，對於如下代碼，你須要保證在整個應用中只會使用一次：

angular.module('MyApp', [...]) //若是你的應用是模塊化的，這裏多是MyModule

若是你不打算把模塊的引用存到一個變量中，而後在整個應用中經過這個變量來引用模塊，那麼，在其餘文件中使用angular.module(MyApp)的方式能夠保證獲得正確的AngularJS模塊引用。模塊上的全部東西都必須經過訪問這個模塊引用來定義，或者在模塊定義的地方把那些必備的內容添加上去。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。