Angularjs是一個前端的Javascript MVC 庫和框架，使前端得到更好的設計、維護和測試。它的核心特性有：MVC、雙向數據綁定、指令和語義化標簽、模塊化工具、依賴注入、HTML模板，以及對常用工具的封裝，例如$http、$cookies、$location等。本篇體驗Angularjs在MVC中的基本使用。
通過NuGet，輸入關鍵字Angularjs，安裝"Angular JS Core"。
把angular.js引入頁面：
<script src="~/Scripts/angular.js"></script>
ng-app指令
當Angular找到DOM中含有ng-app指令的元素時，才會進行初始化，並可以調用Angular的其它指令。
<html ng-app>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/controller.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div>
<h3>Angular Hello world</h3>
10+2={{10 + 2}}
</div>
</body>
</html>
使用"ng-model"指令進行數據雙向綁定
<div>
<input type="text" placeholder="輸入Name" ng-model="name"/>
{{name}}
</div>
通過ng-model=”name”，把input和頁面顯示實現了雙向綁定。
使用"ng-controller"指令,引入controller
在NuGet中輸入關鍵字bootstrap，安裝在MVC4下的bootstrap。
把bootstrap.cs引入視圖頁。
創建controller.js如下：
var MainController = function($scope) { var model = { Name: "My Books", Books: [ { Title: '陽光踩爛的日子', isComplete: false }, { Title: '那些年', isComplete: false }, { Title: '時間是用來浪費的', isComplete: true } ] }; $scope.readingList = model; };
把controller.js引入視圖頁。Home/Index.cshtml如下：
<html ng-app>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/controller.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div ng-controller="MainController">
<div>
<h2>{{readingList.Name}}的閱讀清單</h2>
</div>
<br/>
<div>
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>標題</th>
<th>是否完成閱讀</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="book in readingList.Books">
<td>{{book.Title}}</td>
<td>{{book.isComplete}}</td>
<td><input type="checkbox" ng-model="book.isComplete"/></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
運行：
當改變checkbox的勾選狀態，isComplete值也在true和false之間切換，這點體現了Angularjs的雙向綁定。
filter實現過濾功能
添加一個Input:
<div>
<input type="text" ng-model="titleFilter" placeholder="輸入關鍵字搜索"/>
</div>
以"|"的形式，給每行添加過濾器：
<tr ng-repeat="book in readingList.Books | filter:titleFilter">
運行，輸入關鍵字：
使用"ng-click"指令為DOM元素綁定事件
在controller.js中添加如下：
$scope.addBook = function() { model.Books.push({ Title: $scope.newTitle, isComplete: false }); $scope.newTitle = ''; };
在<div ng-controller="MainController">中添加如下：
<div>
<input type="text" ng-model="newTitle" placeholder="輸入新書名" required>
<input type="button" ng-click="addBook()" value="添加" class="btn" />
</div>
運行，添加數據：
選擇使用Angularjs還是Knockout?
Angular比Knockout承擔了更多的服務端工作，如果使用的框架是輕量級的，比如NodeJS,偏向使用Angular。
如果選擇的框架是ASP.NET，偏向使用Knockout。