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

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

最重要的不同在下面列出。您可以点击这里在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. linux无法解析主机地址(could not resolve host)解决办法

    修改/etc/hosts文件: ip地址 域名 例:192.30.253.120 codeload.github.com

  2. Win7与Ubuntu双系统时卸载Ubuntu的方法

    Win7与Ubuntu双系统时卸载Ubuntu的方法 [日期:2010-03-26] 来源:Ubuntu社区  作者:Ubuntu编辑 [字体:大 中 小]       1. 下载MBRFix工具,放 ...

  3. Chapter 1 First Sight——13

    It was just drizzling still, not enough to soak me through immediately as I reached for the house ke ...

  4. opencart配置税率

    1.System->Localisation->Geo Zones新增税收区域 2.System->Localisation->Taxes->Tax Rates新增税率 ...

  5. ButterKnife-5.1.2.jar(较低版本的ButterKnife)使用方法

    ButterKnife注解是编译时注解,Xutils是运行时注解.很明显编译时注解性能更高 一.先配置好环境 1.在工程上右键,选Properties,然后选Java Compiler,选Annota ...

  6. spring MVC之返回JSON数据(Spring3.0 MVC)

    方式一:使用ModelAndView的contentType是"application/json" 方式二:返回String的            contentType是&qu ...

  7. 简单的js实现网页时钟

    js实现时钟. <div id="clock"></div> <script type="text/javascript"> ...

  8. android脚步---APP引导页添加

    package com.leadcore.uudatoutie; import java.util.ArrayList; import com.leadcore.uudatoutie.R; impor ...

  9. 文件夹添加 IIS 应用程序池用户权限

    http://serverfault.com/questions/81165/how-to-assign-permissions-to-applicationpoolidentity-account ...

  10. Swift中异常处理(续集.正则)

    正则表达式 1.创建正则表达式的规则 let pattern = "abc" 2.创建正则表达式对象 // 方式一:try方式 do { let regex = try NSReg ...