本章中，我們將為手機(jī)列表中的每個(gè)手機(jī)添加縮略圖以及鏈接漫贞。以后的步驟中我們就可以使用這些鏈接來(lái)展示目錄中每個(gè)手機(jī)的詳細(xì)信息了。
下面我們把實(shí)驗(yàn)代碼切換到step-6分支：
git checkout -f step-6
如果之前你已經(jīng)運(yùn)行了網(wǎng)站育叁，只需要刷新你的瀏覽器來(lái)查看最新的效果迅脐。點(diǎn)這里查看在線的效果。
數(shù)據(jù)
phones.json中存放了每個(gè)手機(jī)的ID和圖片URL地址豪嗽。這些URL地址指向app/img/phoens目錄谴蔑。
app/phones/phones.json
[
{
...
"id": "motorola-defy-with-motoblur",
"imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
"name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
...
},
...
]
模版
app/index.html
...
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
...
現(xiàn)在我們已經(jīng)很熟悉數(shù)據(jù)綁定了豌骏，就是使用兩對(duì)花括號(hào)括起來(lái)的表達(dá)式。我們使用{{phone.id}}來(lái)動(dòng)態(tài)設(shè)置每個(gè)手機(jī)的詳情鏈接URL隐锭。
我們還為每條手機(jī)記錄配了一張縮略圖（<img>標(biāo)簽）窃躲。這里比較有趣的是，我們?cè)谠O(shè)置圖片的URL地址的時(shí)候钦睡，并沒有使用src屬性蒂窒，而是使用了ngSrc指令，這是因?yàn)檐衽绻苯釉趕rc中使用表達(dá)式洒琢，表達(dá)式不會(huì)被執(zhí)行，而是被當(dāng)作路徑字符挣输，所以如果這個(gè)表達(dá)式被放入src的話纬凤，最終得到的圖片URL為：http://localhost:8000/app/{{phone.imageUrl}}×媒溃【注解：其實(shí)這個(gè)設(shè)計(jì)我還沒想明白用意，為啥href可以直接寫入表達(dá)式挖帘，src卻不行, it does not make sense.】
測(cè)試
test/e2e/scenarios.js
...
it('should render phone specific links', function() {
var query = element(by.model('query'));
query.sendKeys('nexus');
element.all(by.css('.phones li a')).first().click();
browser.getLocationAbsUrl().then(function(url) {
expect(url).toBe('/phones/nexus-s');
});
});
...
我們添加了一個(gè)E2E測(cè)試來(lái)驗(yàn)證頁(yè)面上是否能正確的生成手機(jī)的圖片鏈接完丽。
你可以通過(guò)npm run protractor來(lái)運(yùn)行這個(gè)測(cè)試用例。
實(shí)驗(yàn)小能手
使用src屬性替換<img>標(biāo)簽中的ngSrc命令（對(duì)應(yīng)ng-src屬性）拇舀÷咦澹可以使用FireBug、Chrome的web查看器(F12)或者查看服務(wù)器日志骄崩，來(lái)確認(rèn)src中實(shí)際的鏈接是不是變成了/app/%7B%7Bphone.imageUrl%7D%7D(或者是/app/{{phone.imageUrl}}).
總結(jié)
現(xiàn)在你已經(jīng)學(xué)會(huì)如何添加圖片和鏈接了聘鳞，下一章我們將學(xué)習(xí)Angular的模版布局以及如何輕而易舉的創(chuàng)建多視圖應(yīng)用。
