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

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

最重要的不同在下面列出。您可以点击这里在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的更多相关文章

  1. [Angular Tutorial]PhoneCat Tutorial App

    (注:曾经在<不敢止步>一书中看到学到一个观点,作者认为学习一门技术最好的方法就是翻译某部领域书籍.这里我决定做一次尝试,接下来花1个月左右时间,将Angular Tutorial Pho ...

  2. [Angular Tutorial] 10 -More Templating

    在这一步中,我们会实现电话细节的视图,这在用户点击列表中的一部电话时被展示. ·当您点击列表中的一部电话时,带有电话特定信息的电话细节页面将被展示. 我们打算使用$http来获取我们的数据,以此来实现 ...

  3. [Angular Tutorial] 3-Components

    在先前的步骤中,我们看到了一个控制器和一个模板如何一起工作来将一个静态的HTML文件转化为动态页面(view).一般说来,这在单页应用中一种非常常见的模式(在Angular应用中尤其是这样): ·客户 ...

  4. [Angular Tutorial] 7-XHRs & Dependency Injection

    我们受够了在应用中用硬编码的方法嵌入三部电话!现在让我们用Angular内建的叫做$http的服务来从我们的服务器获取更大的数据集吧.我们将会使用Angular的依赖注入来为PhoneListCtrl ...

  5. [Angular Tutorial] 0-Bootstraping

    在这一节的tutorial中,您将会逐渐熟悉AngularJS phonecat app的最重要的源代码文件.您也将学到如何将开发服务器与angular-seed绑定到一起,并且在浏览器中运行应用. ...

  6. [Angular Tutorial] 14 -Animations

    在这一步中,我们将会通过在我们先前创建的模板代码中添加CSS和JavaScript动画效果来扩展我们的web应用. ·我们现在使用ngAnimate模块来允许动画效果贯穿整个应用. ·我们也依赖于自带 ...

  7. [Angular Tutorial] 13 -REST and Custom Services

    在这一步中,我们将会改变我们获取数据的方式. ·我们定义一个代表RESTful客户端的自定义服务.使用这个客户端,我们可以用一种更简单的方法向服务端请求数据,而不用处理更底层的$httpAPI,HTT ...

  8. [Angular Tutorial] 12 -Event Handlers

    在这一步中,您将会在电话细节页面添加一个可点击的电话图片转换器. ·电话细节页面展示了当前电话的一张大图片和几张相对较小的略图.如果我们能仅仅通过点击略图就能把大图片换成略图就好了.让我们看看用Ang ...

  9. [Angular Tutorial] 11 -Custom Filters

    在这一步中您将学到如何创建您自己的展示过滤器. ·在先前的步骤中,细节页面展示“true”或“false”来显示某部电话是否有某项功能.在这一步中,我们将使用自定义的过滤器来将这些个字符串转化成符号: ...

随机推荐

  1. HDU 3346 Lucky Number

    水题 #include<cstdio> #include<cstring> #include<cmath> #include<algorithm> us ...

  2. BootStrap详解之(一)

    一.BootStrap简介 BootStrap是一个用来构建网站前段框架的一个插件.无论你是想构建应用程序.博客还是CMS网站,Bootstrap都特别的使用,只要你想得到,它就能行.Bootstra ...

  3. HBase的Shell命令

    1.HBase提供了一个shell的终端给用户交互 2.HBase Shell的DDL操作 (1)先进入HBase的 Shell命令行,即HBASE_HOME/bin/hbase shell …… & ...

  4. 使用curl获取乱码问题

    今天通过curl获取百度地图接口数据,获取到居然是乱码,于是我查看是不是编码问题,发现返回的编码和自己的编码都是utf-8, 继续找原因,发现header报文中  Content-encoding 为 ...

  5. 实例:SSh结合Easyui实现Datagrid的分页显示

    近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...

  6. zencart的modules下数据库操作templates排版和common首页引用

    把这个学会,zencart的数据库操作,以及各种函数的调用基本会了 这个东西非常有用,你需要认真看一下,不要闲代码多. 如何在数据库中调出自己想要的产品,让它显示在首页. 据我本人不科学的理解,在in ...

  7. zepto学习之路--源代码提取

    最近在看zepto的源代码,把一些有用的函数摘出来,看看zepto是怎么实现的,自己做的时候也可以用.说实话,zepto的实现有一些看起来还是很晦涩的,可能是自己的水平不够,看不透作者的真正的意图. ...

  8. 关于js的连续赋值

    首先,来看一个经典的案例: <script>var a = {n: 1}var b = a;a.x = a = {n: 2}alert(a.x);alert(b.x);</scrip ...

  9. 二叉堆(C#)

    参考:http://www.cnblogs.com/skywang12345/p/3610390.html using System; using System.Collections.Generic ...

  10. javascript 基础系列(一)

    闭包: function 内部访问外部的variables function f(){ alert(ysr); } 报错了. Certain language constructs block the ...