AngularJS Module類的方法


AngularJS Module類的方法

        AngularJS中的Module類負責定義應用如何啟動,它還可以通過聲明的方式定義應用中的各個片段。我們來看看它是如何實現這些功能的。

一.Main方法在哪里

        如果你是從Java或者Python編程語言轉過來的,那么你可能很想知道AngularJS里面的main方法在哪里?這個把所有東西啟動起來,並且第一個被執行的方法在哪里?JavaScript代碼里面負責實例化並且把所有東西組合到一起,然后命令應用開始運行的那個方法在哪里?

        事實上,AngularJS並沒有main方法,AngularJS使用模塊的概念來代替main方法。模塊允許我們通過聲明的方式來描述應用中的依賴關系,以及如何進行組裝和啟動。使用這種方式的原因如下:

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

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

        3.它讓測試更加容易。在單元測試呂,你可以有選擇地加入模塊,並且可以避免代碼中存在無法進行單元測試的內容。同時,在場景測試中,你可以加載其他額外的模塊,這樣就可以更好地和其他組件配合使用。

        例如,在我們的應用中有一個叫做"MyAwesomeApp"的模塊。在HTML里面,只要把以下內容添加到<html>標簽中(或者從技術上說,可以添加到任何標簽中):

<html ng-app="MyAwesomeApp">

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

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

二.加載和依賴

        模塊加載動作發生在兩個不同的階段,這一點從函數名上面就可以反映出來,它們分別是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模塊引用。模塊上的所有東西都必須通過訪問這個模塊引用來定義,或者在模塊定義的地方把那些必備的內容添加上去。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM