這篇文章我是在《angularjs新手到忍者》（《AngularJS_ Novice to Ninja》）這本書看到的蔫浆，是講angularjs如何模塊化的窟蓝，講的很不錯(cuò)挠阁，但是翻譯水平有限乱灵，望大家批評(píng)指正踢故。同時(shí)我也把這篇文章放進(jìn)了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
當(dāng)你把你的項(xiàng)目源碼分為不同的模塊的時(shí)候，一般由兩個(gè)選擇：
（1）通過(guò)層來(lái)實(shí)現(xiàn)模塊化（2）通過(guò)特征來(lái)實(shí)現(xiàn)模塊化
首先我們進(jìn)入angular seed項(xiàng)目耸峭，下面是這個(gè)項(xiàng)目在github上的地址桩蓉，這是一個(gè)不錯(cuò)的angular項(xiàng)目，大家可以學(xué)習(xí)一下劳闹。
（https://github.com/angular/angularseed/tree/69c9416c8407fd5806aab3c63916dfcf0522ecbc）
文件的app/js文件中院究，看看采用的哪種模式，當(dāng)你打開文件夾本涕，你會(huì)看到如下幾個(gè)文件：
1业汰、app.js
2、controller.js
3偏友、directive.js
4蔬胯、filter.js
5对供、server.js
這就是通過(guò)層的概念來(lái)實(shí)現(xiàn)的模塊化位他，每一種組件的類型，被裝進(jìn)了一種特殊的模塊产场。最終這個(gè)主要的依賴于其他四個(gè)模塊的入口app模塊在app.js模塊中定義鹅髓。這是通過(guò)angular.module()的第二個(gè)參數(shù)來(lái)指定的。你只需要參考在html中ng-app指令京景。這種類型模塊化在很多場(chǎng)景都很有用窿冯。例如當(dāng)你遇到一個(gè)特殊類型的bug，找到服務(wù)确徙，你就指定在哪里發(fā)現(xiàn)醒串。但是當(dāng)你的app應(yīng)用規(guī)模和復(fù)雜性增長(zhǎng)到一定程度，或許就適用于通過(guò)層來(lái)劃分模塊的方式鄙皇∥叨模可以通過(guò)特征的方式來(lái)實(shí)現(xiàn)。例如你的站點(diǎn)需要一個(gè)登陸模塊伴逸。所有這些模塊都獨(dú)立存在缠沈，并且緊密的耦合在一起。通常你為每個(gè)模塊創(chuàng)建一個(gè)獨(dú)立的文件用來(lái)放置相關(guān)的JavaScript文件在每個(gè)相關(guān)的文件夾中错蝴。這些文件夾中的代碼是可重用的洲愤，因?yàn)槟隳馨涯骋粋€(gè)模塊的一整個(gè)文件夾放入另外一個(gè)不同的項(xiàng)目中。并且不同的團(tuán)隊(duì)之間可以同時(shí)開發(fā)不同的模塊顷锰，這些模塊并沒(méi)有緊密的耦合在一起柬赐。此外，單元測(cè)試也就變得小菜一碟了官紫，只要你加載需要的模塊躺率，并且分開測(cè)試也變得容易玛界。我們調(diào)整一下Angular Seed Project來(lái)使用這種方式，例如博客系統(tǒng)悼吱，可以使用這種模式：
結(jié)構(gòu)如下：
/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'])
對(duì)于評(píng)論模塊后添，定義如下
/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我們啟動(dòng)文件通過(guò)寫入
ng-app='mainApp'
正如你看到的笨枯，這個(gè)登陸模塊loginModule和評(píng)論模塊commentModule互相是不通信的。但是通過(guò)mainApp模塊組合在一起遇西。在HTML文件中馅精，當(dāng)angular遇到ng-app，它就通過(guò)加載指定的模塊啟動(dòng)粱檀。在這種情況下洲敢，angular啟動(dòng)app程序通過(guò)加載mainApp模塊。但是angular發(fā)現(xiàn)這個(gè)mainApp模塊依賴于另外兩個(gè)模塊loginModule和commentModule茄蚯。但是這兩個(gè)模塊本身也依賴于其他兩個(gè)模塊（控制器模塊和指令模塊）压彭，也需要angular來(lái)加載。這樣angular啟動(dòng)程序通過(guò)加載需要的模塊渗常。
