步驟1——靜態(tài)模板
這里將舉例展示Angular是如何增強標準HTML的。你將創(chuàng)建一個純粹的靜態(tài)HTML頁面，下面的步驟你會看到我們如何把HTML代碼轉為Angular模板，通過數(shù)據(jù)來動態(tài)顯示出相同的結果。
在這一步中，我們將添加兩部手機的基本信息到一個HTML頁面中。 頁面現(xiàn)在顯示了兩個手機的一個列表信息
工作區(qū)切換到步驟1
git checkout -f step-1
此時的app/index.html:
這里我們展示完整的html
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="app.css" />
<script src="bower_components/angular/angular.js"></script>
</head>
<body>
<ul>
<li>
<span>Nexus S</span>
<p>
Fast just got faster with Nexus S.
</p>
</li>
<li>
<span>Motorola XOOM? with Wi-Fi</span>
<p>
The Next, Next Generation tablet.
</p>
</li>
</ul>
</body>
</html>
步驟2——Angular模板
現(xiàn)在我們讓利用AngularJS讓頁面動態(tài)化。我們還將添加一些測試，這將檢驗我們添加的控制器代碼會執(zhí)行預期的工作。
其實有很多方法來構建應用程序，在Angular中，我們推薦采用Model-View-Controller（MVC——模型-視圖-控制器）的設計模式來解耦代碼與單獨的問題。利用這點，我們在model、view和controller中用到盡量少的Angular和Javascript。
程序將展示利用數(shù)據(jù)動態(tài)的列出3部手機列表。
工作區(qū)切換到步驟2
git checkout -f step-2
這里需要擴展一下視圖（view）和模板（template）
在Angular中，視圖是數(shù)據(jù)模型通過HTML模板的投影，這意味著任何數(shù)據(jù)模型的變化，Angular都會針對綁定點刷新視圖。
現(xiàn)在我們再看一下，步驟2中的index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="app.css" />
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="PhoneListController">
<ul>
<li ng-repeat="phone in phones">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</html>
這里我們用ngRepeat指令和兩個Angular表達式(expression)取代了硬編碼的電話列表:
- li的ng-repeat="phone in phones"屬性就是一個Angular重復指令，它告訴angular在列表中為每個電話信息重復創(chuàng)建li元素，這里的li標簽就作為了模板。
![Uploading tutorial_02_000240.png . . .] - 在雙大括號中的表達式{{phone.name}}和{{phone.snippet}}會用實際的值替代。
這里，我們還添加了新的指令，叫做ng-controller，它為<body>標簽指定了一個PhoneListCtrl的控制器，對于這點
- 在雙大括號中的表達式{{phone.name}}和{{phone.snippet}}指定的綁定，將參考我們程序中的數(shù)據(jù)模型，這些都是在我們的PhoneListCtrl的控制器進行設置的。
注意：我們已經(jīng)通過加載使用ng-app="phonecatApp"來指定了一個Angular數(shù)據(jù)模型，這里phonecatApp是我們數(shù)據(jù)模型的名字，這個模型被包含在PhoneListCtrl中。
這里我們也需要擴展一下數(shù)據(jù)模型（Model）和控制器（Controller）
這里的數(shù)據(jù)模型（Model）（一個簡單的電話信息數(shù)值）是由PhoneListCtrl控制器（Controller）實例化的。這個控制器只是簡單的一個構造函數(shù)，它操作了一個$scope參數(shù)。
app/app.js
'use strict';
// Define the `phonecatApp` module
var phonecatApp = angular.module('phonecatApp', []);
// Define the `PhoneListController` controller on the `phonecatApp` module
phonecatApp.controller('PhoneListController', function PhoneListController($scope) {
$scope.phones = [
{
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.'
}, {
name: 'Motorola XOOM? with Wi-Fi',
snippet: 'The Next, Next Generation tablet.'
}, {
name: 'MOTOROLA XOOM?',
snippet: 'The Next, Next Generation tablet.'
}
];
});
這里，我們定義了一個叫做PhoneListCtrl的控制器，并且注冊它到一個叫做phonecatApp的AngularJS數(shù)據(jù)模型中。注意，我們在<code><html></code>中的ng-app指令現(xiàn)在指定了一個phonecatApp的數(shù)據(jù)模型，這將在啟動Angular過程中加載。
盡管現(xiàn)在看來控制器并沒有做什么特別的事，但它是至關重要的。通過上下文數(shù)據(jù)模型,控制器允許我們建立模型和視圖之間的數(shù)據(jù)綁定。我們由此連接起二者間的描述、數(shù)據(jù)和邏輯，它們是如下工作的：
- ngController指令定位到<code><body></code>標簽，引用指定名稱的控制器，PhoneListCtrl在JavaScript文件app.js中設定。
- PhoneListCtrl控制器把數(shù)據(jù)鏈接到$scope來注入我們的控制器函數(shù)。這個scope是一個在應用定義時預定義（指定）的根作用范圍(root scope)，然后這個控制器通過 <code><body ng-controller="PhoneListCtrl"></code>標簽綁定。
作用范圍
在Angular中作用范圍的概念至關重要。作用范圍被視作把模型、視圖和控制器粘合起來協(xié)同工作的膠水。Angular利用作用范圍來整合模板中的信息、數(shù)據(jù)模型和控制器，保持模型和視圖之間的獨立與同步。任何在模型中的變化都被反映到視圖中，在視圖中的操作變化也反映到數(shù)據(jù)模型。
參考資料
