是時候給這些網頁來點動態特性了——用AngularJS！我們這里為后面要加入的控制器添加了一個測試。
一個應用的代碼架構有很多種。對于AngularJS應用，我們鼓勵使用[模型-視圖-控制器（MVC）模式](http://en.wikipedia.org/wiki/Model%E2%80%93View%E2%80%93Controller)解耦代碼和分離關注點。考慮到這一點，我們用AngularJS來為我們的應用添加一些模型、視圖和控制器。
請重置工作目錄：
~~~
git checkout -f step-2
~~~
我們的應用現在有了一個包含三部手機的列表。
步驟1和步驟2之間最重要的不同在下面列出。，你可以到[GitHub](https://github.com/angular/angular-phonecat/compare/step-1...step-2)去看完整的差別。
## 視圖和模板
在AngularJS中，一個視圖是模型通過HTML模板渲染之后的映射。這意味著，不論模型什么時候發生變化，AngularJS會實時更新結合點，隨之更新視圖。
比如，視圖組件被AngularJS用下面這個模板構建出來：
~~~
<html ng-app>
<head>
...
<script src="lib/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
<ul>
<li ng-repeat="phone in phones">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</html>
~~~
我們剛剛把靜態編碼的手機列表替換掉了，因為這里我們使用[ngRepeat指令](http://docs.angularjs.org/api/ng.directive:ngRepeat)和兩個用花括號包裹起來的AngularJS表達式——`{{phone.name}}`和`{{phone.snippet}}`——能達到同樣的效果。
* 在`<li>`標簽里面的`ng-repeat="phone in phones"`語句是一個AngularJS迭代器。這個迭代器告訴AngularJS用第一個`<li>`標簽作為模板為列表中的每一部手機創建一個`<li>`元素。
* 正如我們在第0步時學到的，包裹在`phone.name`和`phone.snippet`周圍的花括號標識著數據綁定。和常量計算不同的是，這里的表達式實際上是我們應用的一個數據模型引用，這些我們在`PhoneListCtrl`控制器里面都設置好了。
## 模型和控制器
在`PhoneListCtrl`控制器里面初始化了數據模型（這里只不過是一個包含了數組的函數，數組中存儲的對象是手機數據列表）：
app/js/controller.js:
~~~
function PhoneListCtrl($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`——控制器方法的名字（在JS文件`controllers.js`中）和`<body>`標簽里面的[ngController](http://docs.angularjs.org/api/ng.directive:ngController)指令的值相匹配。
* 手機的數據此時與注入到我們控制器函數的作用域（`$scope`）相關聯。當應用啟動之后，會有一個根作用域被創建出來，而控制器的作用域是根作用域的一個典型后繼。這個控制器的作用域對所有`<body ng-controller="PhoneListCtrl">`標記內部的數據綁定有效。
AngularJS的作用域理論非常重要：一個作用域可以視作模板、模型和控制器協同工作的粘接器。AngularJS使用作用域，同時還有模板中的信息，數據模型和控制器。這些可以幫助模型和視圖分離，但是他們兩者確實是同步的！任何對于模型的更改都會即時反映在視圖上；任何在視圖上的更改都會被立刻體現在模型中。
想要更加深入理解AngularJS的作用域，請參看[AngularJS作用域文檔](http://docs.angularjs.org/api/ng.$rootScope.Scope)。
## 測試
“AngularJS方式”讓開發時代碼測試變得十分簡單。讓我們來瞅一眼下面這個為控制器新添加的單元測試：
test/unit/controllersSpec.js:
~~~
describe('PhoneCat controllers', function() {
describe('PhoneListCtrl', function(){
it('should create "phones" model with 3 phones', function() {
var scope = {},
ctrl = new PhoneListCtrl(scope);
expect(scope.phones.length).toBe(3);
});
});
});
~~~
這個測試驗證了我們的手機數組里面有三條記錄（暫時無需弄明白這個測試腳本）。這個例子顯示出為AngularJS的代碼創建一個單元測試是多么的容易。正因為測試在軟件開發中是必不可少的環節，所以我們使得在AngularJS可以輕易地構建測試，來鼓勵開發者多寫它們。
在寫測試的時候，AngularJS的開發者傾向于使用Jasmine行為驅動開發（BBD）框架中的語法。盡管AngularJS沒有強迫你使用Jasmine，但是我們在教程里面所有的測試都使用Jasmine編寫。你可以在Jasmine的[官方主頁](http://pivotal.github.com/jasmine/)或者[Jasmine Wiki](https://github.com/pivotal/jasmine/wiki)上獲得相關知識。
基于AngularJS的項目被預先配置為使用[JsTestDriver](http://code.google.com/p/js-test-driver/)來運行單元測試。你可以像下面這樣運行測試：
1. 在一個單獨的終端上，進入到`angular-phonecat`目錄并且運行`./scripts/test-server.sh`來啟動測試（Windows命令行下請輸入`.\scripts\test-server.bat`來運行腳本，后面腳本命令運行方式類似）；
2. 打開一個新的瀏覽器窗口，并且轉到[http://localhost:9876](http://localhost:9876/)?；
3. 選擇“Capture this browser in strict mode”。
這個時候，你可以拋開你的窗口不管然后把這事忘了。JsTestDriver會自己把測試跑完并且把結果輸出在你的終端里。
4. 運行`./scripts/test.sh`進行測試 。
你應當看到類似于如下的結果：
~~~
Chrome: Runner reset.
.
Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (2.00 ms)
Chrome 19.0.1084.36 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (2.00 ms)
~~~
耶！測試通過了！或者沒有...
注意：如果在你運行測試之后發生了錯誤，關閉瀏覽器然后回到終端關了腳本，然后在重新來一邊上面的步驟。
## 練習
* 為`index.html`添加另一個數據綁定。例如：
~~~
<p>Total number of phones: {{phones.length}}</p>
~~~
* 創建一個新的數據模型屬性，并且把它綁定到模板上。例如：
~~~
$scope.hello = "Hello, World!"
~~~
更新你的瀏覽器，確保顯示出來“Hello, World!”
* 用一個迭代器創建一個簡單的表：
~~~
<table>
<tr><th>row number</th></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>
</table>
~~~
現在讓數據模型表達式的`i`增加1：
~~~
<table>
<tr><th>row number</th></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i+1}}</td></tr>
</table>
~~~
* 確定把`toBe(3)`改成`toBe(4)`之后單元測試失敗，然后重新跑一遍`./scripts/test.sh`腳本
## 總結
你現在擁有一個模型，視圖，控制器分離的動態應用了，并且你隨時進行了測試。現在，你可以進入到[步驟3](a006)來為應用加入全文檢索功能了。
