我們現在開始準備編寫AngularJS應用——phonecat。這一步驟（步驟0），您將會熟悉重要的原始碼檔案，學習啟動包含AngularJS種子項目的開發環境，並在瀏覽器端運行應用。
進入angular-phonecat目錄，運行如下命令：
git checkout -f step-0
該命令將重設phonecat項目的工作目錄，建議您在每一學習步驟運行此命令，將命令中的數字改成您學習步驟對應的數字，該命令將清除您在工作目錄內做的任何更改。
運行以下命令：
node scripts/web-server.js
來啟動伺服器，啟動後命令列終端將會提示Http Server running at http://localhost:8000,請不要關閉該終端，關閉該終端即關閉了伺服器。在瀏覽器中輸入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指令碼的範圍，在<html>中添加ng-app屬性即說明整個<html>都是AngularJS指令碼範圍。開發人員也可以在局部使用ng-app指令，如<div ng-app>，則AngularJS指令碼僅在該<div>中運行。
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是一種類似於JavaScript的程式碼片段，AngularJS運算式僅在AngularJS的範圍中運行，而不是在整個DOM中運行。
引導AngularJS應用
通過ngApp指令來自動引導AngularJS應用是一種簡潔的方式，適合大多數情況。在進階開發中，例如使用指令碼裝載應用，您也可以使用bootstrap手動引導AngularJS應用。
AngularJS應用引導過程有3個重要點：
1.注入器(injector)將用於建立此應用程式的依賴注入(dependency injection)；
2.注入器將會建立根範圍作為我們應用程式模型的範圍；
3.AngularJS將會連結根範圍中的DOM，從用ngApp標記的HTML標籤開始，逐步處理DOM中指令和綁定。
一旦AngularJS應用引導完畢，它將繼續偵聽瀏覽器的HTML觸發事件，如滑鼠點擊事件、按鍵事件、HTTP傳入響應等改變DOM模型的事件。這類事件一旦發生，AngularJS將會自動檢測變化，並作出相應的處理及更新。
上面這個應用的結構非常簡單。該模板包僅含一個指令和一個靜態繫結，其中的模型也是空的。下一步我們嘗試稍複雜的應用！
我工作目錄中這些檔案是幹什麼的？
上面的應用來自於AngularJS種子項目，我們通常可以使用AngularJS種子項目來建立新項目。種子項目包括最新的AngularJS程式碼程式庫、測試庫、指令碼和一個簡單的應用程式樣本，它包含了開發一個典型的web應用程式所需的基本配置。
對於本教程，我們對AngularJS種子項目進行了下列更改：
刪除應用程式範例；
練習
試試把關於數學運算的新運算式添加到index.html：
<p>1 + 2 = {{ 1 + 2 }}</p>
總結
現在讓我們轉到步驟1，將一些內容添加到web應用程式。
以上就是對AngularJS 引導程式的資料整理，後續繼續補充相關資料，謝謝大家對本站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
