AngularJS 是最近很火紅的一套 Framework
相較於 jQuery 直接操作 DOM 物件的作法，AngularJS 是直接透過 Directives 延伸 HTML 的能力
AngularJS 有幾個比較大的特性
- 雙向資料連結(Two Way Data-Binding)
- Module
- MVC
- Dependency Injection
- Directives
先說明一下 AngularJS 的 Dependency Injection 和 Directives。
DI(Dependency Injection) 的特性就是讓你的程式不要直接相依到實體，以 AngularJS 中可以很常遇到傳入 $http，$scope等物件，但傳入順序交換沒關係，主要是因為這些都是由 AngularJS 利用 DI 特性在執行時才會依照註冊的名字傳入實體物件。
而 Directives 則是宣告式語法，在 AngularJS 中透過宣告式語法來擴充 HTML 的功能
運作流程
Angular 運作步驟
1. 最一開始會先建立一個用來作 dependency injection 的 injector
2. injector 建立一個 root scope
3. Angular 從 ngApp root 開始走訪 DOM, 把每個遇到的 directives 都 bind value
基本範例
AngularJS 使用時必須在html tag內加入ng-app，另外parser的標籤符號為兩個大括號
<!DOCTYPE HTML>
<!-- html 加上 ng-app -->
<html ng-app>
<head>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
</head>
<body>
<div class="content">
Nothing here {{'yet' + '!'}}
{{5 + 2}}
</div>
</body>
</html>
雙向資料連結Two Way Data-Binding (Model)
在 AngularJS 中，可以透過Model 完成 Two Way Data-Binding 已達到兩個物件資料同步連結的效果，通常用在input、select、textarea
<!DOCTYPE HTML>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
</head>
<body>
<input ng-model="yourName" placeholder="Input Text">
<!-- -->
<p>Hello, {{ yourName || 'Guest' }}</p>
</body>
</html>
Filter
<!-- 數字 -->
{{ 9999 | number}}
<!-- 數字逗點 -->
{{9999 + 1 | number:2}}
<!-- 貨幣 -->
{{999 * 2 | currency}}
<!-- 大寫 -->
{{'Hello' | uppercase}}
<!-- 小寫 -->
{{'Hello' | lowercase}}
<!-- JSON -->
{{obj | json}}
ngBind directive
在上述例子中，如果直接顯示在HTML上，例如：
<div>
{{ 9999 + 1}}
</div>
在 AngularJS 尚未載入之前，會直接顯示{{ 9999 + 1}}，在使用者體驗上不是很好，因此可以透過ngBind解決這個問題
<!-- 預設會做HTML Escape --> <span ng-bind="9999 | number"></span> <span ng-bind="'<div>Hello</div>'"></span> <span ng-bind="'rrr'"></span>
Controller Scope
AngularJS 的 Controller 中，一個 Controller 要對應一個 Scope 來控制
<script>
function AlbumCtrl($scope) {
$scope.name = 'Johnson';
$scope.meta = [
{'upc':'000000001', 'description':'01 description'},
{'upc':'000000002', 'description':'02 description'},
{'upc':'000000003', 'description':'03 description'},
{'upc':'000000004', 'description':'04 description'},
{'upc':'000000005', 'description':'05 description'}
];
$scope.show = function() {
alert($scope.name);
};
}
</script>
<div ng-controller="AlbumCtrl">
<input ng-model="name">
<button ng-click="show()">Show Name</button>
<ul>
<!-- foreach -->
<li ng-repeat="album in meta">
<a href="#" data-upc="{{album.upc}}" ng-bind="album.description"></a>
</li>
</ul>
</div>
以上面程式為例，Scope 其實就是一個 application model ，主要用來控制Controller變數、函式等操作