這篇文章我是在《angularjs新手到忍者》（《AngularJS_ Novice to Ninja》）這本書看到的，是講angularjs如何模塊化的，講的很不錯，但是翻譯水平有限，望大家批評指正。同時我也把這篇文章放進了github，下面是連接。
https://github.com/vista5004/angular-course/blob/master/%E6%A8%A1%E5%9D%97%E5%8C%96%E7%BC%96%E7%A8%8B%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5Modular%20Programming%20Best%20Practices.md
當你把你的項目源碼分為不同的模塊的時候，一般由兩個選擇：
（1）通過層來實現(xiàn)模塊化（2）通過特征來實現(xiàn)模塊化
首先我們進入angular seed項目，下面是這個項目在github上的地址，這是一個不錯的angular項目，大家可以學習一下。
（https://github.com/angular/angularseed/tree/69c9416c8407fd5806aab3c63916dfcf0522ecbc）
文件的app/js文件中，看看采用的哪種模式，當你打開文件夾，你會看到如下幾個文件：
1、app.js
2、controller.js
3、directive.js
4、filter.js
5、server.js
這就是通過層的概念來實現(xiàn)的模塊化，每一種組件的類型，被裝進了一種特殊的模塊。最終這個主要的依賴于其他四個模塊的入口app模塊在app.js模塊中定義。這是通過angular.module()的第二個參數(shù)來指定的。你只需要參考在html中ng-app指令。這種類型模塊化在很多場景都很有用。例如當你遇到一個特殊類型的bug，找到服務，你就指定在哪里發(fā)現(xiàn)。但是當你的app應用規(guī)模和復雜性增長到一定程度，或許就適用于通過層來劃分模塊的方式?？梢酝ㄟ^特征的方式來實現(xiàn)。例如你的站點需要一個登陸模塊。所有這些模塊都獨立存在，并且緊密的耦合在一起。通常你為每個模塊創(chuàng)建一個獨立的文件用來放置相關的JavaScript文件在每個相關的文件夾中。這些文件夾中的代碼是可重用的，因為你能把某一個模塊的一整個文件夾放入另外一個不同的項目中。并且不同的團隊之間可以同時開發(fā)不同的模塊，這些模塊并沒有緊密的耦合在一起。此外，單元測試也就變得小菜一碟了，只要你加載需要的模塊，并且分開測試也變得容易。我們調整一下Angular Seed Project來使用這種方式，例如博客系統(tǒng)，可以使用這種模式：
結構如下：
/app
/img -- application level images
/css -- application level css
/js
app.js -- the main app module
/modules
/login
/js
controllers.js --controllers for login module
directives.js --directives for login module
/views -- views for login module
/css
/img
loginModule.js -- Main login module definition
/comment
/js
controllers.js --controllers for login module
directives.js --directives for login module
/views -- views for comment module
/css
/img
commentModule.js -- Main comment module definition
...
...
index.html
在這些的文件中我們定義自己的模塊。比如登陸模塊，如下
app/modules/login/js/controller
angular.module('mainApp.login.controller',[]);
app/modules/login/js/directive.js
angular.module('mainApp.login.directives',[])
app/modules/login/loginModule.js
angular.module('loginModule',['mainApp.login.controller','mainApp.login.directives'])
對于評論模塊，定義如下
/app/modules/comment/js/controllers.js
angular.module('mainApp.comment.controllers',[]);
/app/modules/comment/js/directives.js
angular.module('mainApp.comment.directives',[]);
/app/modules/comment/loginModule.js
angular.module('commentModule',['mainApp.comment.controllers',mainApp.comment.directives']);
在主要的模塊中定義/app/app.js如下
angular.module('mainApp',['loginModule','commentModule'])
最終在index.html我們啟動文件通過寫入
ng-app='mainApp'
正如你看到的，這個登陸模塊loginModule和評論模塊commentModule互相是不通信的。但是通過mainApp模塊組合在一起。在HTML文件中，當angular遇到ng-app，它就通過加載指定的模塊啟動。在這種情況下，angular啟動app程序通過加載mainApp模塊。但是angular發(fā)現(xiàn)這個mainApp模塊依賴于另外兩個模塊loginModule和commentModule。但是這兩個模塊本身也依賴于其他兩個模塊（控制器模塊和指令模塊），也需要angular來加載。這樣angular啟動程序通過加載需要的模塊。
