什么是AngularJS的模塊
我們所說的模塊，是你的AngularJS應(yīng)用程序的一個組成部分，它可以是一個Controller，也可以是一個Service服務(wù)，也可以是一個過濾器(Filter)，也可以是一個directive(指令)等等…都是屬于一個模塊！
大多數(shù)的應(yīng)用程序都是有一個自己的函數(shù)入口方法Main ，用它來進行初始化，以及加載裝配各個模塊，然后這些模塊的組合，構(gòu)成了你的應(yīng)用程序，對吧？
但是，but， AngularJS應(yīng)用程序卻不是這樣的哦，它沒有main 方法，沒有函數(shù)入口。代替之的是在模塊中指定聲明這個模塊在AngularJS應(yīng)用程序中該如何去加載，啟動。
這種方法有以下幾個優(yōu)點：
1) 使用聲明的方式，讓人更加容易理解。
2) 你可以更加容易的讓你的代碼進行重用。
3) 模塊的加載順序就更加容易控制了。因為這些模塊是延遲執(zhí)行的。
4) 對于進行單元測試就變得更加的方便了。更加可靠，你只需要載入這個模塊就可以進行測試了。
5) 端對端的測試中，你可以使用模塊去重寫配置。
在AngularJS中module是一個核心的存在，包括了很多方面，比如controller, config, service, factory, directive, constant, 等等。
在Javascript中如何實現(xiàn)類似module的功能呢？
或者說，我們定義一個函數(shù)，如何把函數(shù)內(nèi)的函數(shù)向外界開放呢？
我想，可以把函數(shù)中的函數(shù)作為一個對象的鍵值，從而向外界開放。
這樣說很籠統(tǒng)，其實是這樣的：
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，我們已經(jīng)習慣了這樣寫：
var app = angular.module('app',[]);app.config();app.controller();app.factory();... 也就是獲取到module,再調(diào)用module提供給我們的方法。
查看angular.js源代碼，發(fā)現(xiàn)：
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',[...])會創(chuàng)建一個新的Angular模塊，然后把方括號（[...]）中的依賴列表加載進來；而angular.module('MyApp')會使用由第一個調(diào)用定義的現(xiàn)有的模塊。
所以，對于以下代碼，你需要保證在整個應(yīng)用中只會使用一次：
angular.module('MyApp', [...]) //如果你的應(yīng)用是模塊化的，這里可能是MyModule
如果你不打算把模塊的引用存到一個變量中，然后在整個應(yīng)用中通過這個變量來引用模塊，那么，在其他文件中使用angular.module(MyApp)的方式可以保證得到正確的AngularJS模塊引用。模塊上的所有東西都必須通過訪問這個模塊引用來定義，或者在模塊定義的地方把那些必備的內(nèi)容添加上去。
