步驟1——靜態(tài)模板
這里將舉例展示Angular是如何增強(qiáng)標(biāo)準(zhǔn)HTML的赶撰。你將創(chuàng)建一個(gè)純粹的靜態(tài)HTML頁面，下面的步驟你會(huì)看到我們?nèi)绾伟袶TML代碼轉(zhuǎn)為Angular模板糊啡，通過數(shù)據(jù)來動(dòng)態(tài)顯示出相同的結(jié)果拄查。
在這一步中，我們將添加兩部手機(jī)的基本信息到一個(gè)HTML頁面中棚蓄。 頁面現(xiàn)在顯示了兩個(gè)手機(jī)的一個(gè)列表信息
工作區(qū)切換到步驟1
git checkout -f step-1
此時(shí)的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讓頁面動(dòng)態(tài)化堕扶。我們還將添加一些測(cè)試碍脏，這將檢驗(yàn)我們添加的控制器代碼會(huì)執(zhí)行預(yù)期的工作。
其實(shí)有很多方法來構(gòu)建應(yīng)用程序稍算，在Angular中典尾，我們推薦采用Model-View-Controller（MVC——模型-視圖-控制器）的設(shè)計(jì)模式來解耦代碼與單獨(dú)的問題。利用這點(diǎn)邪蛔，我們?cè)趍odel急黎、view和controller中用到盡量少的Angular和Javascript。
程序?qū)⒄故纠脭?shù)據(jù)動(dòng)態(tài)的列出3部手機(jī)列表侧到。
工作區(qū)切換到步驟2
git checkout -f step-2
這里需要擴(kuò)展一下視圖（view）和模板（template）
在Angular中勃教，視圖是數(shù)據(jù)模型通過HTML模板的投影，這意味著任何數(shù)據(jù)模型的變化匠抗，Angular都會(huì)針對(duì)綁定點(diǎn)刷新視圖故源。
現(xiàn)在我們?cè)倏匆幌拢襟E2中的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指令和兩個(gè)Angular表達(dá)式(expression)取代了硬編碼的電話列表:
- li的ng-repeat="phone in phones"屬性就是一個(gè)Angular重復(fù)指令汞贸，它告訴angular在列表中為每個(gè)電話信息重復(fù)創(chuàng)建li元素绳军，這里的li標(biāo)簽就作為了模板。
![Uploading tutorial_02_000240.png . . .] - 在雙大括號(hào)中的表達(dá)式{{phone.name}}和{{phone.snippet}}會(huì)用實(shí)際的值替代矢腻。
這里门驾，我們還添加了新的指令，叫做ng-controller多柑，它為<body>標(biāo)簽指定了一個(gè)PhoneListCtrl的控制器奶是，對(duì)于這點(diǎn)
- 在雙大括號(hào)中的表達(dá)式{{phone.name}}和{{phone.snippet}}指定的綁定，將參考我們程序中的數(shù)據(jù)模型竣灌，這些都是在我們的PhoneListCtrl的控制器進(jìn)行設(shè)置的聂沙。
注意：我們已經(jīng)通過加載使用ng-app="phonecatApp"來指定了一個(gè)Angular數(shù)據(jù)模型，這里phonecatApp是我們數(shù)據(jù)模型的名字初嘹，這個(gè)模型被包含在PhoneListCtrl中及汉。
這里我們也需要擴(kuò)展一下數(shù)據(jù)模型（Model）和控制器（Controller）
這里的數(shù)據(jù)模型（Model）（一個(gè)簡(jiǎn)單的電話信息數(shù)值）是由PhoneListCtrl控制器（Controller）實(shí)例化的。這個(gè)控制器只是簡(jiǎn)單的一個(gè)構(gòu)造函數(shù)屯烦，它操作了一個(gè)$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.'
}
];
});
這里，我們定義了一個(gè)叫做PhoneListCtrl的控制器驻龟，并且注冊(cè)它到一個(gè)叫做phonecatApp的AngularJS數(shù)據(jù)模型中甸箱。注意，我們?cè)?lt;code><html></code>中的ng-app指令現(xiàn)在指定了一個(gè)phonecatApp的數(shù)據(jù)模型迅脐，這將在啟動(dòng)Angular過程中加載芍殖。
盡管現(xiàn)在看來控制器并沒有做什么特別的事，但它是至關(guān)重要的谴蔑。通過上下文數(shù)據(jù)模型,控制器允許我們建立模型和視圖之間的數(shù)據(jù)綁定豌骏。我們由此連接起二者間的描述龟梦、數(shù)據(jù)和邏輯，它們是如下工作的：
- ngController指令定位到<code><body></code>標(biāo)簽窃躲，引用指定名稱的控制器计贰，PhoneListCtrl在JavaScript文件app.js中設(shè)定。
- PhoneListCtrl控制器把數(shù)據(jù)鏈接到$scope來注入我們的控制器函數(shù)蒂窒。這個(gè)scope是一個(gè)在應(yīng)用定義時(shí)預(yù)定義（指定）的根作用范圍(root scope)躁倒，然后這個(gè)控制器通過 <code><body ng-controller="PhoneListCtrl"></code>標(biāo)簽綁定。
作用范圍
在Angular中作用范圍的概念至關(guān)重要洒琢。作用范圍被視作把模型秧秉、視圖和控制器粘合起來協(xié)同工作的膠水。Angular利用作用范圍來整合模板中的信息衰抑、數(shù)據(jù)模型和控制器象迎，保持模型和視圖之間的獨(dú)立與同步。任何在模型中的變化都被反映到視圖中呛踊，在視圖中的操作變化也反映到數(shù)據(jù)模型砾淌。
參考資料
