angular是一個新興的JS架構，和以往的架構不同的事，Angularjs更注重于js的模組化，管理，同時也提供大量的元件幫助使用者組建商業化程式，是一種值得研究的JS架構。
Angularjs使我們可以使用MVC的模式來寫JS。Angularjs現在由谷歌來維護。
這裡我們來簡單的探讨一下它的應用。
首先使用Angularjs我們必須引入他的JS檔案。
<script src="../angular.min.js"></script>
這個檔案我上傳到了附件中了。
Angular的主要部分包括：
ng-app ：AngularJS程式入口，對該标簽内的元素進行初始化。
ng-controller ：在目前元素範圍内綁定指定的控制器(controller)。
ng-model ：指定目前元素與資料模型（$scope）中的屬性綁定，如果資料模型中沒有此屬性，會自動建立一個。
ng-repeat：循環$scope中的屬性，類似于{{#each beans}}
{{xxx}}：花括号表示讀取某一屬性值
filter、orderBy ：過濾器。filter可以根據指定的屬性過濾資料(例子裡是quer屬性)。orderBy是排序過濾器。這兩個過濾器都是内置的。過濾器是可自定義的。 我們來看一下例子：
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<script src="../angular.min.js"></script>
<script>
var StudentListCtrl = ['$scope', '$http',
function($scope, $http) {
$http.get('json/students.json')
.success(function(data) {
$scope.students = data;
});
$scope.sortType = 'age';
}
];
</script>
</head>
<body ng-app ng-controller="StudentListCtrl">
<input ng-model="quer"/>
<select ng-model="sortType">
<option value="name">
按名字排序</option>
<option value="id">
按學号排序</option>
</select>
<ul>
<li ng-repeat="student in students
| filter:quer | orderBy:sortType">
{{student.name}}
<p>{{student.sex}}</p>
<p>{{student.age}}</p>
<p>
<img ng-src="{{student.img}}"/>
</p>
</li>
</ul>
</body>
</html>
其中students.json的内容為：
[
{
"age": 13,
"id": "0001",
"name": "陳大蝦",
"sex": "男",
"img":"im"
},
{
"age": 14,
"id": "0002",
"name": "陳大鍋",
"sex": "男"
},
{
"age": 15,
"id": "0003",
"name": "鄧小嬌",
"sex": "女"
}
] 顯示的結果為：
-
陳大蝦
男
13
-
陳大鍋
男
14
-
鄧小嬌
女
15
在這個例子裡面，我們改變下拉框的内容，則清單顯示的結果會有變化，這就是Angular的友善之處，我們隻需要檔案，模組化的内容，而動态内容的js實作已經不需要我們來實作了。
關于在Angular設定類名：
1. 直接使用 class="{{className}}"
2. 使用ng-class="{true:'selected'}[selected]"
![Javascript建構Bingo卡片遊戲[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)