    [
     {
      ...
      "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>
...

這些鏈接將來會指向每一部電話的詳細信息頁。不過現(xiàn)在為了產(chǎn)生這些鏈接，我們在href屬性里面使用我們早已熟悉的雙括號數(shù)據(jù)綁定。在步驟2，我們添加了{{phone.name}}綁定作為元素內(nèi)容。在這一步，我們在元素屬性中使用{{phone.id}}綁定。

我們同樣為每條記錄添加手機圖片，只需要使用ngSrc指令代替<img>的src屬性標(biāo)簽就可以了。如果我們僅僅用一個正常src屬性來進行綁定（<img class="diagram" src="{{phone.imageUrl}}">），瀏覽器會把AngularJS的{{ 表達式 }}標(biāo)記直接進行字面解釋，并且發(fā)起一個向非法urlhttp://localhost:8000/app/{{phone.imageUrl}}的請求。因為瀏覽器載入頁面時，同時也會請求載入圖片，AngularJS在頁面載入完畢時才開始編譯——瀏覽器請求載入圖片時{{phone.imageUrl}}還沒得到編譯！有了這個ngSrc指令會避免產(chǎn)生這種情況，使用ngSrc指令防止瀏覽器產(chǎn)生一個指向非法地址的請求。

測試

test/e2e/scenarios.js

...
    it('should render phone specific links', function() {
      input('query').enter('nexus');
      element('.phones li a').click();
      expect(browser().location().url()).toBe('/phones/nexus-s');
    });
...

我們添加了一個新的端到端測試來驗證應(yīng)用為手機視圖產(chǎn)生了正確的鏈接，上面就是我們的實現(xiàn)。

你現(xiàn)在可以刷新你的瀏覽器，并且用端到端測試器來觀察測試的運行。

練習(xí)

將ng-src指令換成普通的src屬性。用像Firebug，Chrome Web Inspector這樣的工具，或者直接去看服務(wù)器的訪問日志，你會發(fā)現(xiàn)你的應(yīng)用向/app/%7B%7Bphone.imageUrl%7D%7D（或者/app/{{phone.imageUrl}}）發(fā)送了一個非法請求。

這個問題是由于瀏覽器會在遇到img標(biāo)簽的時候立刻向還未得到編譯的URL地址發(fā)送一個請求，AngularJS只有在頁面載入完畢后才開始編譯表達式從而得到正確的圖片URL地址。

總結(jié)

如今你已經(jīng)添加了手機圖片和鏈接，轉(zhuǎn)到路由與多視圖，我們將學(xué)習(xí)AngularJS的布局模板以及AngularJS是如何輕易地為應(yīng)用提供多重視圖。

上一篇：引導(dǎo)程序 - Bootstrapping下一篇：路由與多視圖 - Routing Multiple Views