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變數、函式等操作

Categories: AngularJS