【一起学AngularJS】第八章、添加链接和图片

本章中，我们将为手机列表中的每个手机添加缩略图以及链接。以后的步骤中我们就可以使用这些链接来展示目录中每个手机的详细信息了。
下面我们把实验代码切换到step-6分支：

git checkout -f step-6

如果之前你已经运行了网站，只需要刷新你的浏览器来查看最新的效果。点这里查看在线的效果。

数据

phones.json中存放了每个手机的ID和图片URL地址。这些URL地址指向app/img/phoens目录。
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}}" alt="{{phone.name}}"></a>
            <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
            <p>{{phone.snippet}}</p>
          </li>
        </ul>
...

现在我们已经很熟悉数据绑定了，就是使用两对花括号括起来的表达式。我们使用{{phone.id}}来动态设置每个手机的详情链接URL。
我们还为每条手机记录配了一张缩略图（<img>标签）。这里比较有趣的是，我们在设置图片的URL地址的时候，并没有使用src属性，而是使用了ngSrc指令，这是因为，如果直接在src中使用表达式，表达式不会被执行，而是被当作路径字符，所以如果这个表达式被放入src的话，最终得到的图片URL为：http://localhost:8000/app/{{phone.imageUrl}}。【注解：其实这个设计我还没想明白用意，为啥href可以直接写入表达式，src却不行, it does not make sense.】

测试

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).toBe('/phones/nexus-s');
      });
    });
...

我们添加了一个E2E测试来验证页面上是否能正确的生成手机的图片链接。
你可以通过npm run protractor来运行这个测试用例。

实验小能手

使用src属性替换<img>标签中的ngSrc命令（对应ng-src属性）。可以使用FireBug、Chrome的web查看器(F12)或者查看服务器日志，来确认src中实际的链接是不是变成了/app/%7B%7Bphone.imageUrl%7D%7D(或者是/app/{{phone.imageUrl}}).

总结

现在你已经学会如何添加图片和链接了，下一章我们将学习Angular的模版布局以及如何轻而易举的创建多视图应用。