AngularJS入門教程之連結與圖片模板詳解_AngularJS

這一步，你會為手機列表的手機添加縮圖以及一些連結，不過這些連結還不會起作用。接下來你會使用這些連結來分類顯示手機的額外資訊。

請重設工作目錄：

git checkout -f step-6

現在你應該能夠看到列表裡面手機的圖片和連結了。

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

資料

注意到現在phones.json檔案包含了唯一識別碼和每一部手機的映像連結。這些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屬性裡面使用我們早已熟悉的雙括弧資料繫結。在步驟2，我們添加了{{phone.name}}綁定作為元素內容。在這一步，我們在元素屬性中使用{{phone.id}}綁定。

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

測試

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

我們添加了一個新的端到端測試來驗證應用為手機視圖產生了正確的連結，上面就是我們的實現。

你現在可以重新整理你的瀏覽器，並且用端到端測試器來觀察測試的運行，或者你可以在AngularJS伺服器上運行它們。

練習

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

這個問題是由於瀏覽器會在遇到img標籤的時候立刻向還未得到編譯的URL地址發送一個請求，AngularJS只有在頁面載入完畢後才開始編譯運算式從而得到正確的圖片URL地址。

總結

如今你已經添加了手機圖片和連結，轉到步驟7，我們將學習AngularJS的布局模板以及AngularJS是如何輕易地為應用提供多重視圖。

 以上就是對AngularJS 連結與圖片模版的資料整理，後續繼續補充相關知識，謝謝大家對本站的支援！