什么捕鱼软件可以充钱玩

書名： AngularJS入門與進階
作者名：江榮波
本章字數： 1361字
更新時間： 2020-11-28 23:44:28

1.4 AngularJS應用剖析

1.4.1 第一個AngularJS應用解惑

在1.3節中，我們一起完成了第一個AngularJS應用，并看到了運行效果，從未接觸過AngularJS的讀者可能會產生以下幾個疑問：

● <html>標簽中的ng-app屬性是什么？

● {{}}嵌套的兩個大括號又是什么？

● 為什么頁面顯示的內容變成了“Hello World! ”和“Hello AngularJS! ”？

下面將對這些問題進行解答。

ng-app是AngularJS的一個內置指令，可以出現在任意位置，并有兩個作用，一個是啟動AngularJS框架，另一個是告訴AngularJS框架從ng-app指令所在標簽的開始標簽到結束標簽之間的所有DOM元素由AnguarJS框架進行管理。

為了證明上面的結論，我們可以把ng-app的位置放到第一個<div>標簽中，完整代碼如下：

代碼清單：ch01\ch01_04.html

        <!doctype html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>ch01_04</title>
            <script type="text/javascript" src="../angular-1.5.5/angular.js">
            </script>
        </head>
        <body>
            <div ng-app>{{"Hello World! "}}</div>
            <div>{{"Hello AngularJS! "}}</div>
        </body>
        </html>

接下來在瀏覽器中預覽ch01_04.html頁面，如圖1.8所示。頁面輸出內容發生了變化。

圖1.8 ng-app指令作用說明案例

這是因為ng-app出現在第一個<div>標簽中，只有第一個<div>開始標簽到結束標簽之間的DOM元素由AngularJS框架進行管理，所以第二個<div>中的兩個嵌套大括號原樣輸出。通常情況下，我們會把ng-app指令放在<html>標簽中，讓AngularJS管理整個頁面。

{{}}是AngularJS的表達式形式，由兩個嵌套的大括號構成，大括號中間為表達式內容，AngularJS會對表達式內容進行解析，然后將表達式結果輸出到瀏覽器。在上面的例子中，表達式內容為字符串字面量，AngularJS會將該字面量輸出到頁面。

1.4.2 AngularJS應用構成元素

在第一個AngularJS例子中，我們已經接觸到構成AngularJS應用的一些元素，例如指令、表達式。除此之外，構成AngularJS應用的元素還有很多，一些重要的概念將會在后面用到，這里我們需要先了解一下。

● 模型（Model）:AngularJS程序中用于展示到頁面的數據，本質是一個JavaScript對象。

● 視圖（VIew）：從用戶的角度來看，視圖就是用戶所看到的網頁內容；從AngularJS應用的角度來說，視圖則是AngularJS指令與表達式經過解析后的DOM元素。

● 控制器（Controller）:AngularJS應用中用于處理業務邏輯的JavaScript方法。

● 作用域（Scope）：可以把作用域理解為一個容器，在控制器中可以訪問這個容器，然后往容器中放入一些模型數據，在視圖中就可以通過表達式將數據展現給用戶。

● 指令（Directives）：擴展的HTML屬性或標簽，能夠被AngularJS框架識別，根據不同的指令執行相應的動作。例如，前面提到的ng-app指令，作為html元素的擴展屬性，能夠被AngularJS框架識別，從而啟動AngularJS框架。

● 表達式（Expressions）：用于向頁面輸出信息，在前面已經接觸過，下節將會對表達式做更詳細的介紹。

● 模板（Template）:AngularJS以HTML作為模板語言，AngularJS模板實際上就是HTML片段。

1.4.3 AngularJS表達式

表達式是AngularJS應用中，最基本也最常用的概念，本小節就對AngularJS表達式做一個詳細的介紹。

1．表達式的定義方式

        {{expression}}

AngularJS框架遇到嵌套的兩層大括號時會把嵌套大括號中的內容作為表達式處理。

2．表達式中的四則運算

AngularJS表達式支持加減乘除四則運算及字符串拼接運算，例如：

代碼清單：ch01\ch01_05.html

    <!doctype html>
    <html ng-app>
    <head>
        <meta charset="UTF-8">
        <title>ch01_05</title>
        <script type="text/javascript" src="../angular-1.5.5/angular.js">
        </script>
    </head>
    <body>
        <div>1 + 2 = {{1 + 2}}</div>
        <div>5-3 = {{5-3}}</div>
        <div>5 * 3 = {{5 * 3}}</div>
        <div>10 / 2 = {{10 / 2}}</div>
        <div>"hello"+"world" = {{"hello" + "world"}}</div>
    </body>
    </html>

在瀏覽器中的預覽效果如下：

    1 + 2 = 3
    5-3 = 2
    5 * 3 = 15
    10 / 2 = 5
    "hello"+"world" = helloworld

3．表達式中的邏輯運算

AngularJS表達式除了支持算術運算外，還支持邏輯運算，例如：

代碼清單：ch01\ch01_06.html

    <!doctype html>
    <html ng-app>
    <head>
        <meta charset="UTF-8">
        <title>ch01_06</title>
        <script type="text/javascript" src="../angular-1.5.5/angular.js">
        </script>
    </head>
    <body>
        <div>1 || 0 = {{1 || 0}}</div>
        <div>true && false = {{true && false}}</div>
    </body>
    </html>

AngularJS表達式的邏輯運算結果和JavaScript相同，頁面輸出如下：

        1 || 0 = 1
        true && false = false

4．表達式與作用域

AngularJS表達式可以訪問作用域中的數據，把數據輸出到HTML頁面，例如：

代碼清單：ch01\ch01_07.html

        <!doctype html>
        <html ng-app>
        <head>
            <meta charset="UTF-8">
            <title>ch01_07</title>
            <script type="text/javascript" src="../angular-1.5.5/angular.js">
            </script>
        </head>
        <body ng-init="person={'name':'jane'}; arr=['angularjs', 'jquery', 'dojo']">
            <div >{{person.name}}</div>
            <div >{{arr[0]}}</div>
        </body>
        </html>

在本例中，我們又接觸了一個新指令ng-init。該指令用于初始化作用域，在上面的代碼中，我們通過ng-init指令向作用域中增加一個person對象和arr數組，然后通過表達式輸出person對象的name屬性和arr數組的第一個元素。

接下來可以在瀏覽器中運行ch01_07.html頁面，輸出內容如下：

        jane
        angularjs

官术网_书友最值得收藏!

AngularJS入門與進階

1.4 AngularJS應用剖析

1.4.1 第一個AngularJS應用解惑

1.4.2 AngularJS應用構成元素

1.4.3 AngularJS表達式