在这一步中，我们将会在电话列表中为电话添加略图，并附上链接，当然现在也不会链接去哪。在随后的步骤中，我们将使用这些链接来展示电话列表中额外的信息。

　　·现在电话列表中会有链接和图片。

最重要的不同在下面列出。您可以在GitHub上查看全部的不同。

数据

注意到phones.json文件中包含了每一部电话的唯一ID和图片URLs.这些URLs指向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/phone-list/phone-list.template.html:

 

...
     
  
      
                  {
    {phone.name}}    
{
    {phone.snippet}}
  
     
...

 

为了动态生成将来指向电话细节页面的链接，我们使用现在说来已经相当熟悉的双花括号绑定作为href属性值。在第2步中，我们添加了{

{

phone.name}}绑定作为元素内容。这一步中{

{

phone.id}} 绑定在元素属性中被用到。

我们同时也使用了指令在每条记录旁边添加了电话图片。这条指令阻止浏览器逐字处理Angular的{

{

 expression }}标签，同时阻止向一个非法的URL(http://localhost:8000/{

{phone.imageUrl}})发送请求。如果我们仅仅使用一个普通的src标签，这一步将会被执行。通过使用ngSrc指令，我们阻止了浏览器向非法的目的地发送HTTP请求。

总结

既然您已经在电话中添加图片和链接了，让我们进入下一步来学习Angular的布局模板和看看Angular如何使创建有多重视图的应用变得容易吧。