6-模板链接和图片

在这一步，你给手机列表中的手机增加缩略图，并有链接，现在是不能链去其他地方，在随后步骤中，你将用链接去目录中关于手机的详细信息。

• 现在列表中有链接和图片。

工作空间重置介绍 重置你的工作区间到第六步

git checkout -f step-6

刷新你的浏览器，或者在线上检出这一步：第六步例子。 大部分重要的修改都列在下面，你在 GitHub上能看全部不同。

数据

记住 phones.json文件包含了每个手机的主键ID和图片URL地址。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属性值，在第二步，我们增加了一个 {{phone.name}}绑定来作为元素内容，在这一步， {{phone.id}}绑定用做元素属性。 我们使用 ngSrc命令同样增加一个图片给每条记录，命令阻止浏览器字面上解析Angular {{expression }}，并初始化一个请求到验证URL http://localhost:8000/app/{{phone.imageUrl}} ,如果我们只在src属性上( <img src="{{phone.imageUrl}}" alt="" />)定义了一个绑定。我们必需这样做。使用ngSrc命令就阻止浏览器发起请求去验证地址。

测试

test/e2e/scenarios.js:

...
    it('should render phone specific links', function() {
      var query = element(by.model('query'));
      query.sendKeys('nexus');
      element.all(by.css('.phones li a')).first().click();
      browser.getLocationAbsUrl().then(function(url) {
        expect(url.split('#')[1]).toBe('/phones/nexus-s');
      });
    });
...

我们增加一个端对端测试去验证应用正确生成了手机视图链接，我们将在下面的步骤实现。 你可以重新运行 npm run protractor 看测试运行结果。

实验

用ng-src命令替换旧的普通的src属性，使用工具像Firebug或者Chorme网络查看器，查看服务器的访问日志。确认应用已经发起一个请求 /app/%7B%7Bphone.imageUrl%7D%7D (or /app/{{phone.imageUrl}})。 这里的问题是，在Angular修改计算表达式，在注入验证地址之前，他一点击img标签，浏览器就发起一个请求。

总结

现在你已经增加了图片与链接，去 第7步，学习Anglar布局模板，以及让Angular如何拥有多个视图变得多么容易。 原文地址： https://docs.angularjs.org/tutorial/step_06