AngularJS 1.x系列：AngularJS簡介及第一個應用（2）

libingql發表於2017-05-29
AngularJS

1. 安裝AngularJS

1.1 AngularJS官網

　　Github原始碼：https://github.com/angular/angular.js

　　官網：https://angularjs.org/

1.2 npm安裝AngularJS

npm install angular

2. AngularJS應用的構成元素

　　◊ 模型（Model）：AngularJS應用中用於展示到頁面的資料，本質是一個JavaScript物件。

　　◊ 檢視（View）：View是使用者所看到的網頁內容，View是AngularJS指令與表示式經過解析後的DOM元素。

　　◊ 控制器（Controller）：AngularJS中用於處理業務邏輯的JavaScript方法。

　　◊ 作用域（Scope）：作用域可以理解為一個容器，在控制器（Controller）中可以訪問這個容器（Scope），往容器中放入資料模型，在檢視（View）中可以通過表示式將資料展現給使用者。

　　◊ 指令（Directives）：擴充套件的HTML屬性或標籤，能夠被AngularJS框架識別，根據不同的指令執行相應的動作。

　　◊ 表示式（Expressions）：用於向頁面輸出資訊。

　　◊ 模板（Template）：AngularJS以HTML作為模板語言，AngularJS模板時間是HTML片段。

3. AngularJS第一個應用

　　示例：

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf-8" />
        <script src="../lib/angular.min.js"></script>
    </head>
    <body>
        {{"Hello AngularJS!"}}
    </body>
</html>

　　說明：<html>標籤中ng-app是AngularJS的一個內建指令，可以出現在任意位置。

　　ng-app兩個作用：

　　(1). 啟動AngularJS框架；

　　(2). AngularJS框架管理ng-app指令所在標籤的開始標籤到結束標籤之間的所有DOM元素。

　　{{}}：是AngularJS的表示式形式，由兩個巢狀的大括號構成，大括號中間為表示式內容。AngularJS會對錶達式內容進行解析，將表示式內容輸出到瀏覽器。

4. AngularJS表示式

　　AngularJS使用表示式把資料繫結到HTML。

4.1 表示式定義方式

　　AngularJS 表示式寫在雙大括號內：{{ expression }}。 

4.2 表示式中的四則運算

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf-8" />
        <script src="../lib/angular.min.js"></script>
    </head>
    <body>
          四則運算：5 + 5 = {{ 5 + 5 }}
    </body>
</html>

4.3 表示式中的邏輯運算

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf-8" />
        <script src="../lib/angular.min.js"></script>
    </head>
    <body>
          邏輯運算：true && false = {{ true && false }}
    </body>
</html>

4.4 表示式與作用域

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf-8" />
        <script src="../lib/angular.min.js"></script>
    </head>
    <body>
        <div ng-init="points=[1,15,19,2,40]"> 
            <p>第三個值為 {{ points[2] }}</p> 
        </div>
    </body>
</html>

　　ng-init指令：用於初始化作用域。

5. AngularJS資料繫結

　　資料繫結是AngularJS框架在檢視（View）與作用域（Scope）之間建立的資料同步機制。

5.1 雙向繫結ng-model

　　AngularJS雙向繫結：View的操作能實時同步到Scope中，Scope中的資料修改能夠實時回顯到View中。

　　ng-model 指令：用於繫結應用程式資料到 HTML 控制器(input, select, textarea)的值。

　　ng-model 指令可以將輸入域的值與 AngularJS 建立的變數繫結。

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <script src="../lib/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("app", []);
            app.controller("HelloCtrl", function($scope) {
                $scope.text = "Hello AngularJS!";
            });
        </script>
    </head>
    <body>
        <div ng-controller="HelloCtrl">
            <input type="text" ng-model="text" /></div>
    </body>
</html>
<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf-8" />
        <script src="../lib/angular.min.js"></script>
    </head>
    <body>
        <input type="text" ng-model="name" />
        {{ name }}
    </body>
</html>

　　注：上例中ng-app指令用於啟動AngularJS應用。當AngularJS遇到ng-app指令時，會建立$rootScope作用域，為AngularJS的根作用域。

　　把ng-model制定作為屬性新增到input標籤中，AngularJS會在$rootScope作用域中新增屬性。

　　當input表單中輸入內容發生變化時，AngularJS會自動把輸入的內容同步到作用域的屬性中。

　　{{ name }}為AngularJS表示式形式，可以訪問AngularJS作用域中的屬性。AngularJS能夠監控作用域中資料的變化，當資料發生變化時，頁面實時更新顯示內容。

5.2 單向繫結ng-bind

　　ng-bind指令：實現作用域（Scope）到檢視（View）的單向資料繫結，和表示式功能類似。

<div>{{ text }}</div>
<div ng-bind="text"></div>

　　ng-bind與{{ expression }}區別：

　　在使用AngularJS表示式{{ expression }}時，如果遇到網路問題，會導致AngularJS載入緩慢，瀏覽器會直接把AngularJS表示式當作字串渲染到頁面中。

　　ng-bind指令在AngularJS沒有載入完畢時不會解析執行，只有AngularJS載入完畢才會解析顯示。

　　推薦使用ng-bind指令。

相關文章