步驟8——模板鏈接與圖形

在這一步，會為手機列表添加縮略圖以及對應的購買信息鏈接。后續步驟中，你將通過鏈接顯示目錄中手機的更多附加（詳細）信息。

現在就為手機列表添加縮略圖

工作區切換到步驟8

數據

注意到在phones.json中包含了每個手機獨一無二的id和圖片鏈接地址。這些鏈接地址都指向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",
    ...
  },
  ...
]

模板

phone-list.template.html

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <!--Sidebar content-->

      <p>
        Search:
        <input ng-model="$ctrl.query" />
      </p>

      <p>
        Sort by:
        <select ng-model="$ctrl.orderProp">
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>
      </p>

    </div>
    <div class="col-md-10">
      <!--Body content-->

      <ul class="phones">
        <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail">
          <a href="#/phones/{{phone.id}}" class="thumb">
            ![]({{phone.imageUrl}})
          </a>
          <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
          <p>{{phone.snippet}}</p>
        </li>
      </ul>

    </div>
  </div>
</div>

為了動態處理鏈接（這在后面將導向手機的詳細介紹頁面），我們給href屬性的賦值中用到了由雙大括號括起來的數據綁定。在步驟2中，我們把{{phone.name}}綁定到一個html元素的內容中，這一步{{phone.id}}將用來綁定到元素屬性中。

我們還為每款手機添加了圖片，這里用到了ngSrc命令，它會阻止瀏覽器在Angular還沒有初始化并能夠正常展開綁定時發出諸如下面一樣的無效URL請求: <code>http://localhost:8000/app/{{phone.imageUrl}}</code>，而是僅僅描述當前元素需要一個src屬性，這個屬性<code>（

步驟9——路由與多視圖

工作區切換到步驟9

依賴

這一步添加的路由功能是由Angular的ngRoute模塊提供，這是一個獨立于Angular核心框架的模塊。

我們使用Bower來安裝客戶端依賴。這一步驟中我們會更新bower.json配置文件來包含新的依賴關系

{
  "name": "angular-route",
  "version": "1.5.11",
  "license": "MIT",
  "main": "./angular-route.js",
  "ignore": [],
  "dependencies": {
    "angular": "1.5.11"
  }
}

新的依賴關系"angular-route": "~1.2.x"告訴bower安裝版本1.2.x的angular-route組件。我們必須明確告訴bower下載安裝這個依賴。

多視圖、路由與布局模板

我們的程序逐漸強大，也變得更加復雜。本步驟之前，我們只有唯一的視圖來（用來顯示手機列表），并且所有的模板代碼都放置在index.html中。新的步驟中會添加一個視圖來顯示列表中每個設備詳細的信息（詳細說明視圖）。

為了添加詳細說明視圖，我們擴展index.html模板文件來包含兩個視圖，但這將很快引起混亂，為了替代，我們嘗試把index.html轉換到我們稱為布局模板（layout template）其中有模板（布局模板）在所有視圖中通用，其他則是局部模板（partial templates），局部模板只包括當前路由route——視圖當前顯示需要的部分。

在Angular中，程序的路由通過$routeProvider聲明，它是$route服務的提供者。這個服務能容易的把控制器、視圖模板和瀏覽器當前的地址欄信息連接起來。使用這個特性，我們可以實現深層鏈接(deep linking)，它可以讓你可以利用瀏覽器歷史（后退和前進）以及收藏標簽。

好了。我蒙圈了。。。

詳情請看