模板連接和圖像

在這一步中，你將為手機列表中的手機添加一個縮略圖，并鏈接到想去的地方。在后續的步驟中，你將使用這個鏈接顯示關于目錄中的這款手機的額外的信息。

• 現在列表中的手機已經有鏈接和圖像了。

把工作空間重置到第六步

git checkout -f step-6

刷新你的瀏覽器或在線檢查這一步：Step 6 Live Demo

下面列出了第五步和第六步之間的最重要的區別。你可以在GitHub里看到完整的差異。

數據

注意，phones.json文件包含了針對每款手機的獨一無二的ID和圖像URL。URL指向app/img/phones目錄。

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}}"></a>
            <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
            <p>{{phone.snippet}}</p>
          </li>
        </ul>
...

要想未來動態生成指向手機詳情頁的鏈接，我們在元素屬性href的值上使用了廣為人知的雙花括號綁定。在第二步中，我們添加了{{phone.name}}綁定，作為元素內容。在這一步中，{{phone.id}}綁定用在元素屬性上。

我們還在每條記錄后面添加了手機圖像，用一個帶ngSrc指令的圖像標簽。這個指令防止瀏覽器字面理解Anglar標簽{{ expression }}、向無效的URLhttp://localhost:8000/app/{{phone.imageUrl}}初始化一個請求，如果我們只在一個常規的元素屬性src上綁定這個雙花括號值（<img src="{{phone.imageUrl}}">），這樣的事情真的會發生。使用ngSrc指令以防止瀏覽器對一個無效的位置發起http請求。

測試

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');
      });
    });
...

我們添加了一個新的端到端測試，以核查應用是否生成了正確的鏈接，正確的鏈接要鏈到手機視圖中，我們將在下一步是實現這個視圖。

現在你可以重新運行npm run protractor以查看測試運行。

實驗

• 用扁平的舊元素屬性src代替ng-src指令。使用一些工具，比如說Firebug，或者Chrome的Web Inspector，或者檢查web服務器的訪問日志，確保應用確實發起過了一個外部請求，指向/app/%7B%7Bphone.imageUrl%7D%7D（或者/app/{{phone.imageUrl}}）。

  有個話題是，在Angular已經有機會評估表達式、并注入有效地址之前，當瀏覽器讀取img標簽時，瀏覽器將向非法的圖像地址發起一個請求。

總結

現在你已經添加了一個手機圖像和鏈接，前往第七步 路由與多視圖以學習關于Angular布局模板、以及Angular如何使創建具有多個視圖的應用變容易。