在去年到今年參與了2個使用Angularjs作為用戶端開發架構的項目開發。主要利用asp.net web api作為restfull服務提供架構和angularjs結合。Angularjs作為html的擴充，旨在建立一個豐富的動態web應用，通過Directive建立一套html擴充的DSL模型，利用PM模式變形MVVM在網上很多稱MVC模式，本人認為在angular0.8是屬於經典MVC模式，但在1.0把scope獨立注入過後，更傾向於MVVM模式，這將會後續隨筆中寫道）簡化前端開發和使得前端商務邏輯得以分離，view和表現邏輯的分離，更便於維護，擴充。Angularjs本來就是採用TDD開發的，提供了一套單元測試組件和End 2 End的測試架構。Angularjs的的強大之處在於提供了一套內似WPF，Silverlight的強大資料繫結和格式化，過濾組件，這也是MVVM模式所必備的條件；再加之IOC的注入機制，使得不能商務邏輯的分離，服務代碼的更大程度抽象重用。
在這節隨便中將討論的angularjs開發的一些基本準則，為什麼會有這篇隨便呢，因為看見一些項目對於angularjs的亂用。
1：不要一個page一個God似無所不能的controller包含所有頁面邏輯。
Angularjs ng-controller旨在將商務邏輯的區分，更推薦按照商務邏輯的劃分controller，做到業務功能的高內聚，controller的單一原則SRP。
2：View中包含盡量少的邏輯。
就像jsp，asp這類服務端模板引擎一樣，我們應該把盡量少的邏輯放在view中，因為這樣會導致view和邏輯的緊耦合性，view在軟體開發中是最易變化的，而表現層邏輯卻相對於view是相對穩定的行為。同時也導致的view中的邏輯不能被自動化測試，持續整合所覆蓋，這將導致以後修改重構和模組的整合的痛苦。很明顯的就是太多的angularjs的ng-switch，ng-when和頁面計算運算式等等。
3：注意一些特殊的節點式的angularjs directive，因為在IE7上這是不被認識的，因為IE的嚴格XML模式。如果你想make ie7 happy，
1：請注意匯入json2或者json3的js
2：xmlns:ng命令空間和節點element式directive。
<html xmlns:ng="http://angularjs.org">
<head>
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view');
// Optionally these for CSS
document.createElement('ng:include');
document.createElement('ng:pluralize');
document.createElement('ng:view');
</script>
<![endif]-->
</head>
4：在controller和service中絕對不能出現html的DOM和CSS代碼。
這會導致邏輯的混雜耦合，對於angularjs自身的綁定對html操作，很多時候你會分不清是view的影響源，導致修複bug，和新增功能，重構的艱難，常常出現很多的詭異行為。最好的實踐模式則是把必須的dom，css操作移向angular的Directive，或者view中。在angularjs模式中只有directive和view才能出現dom和css的邏輯操作。
5：controller中公用的邏輯推向servicefactory，value，config)，採用IOC的注入，提高代碼的重用度，修改的單一點，開閉原則。
6：controller應該只包含商務邏輯，對於資料模型的格式化過濾盡量交給angular架構filter等處理。
7：viewmodel中最好建立一個通用屬性比如vm，它承載view渲染的最小量化model，對於model的變形事件則在vm之外scope之上。這才是MVVM推薦方式。事件相當於WPF中的command，負責模型事件的傳遞修改模型，從而從模型的改變通知view的強制更新WPF中model必須實現INotifyPropertyChange介面）。同時這樣vm屬性也便於資料的填充和收集回傳服務端。
8：IOC注入優先，注有助於良好的設計，邏輯的可重用和單元的可測試性，物件導向的“開閉原則”，修改的單一點。
9：良好的分層設計，對於服view的互動採用controller通過viewmodescope）的推送，伺服器的互動推向service層次，利用angularjs的$resource或者$http擷取更新資料model，與服務端互動。層次屬於縱向分割，將一類功能邏輯的介面放在一起，架構層次，而model則從業務的邏輯橫向分離。
10：服務端的服務的介面需要考慮表現層用戶端的應用提供，這是一個良好的SOA服務設計的準則，這裡不用多餘的描述，具體請移步架構篇。
11：如果你的公司應用了敏捷開發則，TDD的開發是必備的，angularjs本也是解決javascript測試驅動開發項目。
最後想說說angularjs也不是銀彈，並不是萬能的，不是所有的項目都適合應用，它適用於CRUD的應用系統，內建了一些預設規則慣例優先），對於表現層頻繁互動的項目不適用，對於一些特殊的項目比如spring hdiv的項目也不是那麼友好，或者就是你希望相容更多的IE8一下的版本的應用系統，同樣也不實用。
本文出自 “破狼” 部落格，請務必保留此出處http://whitewolfblog.blog.51cto.com/3973901/1161630
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
