AngularJS入門教程之AngularJS 模板
是時候給這些網(wǎng)頁來點動態(tài)特性了——用AngularJS！我們這里為后面要加入的控制器添加了一個測試。
一個應(yīng)用的代碼架構(gòu)有很多種。對于AngularJS應(yīng)用，我們鼓勵使用模型-視圖-控制器（MVC）模式解耦代碼和分離關(guān)注點。考慮到這一點，我們用AngularJS來為我們的應(yīng)用添加一些模型、視圖和控制器。
請重置工作目錄：
git checkout -f step-2
我們的應(yīng)用現(xiàn)在有了一個包含三部手機(jī)的列表。
步驟1和步驟2之間最重要的不同在下面列出。，你可以到GitHub去看完整的差別。
視圖和模板
在AngularJS中，一個視圖是模型通過HTML**模板**渲染之后的映射。這意味著，不論模型什么時候發(fā)生變化，AngularJS會實時更新結(jié)合點，隨之更新視圖。
比如，視圖組件被AngularJS用下面這個模板構(gòu)建出來：
<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>
我們剛剛把靜態(tài)編碼的手機(jī)列表替換掉了，因為這里我們使用ngRepeat指令和兩個用花括號包裹起來的AngularJS表達(dá)式——{{phone.name}}和{{phone.snippet}}——能達(dá)到同樣的效果。
在<li>標(biāo)簽里面的ng-repeat="phone in phones"語句是一個AngularJS迭代器。這個迭代器告訴AngularJS用第一個<li>標(biāo)簽作為模板為列表中的每一部手機(jī)創(chuàng)建一個<li>元素。
正如我們在第0步時學(xué)到的，包裹在phone.name和phone.snippet周圍的花括號標(biāo)識著數(shù)據(jù)綁定。和常量計算不同的是，這里的表達(dá)式實際上是我們應(yīng)用的一個數(shù)據(jù)模型引用，這些我們在PhoneListCtrl控制器里面都設(shè)置好了。
模型和控制器
在PhoneListCtrl控制器里面初始化了數(shù)據(jù)模型（這里只不過是一個包含了數(shù)組的函數(shù)，數(shù)組中存儲的對象是手機(jī)數(shù)據(jù)列表）：
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."}
];
}
盡管控制器看起來并沒有起到什么控制的作用，但是它在這里起到了至關(guān)重要的作用。通過給定我們數(shù)據(jù)模型的語境，控制器允許我們建立模型和視圖之間的數(shù)據(jù)綁定。我們是這樣把表現(xiàn)層，數(shù)據(jù)和邏輯部件聯(lián)系在一起的：
PhoneListCtrl——控制器方法的名字（在JS文件controllers.js中）和<body>標(biāo)簽里面的ngController指令的值相匹配。
手機(jī)的數(shù)據(jù)此時與注入到我們控制器函數(shù)的作用域（$scope）相關(guān)聯(lián)。當(dāng)應(yīng)用啟動之后，會有一個根作用域被創(chuàng)建出來，而控制器的作用域是根作用域的一個典型后繼。這個控制器的作用域?qū)λ?lt;body ng-controller="PhoneListCtrl">標(biāo)記內(nèi)部的數(shù)據(jù)綁定有效。
AngularJS的作用域理論非常重要：一個作用域可以視作模板、模型和控制器協(xié)同工作的粘接器。AngularJS使用作用域，同時還有模板中的信息，數(shù)據(jù)模型和控制器。這些可以幫助模型和視圖分離，但是他們兩者確實是同步的！任何對于模型的更改都會即時反映在視圖上；任何在視圖上的更改都會被立刻體現(xiàn)在模型中。
想要更加深入理解AngularJS的作用域，請參看AngularJS作用域文檔。
測試
“AngularJS方式”讓開發(fā)時代碼測試變得十分簡單。讓我們來瞅一眼下面這個為控制器新添加的單元測試：
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);
});
});
});
這個測試驗證了我們的手機(jī)數(shù)組里面有三條記錄（暫時無需弄明白這個測試腳本）。這個例子顯示出為AngularJS的代碼創(chuàng)建一個單元測試是多么的容易。正因為測試在軟件開發(fā)中是必不可少的環(huán)節(jié)，所以我們使得在AngularJS可以輕易地構(gòu)建測試，來鼓勵開發(fā)者多寫它們。
在寫測試的時候，AngularJS的開發(fā)者傾向于使用Jasmine行為驅(qū)動開發(fā)（BBD）框架中的語法。盡管AngularJS沒有強(qiáng)迫你使用Jasmine，但是我們在教程里面所有的測試都使用Jasmine編寫。你可以在Jasmine的官方主頁或者Jasmine Wiki上獲得相關(guān)知識。
基于AngularJS的項目被預(yù)先配置為使用JsTestDriver來運行單元測試。你可以像下面這樣運行測試：
在一個單獨的終端上，進(jìn)入到angular-phonecat目錄并且運行./scripts/test-server.sh來啟動測試（Windows命令行下請輸入.\scripts\test-server.bat來運行腳本，后面腳本命令運行方式類似）；
打開一個新的瀏覽器窗口，并且轉(zhuǎn)到http://localhost:9876 ；
選擇“Capture this browser in strict mode”。
這個時候，你可以拋開你的窗口不管然后把這事忘了。JsTestDriver會自己把測試跑完并且把結(jié)果輸出在你的終端里。
運行./scripts/test.sh進(jìn)行測試 。
你應(yīng)當(dāng)看到類似于如下的結(jié)果：
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)
耶！測試通過了！或者沒有... 注意：如果在你運行測試之后發(fā)生了錯誤，關(guān)閉瀏覽器然后回到終端關(guān)了腳本，然后在重新來一邊上面的步驟。
練習(xí)
為index.html添加另一個數(shù)據(jù)綁定。例如：
<p>Total number of phones: {{phones.length}}</p>
創(chuàng)建一個新的數(shù)據(jù)模型屬性，并且把它綁定到模板上。例如：
$scope.hello = "Hello, World!"
更新你的瀏覽器，確保顯示出來“Hello, World!”
用一個迭代器創(chuàng)建一個簡單的表：
<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>
現(xiàn)在讓數(shù)據(jù)模型表達(dá)式的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腳本
總結(jié)
你現(xiàn)在擁有一個模型，視圖，控制器分離的動態(tài)應(yīng)用了，并且你隨時進(jìn)行了測試。現(xiàn)在，你可以進(jìn)入到步驟3來為應(yīng)用加入全文檢索功能了。
以上就是對AngularJS 模板的資料整理，后續(xù)繼續(xù)補充相關(guān)資料，謝謝大家對本站的支持！
- AngularJs Understanding Angular Templates
- AngularJS ng-bind-template 指令詳解
- AngularJS延遲加載html template
- AngularJS實現(xiàn)根據(jù)變量改變動態(tài)加載模板的方法
- AngularJS模板加載用法詳解
- AngularJS入門教程之更多模板詳解
- AngularJS入門教程之鏈接與圖片模板詳解
- AngularJS入門教程之靜態(tài)模板詳解
- AngularJS 路由和模板實例及路由地址簡化方法(必看)
- AngularJS初始化靜態(tài)模板詳解
- AngularJS入門教程（二）：AngularJS模板
- AngularJS入門教程（一）：靜態(tài)模板
- AngularJS ng-template寄宿方式用法分析
相關(guān)文章
Angular4實現(xiàn)動態(tài)添加刪除表單輸入框功能
這篇文章主要介紹了Angular4實現(xiàn)動態(tài)添加刪除表單輸入框功能,需要的朋友可以參考下2017-08-08
詳解Angular 4.x NgTemplateOutlet
這篇文章主要介紹了詳解Angular 4.x NgTemplateOutlet,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Angularjs實現(xiàn)數(shù)組隨機(jī)排序的方法
今天小編就為大家分享一篇Angularjs實現(xiàn)數(shù)組隨機(jī)排序的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Angularjs全局變量被作用域監(jiān)聽的正確姿勢
這篇文章主要介紹了Angularjs全局變量被作用域監(jiān)聽的正確姿勢的相關(guān)資料,需要的朋友可以參考下2016-02-02
實例剖析AngularJS框架中數(shù)據(jù)的雙向綁定運用
這篇文章主要介紹了AngularJS框架中數(shù)據(jù)的雙向綁定運用實例,包括數(shù)據(jù)綁定中的關(guān)鍵函數(shù)與監(jiān)聽器觸發(fā)的相關(guān)講解,需要的朋友可以參考下2016-03-03
AngularJS中controller控制器繼承的使用方法
這篇文章主要介紹了AngularJS中controller控制器繼承的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了AngularJS用戶選擇器指令,結(jié)合實例形式分析了angular指令實現(xiàn)選擇器功能的具體操作步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了Angular4 組件通訊方法大全(推薦)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
Angular學(xué)習(xí)筆記之a(chǎn)ngular的$filter服務(wù)淺析
本文是小編記錄的angular學(xué)習(xí)筆記，通過本文首先給大家介紹了$filter服務(wù)，然后介紹下內(nèi)置filter及filter的簡單使用，非常不錯具有參考借鑒價值，感興趣的朋友一起看看吧2016-11-11
AngularJS實現(xiàn)動態(tài)編譯添加到dom中的方法
這篇文章主要介紹了AngularJS實現(xiàn)動態(tài)編譯添加到dom中的方法,結(jié)合實例形式分析了AngularJS動態(tài)編輯構(gòu)建模板的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11