AngularJS入门教程之链接与图片模板详解


Posted in Javascript onAugust 19, 2016

这一步,你会为手机列表的手机添加缩略图以及一些链接,不过这些链接还不会起作用。接下来你会使用这些链接来分类显示手机的额外信息。

请重置工作目录:

git checkout -f step-6

现在你应该能够看到列表里面手机的图片和链接了。

步骤5和步骤6之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。

数据

注意到现在phones.json文件包含了唯一标识符和每一部手机的图像链接。这些url现在指向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/index.html

...
    <ul class="phones">
     <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
      <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
      <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
      <p>{{phone.snippet}}</p>
     </li>
    </ul>
...

这些链接将来会指向每一部电话的详细信息页。不过现在为了产生这些链接,我们在href属性里面使用我们早已熟悉的双括号数据绑定。在步骤2,我们添加了{{phone.name}}绑定作为元素内容。在这一步,我们在元素属性中使用{{phone.id}}绑定。

我们同样为每条记录添加手机图片,只需要使用ngSrc指令代替<img>的src属性标签就可以了。如果我们仅仅用一个正常src属性来进行绑定(<img class="diagram" src="{{phone.imageUrl}}">),浏览器会把AngularJS的{{ 表达式 }}标记直接进行字面解释,并且发起一个向非法urlhttp://localhost:8000/app/{{phone.imageUrl}}的请求。因为浏览器载入页面时,同时也会请求载入图片,AngularJS在页面载入完毕时才开始编译——浏览器请求载入图片时{{phone.imageUrl}}还没得到编译!有了这个ngSrc指令会避免产生这种情况,使用ngSrc指令防止浏览器产生一个指向非法地址的请求。

测试

test/e2e/scenarios.js

...
  it('should render phone specific links', function() {
   input('query').enter('nexus');
   element('.phones li a').click();
   expect(browser().location().url()).toBe('/phones/nexus-s');
  });
...

我们添加了一个新的端到端测试来验证应用为手机视图产生了正确的链接,上面就是我们的实现。

你现在可以刷新你的浏览器,并且用端到端测试器来观察测试的运行,或者你可以在AngularJS服务器上运行它们。

练习

将ng-src指令换成普通的src属性。用像Firebug,Chrome Web Inspector这样的工具,或者直接去看服务器的访问日志,你会发现你的应用向/app/%7B%7Bphone.imageUrl%7D%7D(或者/app/{{phone.imageUrl}})发送了一个非法请求。

这个问题是由于浏览器会在遇到img标签的时候立刻向还未得到编译的URL地址发送一个请求,AngularJS只有在页面载入完毕后才开始编译表达式从而得到正确的图片URL地址。

总结

如今你已经添加了手机图片和链接,转到步骤7,我们将学习AngularJS的布局模板以及AngularJS是如何轻易地为应用提供多重视图。

 以上就是对AngularJS 链接与图片模版的资料整理,后续继续补充相关知识,谢谢大家对本站的支持!

Javascript 相关文章推荐
一起来写段JS drag拖动代码
Dec 09 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
JS如何判断对象是否包含某个属性
Aug 29 Javascript
JS闭包原理及其使用场景解析
Dec 03 Javascript
element多个表单校验的实现
May 27 Javascript
AngularJS之依赖注入模拟实现
Aug 19 #Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 #Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 #Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 #Javascript
AngularJS入门教程之双向绑定详解
Aug 18 #Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 #Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 #Javascript
You might like
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
python实现比较文件内容异同
2018/06/22 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
python应用文件读取与登录注册功能
2019/09/23 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
村官学习十八大感想
2014/01/15 职场文书
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
硕士论文致谢范文
2015/05/14 职场文书
热血教师观后感
2015/06/10 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
nginx静态资源的服务器配置方法
2022/07/07 Servers