[Angular Tutorial] 8 - Templating Links & Images

Posted 2020-07-15

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

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

最重要的不同在下面列出。您可以点击这里在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:

 

...
<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">
      <img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
    </a>
    <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
    <p>{{phone.snippet}}</p>
  </li>
</ul>
...

 

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

我们同时也使用了ngSrc指令在每条记录旁边添加了电话图片。这条指令阻止浏览器逐字处理Angular的{{ expression }}标签，同时阻止向一个非法的URL(http://localhost:8000/{{phone.imageUrl}})发送请求。如果我们仅仅使用一个普通的src标签，这一步将会被执行。通过使用ngSrc指令，我们阻止了浏览器向非法的目的地发送HTTP请求。

总结

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