在8月份一個項目機會下，決定真正完整地學習使用AngularJS 1.3，下面是我一些總結。
PS：有些人很抵觸AngularJS這種框架，認為它是在辦壞事，裝高調，我是認為任何能廣泛傳播的框架存在不是沒有原因，總會有它適用的場景，真正使用了才能發覺東西好壞。
什么是AngularJS
首先AngularJS是一個框架，框架與函數庫的區別就在於，框架決定整個項目的開發套路，以框架為主導，函數庫卻是以項目本身為主導，例如jquery。它就是個雙向數據綁定的前端JS框架，雙向數據綁定是相比較於其他框架最特別的地方，其他特性都是圍繞它工作的。它適用於CRUD應用（增加(Create)、讀取(Retrieve)、更新(Update)和刪除(Delete)）。
PS：截圖取自大漠窮秋，圖例意思是當模板編譯成視圖，視圖發生變化觸發數據模型變化，數據模型又會作用於視圖。
我時常想着一句話“當你知道一個工具的30%，你就能用它做70%的事”，所以學習一個框架的時候，不需要完完整整從頭看到尾，當了解差不多了就可以開始干活。開始學習AngularJS，只需知道什么是雙向數據綁定就行了，這是最關鍵、最需明白的。
寫一個簡單的示例如下。
HTML:
<!doctype html> <html ng-app> <head> <meta charset="utf-8"> <script src="angular.js"></script> <script src="HelloAngular_bind.js"></script> </head> <body> <div ng-controller="HelloAngular"> <p>x ：<input type="text" ng-model="x" /></p> <p>y ：<input type="text" ng-model="y" /></p> <p>x + y ：<span ng-bind="x*1+y*1"></span></p> </div> </body> </html>
JS:
function HelloAngular($scope) { $scope.x = 1; $scope.y = 2; }
PS：例子感受一下就行，沒有必要深究，但應該對data與view的互相影響有些感覺。
除了最重要的雙向數據綁定，AngularJS有以下元件，其中Controller、Directive是最為重要的。
PS：截圖取自大漠窮秋
在我的項目里，使用最多是Directive、Controller，了解這兩個元件我覺得就差不多了，其他用到時再查就行。
1. Module
作為模塊組織者，包含其他AngularJS元件。
2. Controller
負責跟View溝通， 不處理任何跟DOM有關的工作
PS：當你的Controller里面寫了DOM操作時，就應該反省代碼是否寫得有問題了。
3. Directive
類似於HTML標簽，可以定義標簽的行為，所有與DOM相關的操作都應該寫在這里。
PS：盡量不用DOM操作，但可能還是會需要用到，用到時就要在Directive里用。
4. Service
寫可以獨立運作的代碼（與View無關），共用於元件（例如控制器）之間，不應該處理任何跟DOM有關的工作。
5. Filter
對數據做一些修理，不應該處理任何跟DOM有關的工作。
6. Config
用來定義路由規則，不應該處理任何跟DOM有關的工作。
上面是一些教程結合我自己的總結，最常強調注意一點是對DOM操作的地方。對於這些元件我沒有舉例子，貼代碼沒什么意思，如果想學習的，還是要自己去實踐。
雙向數據綁定是個重要的特性，值得我們搞明白他的原理。當View中有數據發生了變化，這個變化會反饋到Model的scope的數據上，而當scope數據發生變化時，View中的數據也會更新到最新的值。
在說明原理前，有三個scope重要的方法需要解釋，分別是$apply、$digest、$watch。
1. $watch
注冊一個watcher，監聽scope的數據，當數據變化時候調用回調函數。第一個參數是被監聽的數據，第二個參數是回調函數。
$scope.$watch('xxx', function(newValue, oldValue) {
//update the DOM with newValue
});
2. $digest
檢查scope中的數據是否發生了變化，如果變化則關聯到該watcher的回調函數就會被執行。
3. $apply
這方法是調用$rootScope.$digest()，在$rootScope開始$digest，隨后會訪問到所有的children scope中的watchers。$apply()方法有兩種形式。第一種會接受一個function作為參數，執行該function並且觸發一輪$digest循環。第二種會不接受任何參數，只是觸發一輪$digest循環。
PS：AngularJS並不直接調用$digest()，而是調用$scope.$apply()
當在HTML寫下表達式如{{name}}或ng-model="name"時，AngularJS在幕后會為你在scope模型上設置一個watcher，如下：
$scope.$watch('name', function(newValue, oldValue) {
//update the DOM with newValue
});
當頁面JS事件觸發時，AngularJS會監視到並更改scope數據，並自動觸發一輪$digest循環，每個關聯的watcher的回調函數被執行，最后View被更新。
1. 有的時候你發現明明scope的數據已經改了，但你發現View並沒有更新。
這是因為你可能在setTimeout、異步請求等里去修改數據，但此時AngularJS並不知道數據已經變了，不會幫你調用digest循環，所以你需要手動調用$apply。目前一些指令（例ng-click、ng-model）以及服務（例$timeout、$http）被調用時會自動觸發一次$digest循環，這些就不用手動調$apply。
setTimeout(function() { $scope.$apply(function() { //wrapped this within $apply $scope.name= 'lu'; }); }, 2000);
setTimeout(function() { $scope.name= 'lu'; $scope.$apply(); }, 2000);
2. 臟檢查(Dirty Checking)
當一個$digest循環運行時，watchers會被執行來檢查scope中的models是否發生了變化。如果發生了變化，那么相應的listener函數就會被執行。在當前的一次循環結束后，它會再執行一次循環用來檢查是否有models發生了變化。這就是臟檢查(Dirty Checking)，它用來處理在listener函數被執行時可能引起的model變化。因此，$digest循環會持續運行直到model不再發生變化，或者$digest循環的次數達到了10次。（這段解析來自其他文章）
PS：$digest循環最少也會運行兩次，即使在listener函數中並沒有改變任何model
3. 監控的表達式不要過於復雜，表達式數量不要太多
4. 監聽函數內不要有DOM操作，那樣會顯著降低性能
5. 不能互相監聽對方會修改的屬性，以免形成交叉引用
1. AngularJS初級入門教程 （外國人的，講得簡單易懂）
2. AngularJS重要的開發觀念與經驗分享
3. 用AngularJS開發下一代WEB應用（大漠窮秋）
這篇文章我一直在說雙向數據綁定的東西，而那些依賴注入、路由、Service等我並沒涉及，是因為我覺得前者是最重要的，能講明白這一點已經夠了。
本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。
本文地址 ：http://www.cnblogs.com/lovesong/p/4870006.html