以worktile為例，怎麼分析AngularJs的架構方式呢？如果可以畫圖示之，感激不盡

01-25

本人新手，最近想從Backbone遷移到Angular，但對於新的Angular感覺無法從大的架構來把握，特拜託各位大神解惑。（在此不討論各個框架的優劣，好壞暫不談論，只談一個話題：如何用Angular構建類似worktile這樣的大型SPA）

這個問題嘛，真不好回答，問的太籠統了，其實你只要熟悉掌握了Angular.js，自然而然的就會用Angular.js結合自身的業務去構建SPA程序了，Angular.js是一個比較全面的框架，按照他的方式去做即可，前端唯一做的就是架構就是怎麼組織文件結構，你可以參考：

mgechev/angularjs-style-guide · GitHub

gocardless/angularjs-style-guide · GitHub

Brian Ford

Angularjs開發一些經驗總結

官方也提供了示常式序：angular/angular-seed · GitHub （個人覺得組織只適合小型項目）

-------------多謝 @墨磊的補充：-------------

johnpapa/angularjs-styleguide · GitHub

browserify shim recipes · thlorenz/browserify-shim Wiki · GitHub

--------------------------------------------------

下面就簡單概括下使用Angular.js可能會遇到的問題和建議

1. 文件組織結構的選擇，Worktile是按照Angular.js的功能劃分的，如下圖所示：

如果你項目非常龐大，可以選擇按照業務的功能模塊分類，每個業務模塊再按照Angular.js的功能劃分，比如 user文件下有controllers、filters、services等等；

2. 路由的選擇，Angular.js的路由只能是一層的，如果涉及到多層View嵌套的話是不可以的，建議使用 angular-ui/ui-router · GitHub ，Worktile還是使用了ng本身的路由，所以很多項目二級菜單就重複渲染了；

3. 組件的封裝，組件封裝最好給團隊中最熟悉ng的人來做，組件從功能上劃分成2個部分，第一種是業務組件，如果系統多個地方都需要使用這個模塊，或者誇系統使用，封裝一個業務組件會使代碼的可重用性大大提高，第二種是第三方插件的整合，在選擇第三方插件的時候，盡量選擇有ng版本的，實在沒有，就自己封裝一個directive。組件從技術上劃分包含：指令（directive）和服務（service、provider、factory）；

4. 如果你使用了bootstrap，無肯定要使用 angular-ui/bootstrap · GitHub ，文件上傳的組件建議使用 danialfarid/angular-file-upload · GitHub 或者 nervgh/angular-file-upload AngularUI AngularUI · GitHub 提供了很多常用的組件，一般項目中肯定會用；

5. 與服務端API的交互建議做成數據服務,用$http或者$resource都行，除了directive和UI服務外，其他地方避免有操作DOM和CSS的代碼。

暫時就這麼多，想到了再補充，也歡迎其他高人補充

我考慮過使用ng來處理更複雜的情況，面向的場景是那種更大型的管控系統，打算寫個系列文章來詳細說明，可能會寫很多。才寫了一部分，只能先籠統回答下，主要是這幾個點：

1 數據模型的梳理，包括服務介面，數據之間的關係，業務事件等等

2 路由的規劃，多級路由與功能界面的組織方式，哪些是靜態路由，哪些是動態創建的路由等等

3 門戶與集成，包括portlet和功能模塊的引入和動態載入，每個動態模塊所可能存在的類型，異構和多種同構模塊的引入，它們之間的通信，可定製的界面流等等

4 各種自定義組件的實現

5 相關的工程體系，包括代碼的依賴關係組織和全局視圖，路由的可視化管理，模塊的測試，發布等等

6 人員的協作關係，包括代碼規範，開發流程等等

這裡面有些東西我寫過概念性的文章，感覺還是有些空，所以打算寫得詳細些，應該要花不少時間

關注http://worktile.com/tech，我們將不定期分享worktile團隊的各種技術故事、架構和乾貨。

架構模式的話，這篇幫助可能更大。 angular中的MVVM模式

還有一些最佳實踐，和臟檢查的原理。

歡迎關注「破狼」微信訂閱號，有相關文章