请重置工作目录：

现在你应该能够看到列表里面手机的图片和链接了。

步骤5和步骤6之间最重要的不同在下面列出。你可以在里看到完整的差别。

注意到现在文件包含了唯一标识符和每一部手机的图像链接。这些url现在指向app/img/phones/目录。

app/index.html

这些链接将来会指向每一部电话的详细信息页。不过现在为了产生这些链接，我们在href属性里面使用我们早已熟悉的双括号数据绑定。在步骤2，我们添加了{{phone.name}}绑定作为元素内容。在这一步，我们在元素属性中使用{{phone.id}}绑定。

我们同样为每条记录添加手机图片，只需要使用ngSrc指令代替<img>的属性标签就可以了。如果我们仅仅用一个正常src属性来进行绑定（<img class="diagram" src="{{phone.imageUrl}}">），浏览器会把AngularJS的{{ 表达式 }}标记直接进行字面解释，并且发起一个向非法urlhttp://localhost:8000/app/{{phone.imageUrl}}的请求。因为浏览器载入页面时，同时也会请求载入图片，AngularJS在页面载入完毕时才开始编译——浏览器请求载入图片时{{phone.imageUrl}}还没得到编译！有了这个指令会避免产生这种情况，使用ngSrc指令防止浏览器产生一个指向非法地址的请求。

test/e2e/scenarios.js

你现在可以刷新你的浏览器，并且用端到端测试器来观察测试的运行，或者你可以在上运行它们。

将ng-src指令换成普通的src属性。用像Firebug，Chrome Web Inspector这样的工具，或者直接去看服务器的访问日志，你会发现你的应用向/app/%7B%7Bphone.imageUrl%7D%7D（或者/app/{{phone.imageUrl}}）发送了一个非法请求。

这个问题是由于浏览器会在遇到标签的时候立刻向还未得到编译的URL地址发送一个请求，AngularJS只有在页面载入完毕后才开始编译表达式从而得到正确的图片URL地址。

总结

如今你已经添加了手机图片和链接，转到，我们将学习AngularJS的布局模板以及AngularJS是如何轻易地为应用提供多重视图。