是時候給這些網頁來點動態特性了——用AngularJS！我們這裡為後面要加入的控制器添加了一個測試。
一個應用的代碼架構有很多種。對於AngularJS應用，我們鼓勵使用模型-視圖-控制器（MVC）模式解耦代碼和分離關注點。考慮到這一點，我們用AngularJS來為我們的應用添加一些模型、視圖和控制器。
請重設工作目錄：
git checkout -f step-2
我們的應用現在有了一個包含三部手機的列表。
步驟1和步驟2之間最重要的不同在下面列出。，你可以到GitHub去看完整的差別。
視圖和模板
在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指令和兩個用花括弧包裹起來的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指令的值相匹配。
手機的資料此時與注入到我們控制器函數的範圍（$scope）相關聯。當應用啟動之後，會有一個根範圍被建立出來，而控制器的範圍是根範圍的一個典型後繼。這個控制器的範圍對所有<body ng-controller="PhoneListCtrl">標記內部的資料繫結有效。
AngularJS的範圍理論非常重要：一個範圍可以視作模板、模型和控制器協同工作的粘接器。AngularJS使用範圍，同時還有模板中的資訊，資料模型和控制器。這些可以協助模型和視圖分離，但是他們兩者確實是同步的！任何對於模型的更改都會即時反映在視圖上；任何在視圖上的更改都會被立刻體現在模型中。
想要更加深入理解AngularJS的範圍，請參看AngularJS範圍文檔。
測試
“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的官方首頁或者Jasmine Wiki上獲得相關知識。
基於AngularJS的項目被預先配置為使用JsTestDriver來運行單元測試。你可以像下面這樣運行測試：
在一個單獨的終端上，進入到angular-phonecat目錄並且運行./scripts/test-server.sh來啟動測試（Windows命令列下請輸入.\scripts\test-server.bat來運行指令碼，後面指令碼命令運行方式類似）；
開啟一個新的瀏覽器視窗，並且轉到http://localhost:9876 ；
選擇“Capture this browser in strict mode”。
這個時候，你可以拋開你的視窗不管然後把這事忘了。JsTestDriver會自己把測試跑完並且把結果輸出在你的終端裡。
運行./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指令碼
總結
你現在擁有一個模型，視圖，控制器分離的Live App了，並且你隨時進行了測試。現在，你可以進入到步驟3來為應用加入全文檢索索引功能了。
以上就是對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
