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 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
vue element table中自定义一些input的验证操作
Jul 18 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
如何使用python爬取csdn博客访问量
2016/02/14 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
房地产活动策划方案
2014/05/14 职场文书
基石观后感
2015/06/12 职场文书
德能勤绩工作总结
2015/08/11 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android
Mysql数据库group by原理详解
2022/07/07 MySQL