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