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 相关文章推荐
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 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
基于mysql的论坛(3)
2006/10/09 PHP
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
php获取随机数组列表的方法
2014/11/13 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
详解VUE 数组更新
2017/12/16 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
Python中的闭包总结
2014/09/18 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
Python函数和模块的使用总结
2019/05/20 Python
简单了解python关系(比较)运算符
2019/07/08 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
Python中Yield的基本用法
2020/10/18 Python
表彰大会主持词
2014/03/26 职场文书
考试后的感想
2015/08/07 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis