Angular JS

一 angular.js 和之前的js 框架有的區別:
    1 傳統的前端開發思惟：
       以jquery 爲例，它是以dom 爲中心的，是dom 元素的操做，更多的是關注dom 的變化和用戶的操做。
    2 新一代的前端開發思惟
       以angular.js 爲例，它是以data 爲中心的，關心的是數據的變化。
   好比若是要實現一個三級聯動的下拉框：

jquery 的實現是：

1 分別監聽省市縣的下拉框的change 事件。
2 在事件中，根據當前的值來實現下級的聯動。
3 查詢符合上級的下級數據。
4 如此循環 更新下級的下級。
代碼量估計得有一百行左右吧。

angular.js 的實現是：

1 定義上級的數據源和model。
2 定義下級的數據源的model。
3 定義下下級的數據源和model。
4 在$watch 中更新model 便可。

代碼量 十行搞定。

再好比要實現一個表格（分頁，排序，過濾，編輯）：

jquery 的實現思路 ：

1 獲取數值。
2 根據返回的值，來進行dom 的操做。
3 動態生成一些控件，而後綁定控件的事件。
4 在事件裏面再進行dom 的操做以及數據的交互。
這個代碼量應該也很多。

angular.js 實現思路：

1 ngRepeat渲染
2 filter過濾器過濾
3 orderBy排序
4 paging分頁

代碼量幾十行左右。

若是寫慣了jquery 代碼的話再寫angualr.js 的話會有一點不適應。可是熟悉以後會感受很是的爽。angular.js 除了Directive以外其餘地方絕對不能使用dom 操做，切記。

二 理解angular.js 框架

如圖所示爲 angular.js 啓動過程：

1 瀏覽器載入HTML，解析成DOM。
2 加載Angular類庫。
3 DOMContentLoaded事件中開始bootstrap。
4 尋找 ng-app， 注入服務。
5 編譯DOM並連接到對於的scope數據。

angular.js 執行過程：

1 瀏覽器等待用戶事件觸發（用戶交互，定時器，網絡事件）。
2 瀏覽器執行事件回調，進入Javascript上下文。
3 Angular在$apply中接管了JS的執行部分。
4 Angular進入$digest循環。
5 Angular進行髒數據檢查。
6 批量更新DOM，$digest結束。
7 瀏覽器開始渲染。

以以下代碼爲例 ：

 1 <div ng-app="mymodule">
 2     <div ng-controller="mycontroller">
 3         <input ng-model="name"/>
 4         <p>{{name}}</p>
 5     </div>
 6 </div>
 7 
 8 <script src="~/Scripts/angular.min.js"></script>
 9 <script type="text/javascript">
10 
11     var mymodule = angular.module('mymodule', []);
12 
13     mymodule.controller('mycontroller', function ($scope) {
14 
15         $scope.name = "hello angular";
16 
17     });
18 
19 </script>

編譯期
1 解析ng-model併爲input綁定key事件。
2 爲{{name}}創建$watch表達式，進行監聽。

執行期1 用戶在input輸入按鍵，觸發了瀏覽器的key事件。2 事件回調， 進入Javascript上下文。3 angular接管，在$apply中修改scope的name取值。4 觸發$digest流程。5 髒數據檢測，發現$watch列表中的name值變動。6 通知對應的處理函數， 更新DOM。7 Angular退出執行上下文，退出Javascript的事件處理函數。