深入淺析AngularJS中的module(模組)_AngularJS

什麼是AngularJS的模組

我們所說的模組，是你的AngularJS應用程式的一個組成部分，它可以是一個Controller，也可以是一個Service服務，也可以是一個過濾器(Filter)，也可以是一個directive(指令)等等…都是屬於一個模組！

大多數的應用程式都是有一個自己的函數入口方法Main ，用它來進行初始化，以及載入裝配各個模組，然後這些模組的組合，構成了你的應用程式，對吧？

但是，but， AngularJS應用程式卻不是這樣的哦，它沒有main 方法，沒有函數入口。代替之的是在模組中指定聲明這個模組在AngularJS應用程式中該如何去載入，啟動。

這種方法有以下幾個優點：

1) 使用聲明的方式，讓人更加容易理解。

2) 你可以更加容易的讓你的代碼進行重用。

3) 模組的載入順序就更加容易控制了。因為這些模組是順延強制的。

4) 對於進行單元測試就變得更加的方便了。更加可靠，你只需要載入這個模組就可以進行測試了。

5) 端對端的測試中，你可以使用模組去重寫配置。

在AngularJS中module是一個核心的存在，包括了很多方面，比如controller, config, service, factory, directive, constant, 等等。

在Javascript中如何?類似module的功能呢？

或者說，我們定義一個函數，如何把函數內的函數向外界開放呢？

我想，可以把函數中的函數作為一個對象的索引值，從而向外界開放。

這樣說很籠統，其實是這樣的：

var myModule = function outerFuction(){  var method1 = new function(){}  var method2 = new function(){}  return{    method1: method1,    method2, method2  }}var o = outerFucntion();o.method1();o.mehtod2(); 

舉個銀行存錢取錢的例子。

var account = function(){ //餘額 var balance = 0; //存錢 var deposit = function(money){  balance+=money;  console.log("卡上餘額為： " + balance);  notifyUser(); } //取錢 var withdraw = function(money){  balance -= money;  console.log("卡上餘額為： " + balance)  notifyUser(); } //通知使用者 var notifyUser = function(){  console.log("卡上餘額有變動"); } return {  deposit:deposit,  withdraw: withdraw }}var a1 = account();a1.deposit(100);a1.withdraw(50); 

再來到AngularJS，我們已經習慣了這樣寫：

var app = angular.module('app',[]);app.config();app.controller();app.factory();... 

也就是擷取到module,再調用module提供給我們的方法。

查看angular.js原始碼，發現：

angular = window.angular || (window.angular = {} )

這是為什麼我們能使用angular這個變數的原因。

...var moduleInstace = {    provider: invokeLater('$provide','provider'),    factory: invokeLater('$provider', 'factory'),    service: invokeLater('$provider', 'service'),    value: invokeLater('$provide', 'value'),    constant: invokeLater('$provider', 'constant'...),    animation: invokeLater('$animateProvider',...),    filter: invokeLater('$filterProvider',...),    controller: invokeLater('$controllerProvider',...),    directive: invokeLater('$compileProvider',...),    config: config,}return moduleInstance;... 

以上的寫法正是module的寫法。

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

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

        所以，對於以下代碼，你需要保證在整個應用中只會使用一次：

angular.module('MyApp', [...]) //如果你的應用是模組化的，這裡可能是MyModule

        如果你不打算把模組的引用存到一個變數中，然後在整個應用中通過這個變數來引用模組，那麼，在其他檔案中使用angular.module(MyApp)的方式可以保證得到正確的AngularJS模組引用。模組上的所有東西都必須通過訪問這個模組引用來定義，或者在模組定義的地方把那些必備的內容添加上去。