在去年到今年參與了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>
3:除官網介紹的幾個注意點之外 需要将
另外注意html 頭部要引入（否則會進入坑爹的quirk模式）
4：在controller和service中絕對不能出現html的dom和css代碼。
這會導緻邏輯的混雜耦合，對于angularjs自身的綁定對html操作，很多時候你會分不清是view的影響源，導緻修複bug，和新增功能，重構的艱難，常常出現很多的詭異行為。最好的實踐模式則是把必須的dom，css操作移向angular的directive，或者view中。在angularjs模式中隻有directive和view才能出現dom和css的邏輯操作。
5：controller中公用的邏輯推向service（factory，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通過viewmode（scope）的推送，與伺服器的互動推向service層次，利用angularjs的$resource或者$http擷取更新資料model，以及與服務端互動。層次劃分屬于縱向分割，将相同功能邏輯的接口放在一起，架構層次，而model則從業務的邏輯橫向分離。
11：如果你的公司應用了靈活開發則，tdd的開發是必備的，angularjs本也是解決javascript測試驅動開發項目。
12：scope的純淨性，scope上的每一個函數和屬性必須為view所用（事件傳遞或者屬性綁定），不用的可以作為工具函數或者service處置.
最後想說說angularjs也不是銀彈，并不是萬能的，不是所有的項目都适合應用，它适用于crud的應用系統，内置了一些預設規則（慣例優先），對于表現層頻繁互動的項目不适用，對于一些特殊的項目比如spring hdiv的項目也不是那麼友好，或者就是你希望相容更多的ie8一下的版本的應用系統，同樣也不實用。
![Java String.format方法的簡單使用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)