在去年到今年參與了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:除官網介紹的幾個注意點之外 需要將
<div ng-app="xxx">
改為<div id="ng-app" ng-app="xxx">另外注意html 頭部要引入（否則會進入坑爹的quirk模式）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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則從業務的邏輯橫向分離。
10：服務端的服務的接口需要考慮表現層客戶端的應用提供，這是一個良好的SOA服務設計的准則，這里不用多余的描述，具體請移步架構篇。
11：如果你的公司應用了敏捷開發則，TDD的開發是必備的，angularjs本也是解決javascript測試驅動開發項目。
12：scope的純凈性，scope上的每一個函數和屬性必須為view所用（事件傳遞或者屬性綁定），不用的可以作為工具函數或者service處置.
13：對controller之間如果不是強依賴，只是弱引用則最好用事件$emit,$on,$broadcast,是的controller之間低耦合（Angularjs Controller 間通信機制）。
14：angularjs的的模塊管理參見如何組織大型JavaScript應用中的代碼？.
最后想說說angularjs也不是銀彈，並不是萬能的，不是所有的項目都適合應用，它適用於CRUD的應用系統，內置了一些默認規則（慣例優先），對於表現層頻繁交互的項目不適用，對於一些特殊的項目比如spring hdiv的項目也不是那么友好，或者就是你希望兼容更多的IE8一下的版本的應用系統，同樣也不實用。