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中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 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
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
php自动载入类用法实例分析
2016/06/24 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
srcElement表格样式
2006/09/03 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
如何提高数据访问速度
2016/12/26 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
python实现DES加密解密方法实例详解
2015/06/30 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
J2EE面试题大全
2016/08/06 面试题
夜大毕业自我鉴定
2013/10/11 职场文书
中文专业毕业生自荐信
2013/10/28 职场文书
写好自荐信的几个要点
2013/12/26 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
小学生成绩单评语
2014/12/31 职场文书
税务会计岗位职责
2015/04/02 职场文书
朋友聚会开场白
2015/06/01 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书