AngularJS 模板鏈接和圖像

模板連接和圖像

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

• 現(xiàn)在列表中的手機(jī)已經(jīng)有鏈接和圖像了。

把工作空間重置到第六步

git checkout -f step-6

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

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

數(shù)據(jù)

注意，phones.json文件包含了針對(duì)每款手機(jī)的獨(dú)一無二的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>
...

要想未來動(dòng)態(tài)生成指向手機(jī)詳情頁的鏈接，我們?cè)谠貙傩?code>href的值上使用了廣為人知的雙花括號(hào)綁定。在第二步中，我們添加了{{phone.name}}綁定，作為元素內(nèi)容。在這一步中，{{phone.id}}綁定用在元素屬性上。

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

測(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è)新的端到端測(cè)試，以核查應(yīng)用是否生成了正確的鏈接，正確的鏈接要鏈到手機(jī)視圖中，我們將在下一步是實(shí)現(xiàn)這個(gè)視圖。

現(xiàn)在你可以重新運(yùn)行npm run protractor以查看測(cè)試運(yùn)行。

實(shí)驗(yàn)

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

  有個(gè)話題是，在Angular已經(jīng)有機(jī)會(huì)評(píng)估表達(dá)式、并注入有效地址之前，當(dāng)瀏覽器讀取img標(biāo)簽時(shí)，瀏覽器將向非法的圖像地址發(fā)起一個(gè)請(qǐng)求。

總結(jié)

現(xiàn)在你已經(jīng)添加了一個(gè)手機(jī)圖像和鏈接，前往第七步 路由與多視圖以學(xué)習(xí)關(guān)于Angular布局模板、以及Angular如何使創(chuàng)建具有多個(gè)視圖的應(yīng)用變?nèi)菀住?/p>