來啟動服務(wù)器，啟動后命令行終端將會提示Http Server running at http://localhost:8000,請不要關(guān)閉該終端，關(guān)閉該終端即關(guān)閉了服務(wù)器。在瀏覽器中輸入http://localhost:8000/app/index.html來訪問我們的phonecat應(yīng)用。

現(xiàn)在，在瀏覽器中您應(yīng)該已經(jīng)看到了我們的初始應(yīng)用，很簡單，但說明我們的項目已經(jīng)可以運行了。

應(yīng)用中顯示的“Nothing here yet!”是由如下HTML代碼構(gòu)建而成，代碼中包含了AngularJS的關(guān)鍵元素，正是我們需要學習的。

app/index.html

    <!doctype html>
    <html lang="en" ng-app>
    <head>
        <meta charset="utf-8">
        <title>My HTML File</title>
        <link rel="stylesheet" href="css/app.css">
        <link rel="stylesheet" href="css/bootstrap.css">
        <script src="lib/angular/angular.js"></script>
    </head>
    <body>
    <p>Nothing here {{'yet' + '!'}}</p>
    </body>
    </html>

代碼在做什么呢？

ng-app指令：

    <html lang="en" ng-app>

ng-app指令標記了AngularJS腳本的作用域，在<html>中添加ng-app屬性即說明整個<html>都是AngularJS腳本作用域。開發(fā)者也可以在局部使用ng-app指令，如<div ng-app>，則AngularJS腳本僅在該<div>中運行。

AngularJS腳本標簽：

    <script src="lib/angular/angular.js"></script>

這行代碼載入angular.js腳本，當瀏覽器將整個HTML頁面載入完畢后將會執(zhí)行該angular.js腳本，angular.js腳本運行后將會尋找含有ng-app指令的HTML標簽，該標簽即定義了AngularJS應(yīng)用的作用域。

雙大括號綁定的表達式：

    <p>Nothing here {{'yet' + '!'}}</p>

這行代碼演示了AngularJS模板的核心功能——綁定，這個綁定由雙大括號{{}}和表達式'yet' + '!'組成。

這個綁定告訴AngularJS需要運算其中的表達式并將結(jié)果插入DOM中，接下來的步驟我們將看到，DOM可以隨著表達式運算結(jié)果的改變而實時更新。

AngularJS表達式表達式是一種類似于JavaScript的代碼片段，AngularJS表達式僅在AngularJS的作用域中運行，而不是在整個DOM中運行。

引導AngularJS應(yīng)用

通過ngApp指令來自動引導AngularJS應(yīng)用是一種簡潔的方式，適合大多數(shù)情況。在高級開發(fā)中，例如使用腳本裝載應(yīng)用，您也可以使用bootstrap手動引導AngularJS應(yīng)用。

AngularJS應(yīng)用引導過程有3個重要點：

注入器將用于創(chuàng)建此應(yīng)用程序的依賴注入(dependency injection)；
注入器將會創(chuàng)建根作用域作為我們應(yīng)用模型的范圍；
AngularJS將會鏈接根作用域中的DOM，從用ngApp標記的HTML標簽開始，逐步處理DOM中指令和綁定。

一旦AngularJS應(yīng)用引導完畢，它將繼續(xù)偵聽瀏覽器的HTML觸發(fā)事件，如鼠標點擊事件、按鍵事件、HTTP傳入響應(yīng)等改變DOM模型的事件。這類事件一旦發(fā)生，AngularJS將會自動檢測變化，并作出相應(yīng)的處理及更新。

上面這個應(yīng)用的結(jié)構(gòu)非常簡單。該模板包僅含一個指令和一個靜態(tài)綁定，其中的模型也是空的。下一步我們嘗試稍復雜的應(yīng)用！

http://wiki.jikexueyuan.com/project/angularjs-tutorial/images/bootstrapping-1.png" alt="Image of bootstrapping-1.png" />

我工作目錄中這些文件是干什么的？

上面的應(yīng)用來自于AngularJS種子項目，我們通?？梢允褂?a rel="nofollow" >AngularJS種子項目來創(chuàng)建新項目。種子項目包括最新的AngularJS代碼庫、測試庫、腳本和一個簡單的應(yīng)用程序示例，它包含了開發(fā)一個典型的web應(yīng)用程序所需的基本配置。

對于本教程，我們對AngularJS種子項目進行了下列更改：

刪除示例應(yīng)用程序；
添加手機圖像到app/img/phones/；
添加手機數(shù)據(jù)文件(JSON)到app/phones/；
添加Bootstrap文件到app/css/ 和app/img/。

練習

試試把關(guān)于數(shù)學運算的新表達式添加到index.html：

    <p>1 + 2 = {{ 1 + 2 }}</p>

總結(jié)

現(xiàn)在讓我們轉(zhuǎn)到靜態(tài)模版，將一些內(nèi)容添加到web應(yīng)用程序。

下一篇：連接與圖片模版- Templating Links Images

引導程序 - Bootstrapping

代碼在做什么呢？

引導AngularJS應(yīng)用

我工作目錄中這些文件是干什么的？

練習

總結(jié)

代碼在做什么呢？

我工作目錄中這些文件是干什么的？