AngularJS 連接與圖片模版

2018-09-28 17:31 更新

連接與圖片模版

這一步,你會(huì)為手機(jī)列表的手機(jī)添加縮略圖以及一些鏈接,不過(guò)這些鏈接還不會(huì)起作用。接下來(lái)你會(huì)使用這些鏈接來(lái)分類顯示手機(jī)的額外信息。

請(qǐng)重置工作目錄:

    git checkout -f step-6

現(xiàn)在你應(yīng)該能夠看到列表里面手機(jī)的圖片和鏈接了。

步驟5和步驟6之間最重要的不同在下面列出。你可以在GitHub里看到完整的差別。

數(shù)據(jù)

注意到現(xiàn)在phones.json文件包含了唯一標(biāo)識(shí)符和每一部手機(jī)的圖像鏈接。這些url現(xiàn)在指向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>
...  

這些鏈接將來(lái)會(huì)指向每一部電話的詳細(xì)信息頁(yè)。不過(guò)現(xiàn)在為了產(chǎn)生這些鏈接,我們?cè)?code>href屬性里面使用我們?cè)缫咽煜さ碾p括號(hào)數(shù)據(jù)綁定。在步驟2,我們添加了{{phone.name}}綁定作為元素內(nèi)容。在這一步,我們?cè)谠貙傩灾惺褂?code>{{phone.id}}綁定。

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

測(cè)試

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

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

你現(xiàn)在可以刷新你的瀏覽器,并且用端到端測(cè)試器來(lái)觀察測(cè)試的運(yùn)行。

練習(xí)

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

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

總結(jié)

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

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)