我們現(xiàn)在開始準(zhǔn)備編寫AngularJS應(yīng)用——phonecat。這一步驟(步驟0),您將會熟悉重要的源代碼文件,學(xué)習(xí)啟動包含AngularJS種子項(xiàng)目的開發(fā)環(huán)境,并在瀏覽器端運(yùn)行應(yīng)用。
1. 進(jìn)入angular-phonecat目錄,運(yùn)行如下命令:
~~~
git checkout -f step-0
~~~
該命令將重置phonecat項(xiàng)目的工作目錄,建議您在每一學(xué)習(xí)步驟運(yùn)行此命令,將命令中的數(shù)字改成您學(xué)習(xí)步驟對應(yīng)的數(shù)字,該命令將清除您在工作目錄內(nèi)做的任何更改。
2. 運(yùn)行以下命令:
~~~
node scripts/web-server.js
~~~
來啟動服務(wù)器,啟動后命令行終端將會提示`Http Server running at http://localhost:8000`,請不要關(guān)閉該終端,關(guān)閉該終端即關(guān)閉了服務(wù)器。在瀏覽器中輸入[http://localhost:8000/app/index.html](http://localhost:8000/app/index.html)來訪問我們的phonecat應(yīng)用。
現(xiàn)在,在瀏覽器中您應(yīng)該已經(jīng)看到了我們的初始應(yīng)用,很簡單,但說明我們的項(xiàng)目已經(jīng)可以運(yùn)行了。
應(yīng)用中顯示的“Nothing here yet!”是由如下HTML代碼構(gòu)建而成,代碼中包含了AngularJS的關(guān)鍵元素,正是我們需要學(xué)習(xí)的。
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`指令標(biāo)記了AngularJS腳本的作用域,在``中添加`ng-app`屬性即說明整個``都是AngularJS腳本作用域。開發(fā)者也可以在局部使用`ng-app`指令,如``,則AngularJS腳本僅在該``中運(yùn)行。
### AngularJS腳本標(biāo)簽:
~~~
<script src="lib/angular/angular.js"></script>
~~~
這行代碼載入angular.js腳本,當(dāng)瀏覽器將整個HTML頁面載入完畢后將會執(zhí)行該angular.js腳本,angular.js腳本運(yùn)行后將會尋找含有`ng-app`指令的HTML標(biāo)簽,該標(biāo)簽即定義了AngularJS應(yīng)用的作用域。
### 雙大括號綁定的表達(dá)式:
~~~
<p>Nothing here {{'yet' + '!'}}</p>
~~~
這行代碼演示了AngularJS模板的核心功能——綁定,這個綁定由雙大括號`{{}}`和表達(dá)式`'yet' + '!'`組成。
這個綁定告訴AngularJS需要運(yùn)算其中的表達(dá)式并將結(jié)果插入DOM中,接下來的步驟我們將看到,DOM可以隨著表達(dá)式運(yùn)算結(jié)果的改變而實(shí)時更新。
AngularJS表達(dá)式[Angular expression](http://angularjs.cn/A00s)是一種類似于JavaScript的代碼片段,AngularJS表達(dá)式僅在AngularJS的作用域中運(yùn)行,而不是在整個DOM中運(yùn)行。
## 引導(dǎo)AngularJS應(yīng)用
通過ngApp指令來自動引導(dǎo)AngularJS應(yīng)用是一種簡潔的方式,適合大多數(shù)情況。在高級開發(fā)中,例如使用腳本裝載應(yīng)用,您也可以使用[bootstrap](http://angularjs.cn/A00o)手動引導(dǎo)AngularJS應(yīng)用。
AngularJS應(yīng)用引導(dǎo)過程有3個重要點(diǎn):
1. [注入器(injector)](http://docs.angularjs.org/api/AUTO.$injector)將用于創(chuàng)建此應(yīng)用程序的依賴注入(dependency injection);
2. 注入器將會創(chuàng)建[根作用域](http://angularjs.cn/$rootScope)作為我們應(yīng)用模型的范圍;
3. AngularJS將會鏈接根作用域中的DOM,從用ngApp標(biāo)記的HTML標(biāo)簽開始,逐步處理DOM中指令和綁定。
一旦AngularJS應(yīng)用引導(dǎo)完畢,它將繼續(xù)偵聽瀏覽器的HTML觸發(fā)事件,如鼠標(biāo)點(diǎn)擊事件、按鍵事件、HTTP傳入響應(yīng)等改變DOM模型的事件。這類事件一旦發(fā)生,AngularJS將會自動檢測變化,并作出相應(yīng)的處理及更新。
上面這個應(yīng)用的結(jié)構(gòu)非常簡單。該模板包僅含一個指令和一個靜態(tài)綁定,其中的模型也是空的。下一步我們嘗試稍復(fù)雜的應(yīng)用!
## 我工作目錄中這些文件是干什么的?
上面的應(yīng)用來自于AngularJS種子項(xiàng)目,我們通??梢允褂肹AngularJS種子項(xiàng)目](https://github.com/angular/angular-seed)來創(chuàng)建新項(xiàng)目。種子項(xiàng)目包括最新的AngularJS代碼庫、測試庫、腳本和一個簡單的應(yīng)用程序示例,它包含了開發(fā)一個典型的web應(yīng)用程序所需的基本配置。
對于本教程,我們對AngularJS種子項(xiàng)目進(jìn)行了下列更改:
1. 刪除示例應(yīng)用程序;
2. 添加手機(jī)圖像到app/img/phones/;
3. 添加手機(jī)數(shù)據(jù)文件(JSON)到app/phones/;
4. 添加[Twitter Bootstrap](http://twitter.github.com/bootstrap/)文件到app/css/ 和app/img/。
## 練習(xí)
試試把關(guān)于數(shù)學(xué)運(yùn)算的新表達(dá)式添加到index.html:
~~~
<p>1 + 2 = {{ 1 + 2 }}</p>
~~~
## 總結(jié)
現(xiàn)在讓我們轉(zhuǎn)到[步驟1](a004),將一些內(nèi)容添加到web應(yīng)用程序。
