Angular项目步骤8——模板链接与图形+步骤9——路由与多视

步骤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>（

</code>，会在Angular初始化好后进行绑定），使用ngSrc指令能始终阻止浏览器发出明显是无效的http请求。

步骤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)，它可以让你可以利用浏览器历史（后退和前进）以及收藏标签。

好了。我蒙圈了。。。

详情请看