每當看到前端程序員在腳本、樣式、表單處理邏輯中苦苦掙扎的時候，我就在想，為什么不用Angular Js 呢？
Angular Js 支持頁面前端的 MVC 模式開發，在 Angular JS 的支持下，我們可以將頁面前端處理的數據與頁面展示進行分離，實現優雅的代碼結構。
首先，我們需要到 AngularJs 的官網下載這個腳本庫。
不過，這個網站經常被封，你也可以直接在這里下載: http://files.cnblogs.com/haogj/AngularJs-1.3.10.zip
1. 在頁面引用 AngularJs 腳本
AngularJs 是一個獨立的腳本庫，許多人詢問是否還需要 jQuery，答案是不需要。你只需要在頁面引用 AngularJs 的腳本文件就可以了，甚至，AngularJs 還實現了一個精簡版的 jQuery。不過它也可以和 jQuery 一起使用。
在 ASP.NET MVC 的頁面視圖中，可以直接引用，也可以通過 @section 將腳本放置到布局 Layout 的 scripts 節中。
@section scripts {
<script src="~/Scripts/angular-1.3.10.min.js"></script>
<script>
</script>
}
2. 創建 WebApp 和控制器
在 AngularJs 中，每個頁面被看作一個獨立的 WebApp，每個 WebApp 中可以包括多個獨立的處理部分，我們稱為 Controller，每個 Controller 有自己獨立的處理上下文和邏輯。
AngularJs 通過指令 ng-app 來划定這個 WebApp 的作用域，通常可以將這個 ng-app 直接寫在 html 標記之上，也可以寫在一個元素之上，我們這里寫在這個視圖中的 div 標記之上。
ng-controller 用來划定 WebApp 中的控制器的作用域，通常，我們會給它起一個名字。
<div ng-app="myApp">
<div ng-controller="myController">
</div>
</div>
下面，在腳本中創建我們的 WebApp 和控制器。
1 <script src="~/Scripts/angular-1.2.14.min.js"></script> 2 <script> 3 var app = angular.module("myApp", []); 4 5 app.controller("myController", function ($scope, $http) { 6 $scope.message = "Hello, Angular JS."; 7 }); 8 </script>
上面的第三行創建 WebApp，注意第一個參數是應用的名稱，需要與頁面指令中的 WebApp 名稱匹配，第二個參數數組是必須的。
第五行創建了應用中的控制器，特別需要注意的是控制器的匿名函數參數，這兩個參數的名稱不可以修改，在 AngularJs 中，參數的名稱用來進行依賴注入。
第一個參數 $scope 就是這個控制器的上下文對象，通過它我們將模型，視圖，和處理邏輯粘合在一起。
3. 創建視圖
在 AngularJs 中，視圖是通過標准的 HTML 實現的。
注意，我們上面代碼的第 6 行，我們在上下文對象上保存了一個 message ，這就是我們的模型，我們希望這個模型中的數據，可以在頁面展示出來。
在 Controller 的元素內部，創建一個新的 div 來容納我們的內容，我們准備使用 h2 標記將這個 message 的內容顯示出來。
視圖怎樣與我們的模型綁定在一起呢？各種模板都有自己的綁定語法，AngularJs 的方式是 {{ }}。其中可以寫一個表達式。
<div ng-app="myApp">
<div ng-controller="myController">
<div>
<h2>{{message}}</h2>
</div>
</div>
</div>
現在運行一下程序，你應該已經在頁面看到輸出結果了。
4. 實現模型和視圖的雙向綁定
如果我們需要編輯這個 message 呢？編輯之后如何獲取編輯之后的內容呢？angularjs 支持雙向綁定，也就是說既可以從我們的模型獲取數據，如果數據被編輯了，編輯之后的內容也通過可以被 angularjs 同步到模型上。
雙向綁定實際上是 angularjs 內部支持的，我們並不需要特別的編碼。在這里我們添加一個編輯框來支持編輯。
<div ng-app="myApp">
<div ng-controller="myController">
<div>
<h2>{{message}}</h2>
<input type="text" ng-model="message" />
</div>
</div>
</div>
注意 input 元素的 ng-model 屬性，它表示我們需要雙向綁定 message 到這個編輯元素上。
重新運行程序，你看到 message 的內容也同步出現在編輯框中，如果你修改編輯框中的內容，標題中的內容也將會同步變化。你的編輯結果已經同步到了模型上。
總結
angularJs 是一個比較重的腳本庫，雖然內部高度復雜，注意關鍵的使用細節，使用起來其實非常簡單。