[Angular Tutorial] 8 - Templating Links & Images

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[Angular Tutorial] 8 - Templating Links & Images相关的知识,希望对你有一定的参考价值。

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

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

最重要的不同在下面列出。您可以点击这里在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如何使创建有多重视图的应用变得容易吧。

 

以上是关于[Angular Tutorial] 8 - Templating Links & Images的主要内容,如果未能解决你的问题,请参考以下文章

[Angular Tutorial] 1-Static Template

[Angular Tutorial] 0-Bootstraping

[Angular Tutorial] 3-Components

[Angular Tutorial] 3-Filtering Repeaters

[Angular Tutorial] 14 -Animations

[Angular Tutorial] 12 -Event Handlers