什麼是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('MyangularApp ')會使用由第一個呼叫定義的現有的模組。
所以，以下程式碼，你需要確保整個應用程式只會使用一次：
angular.module('MyApp', [...]) //如果你的應用程式是模組化的，這裡可能是MyModule
如果你不打算把模組的引用存到一個變數中，然後在整個應用中透過這個變數來引用模組，那麼，在其他檔案中使用angular.module(MyApp)的方式可以保證得到正確的AngularJS模組引用。模組上的所有東西都必須透過存取這個模組引用來定義，或是在模組定義的地方把那些必備的內容加上去。
