【一起学AngularJS】第八章、添加链接和图片
2016-03-17 14:45
465 查看
本章中,我们将为手机列表中的每个手机添加缩略图以及链接。以后的步骤中我们就可以使用这些链接来展示目录中每个手机的详细信息了。
下面我们把实验代码切换到step-6分支:
如果之前你已经运行了网站,只需要刷新你的浏览器来查看最新的效果。点这里查看在线的效果。
现在我们已经很熟悉数据绑定了,就是使用两对花括号括起来的表达式。我们使用
我们还为每条手机记录配了一张缩略图(
我们添加了一个E2E测试来验证页面上是否能正确的生成手机的图片链接。
你可以通过
下面我们把实验代码切换到step-6分支:
git checkout -f step-6
如果之前你已经运行了网站,只需要刷新你的浏览器来查看最新的效果。点这里查看在线的效果。
数据
phones.json中存放了每个手机的ID和图片URL地址。这些URL地址指向
app/img/phoens目录。
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}}" alt="{{phone.name}}"></a> <a href="#/phones/{{phone.id}}">{{phone.name}}</a> <p>{{phone.snippet}}</p> </li> </ul> ...
现在我们已经很熟悉数据绑定了,就是使用两对花括号括起来的表达式。我们使用
{{phone.id}}来动态设置每个手机的详情链接URL。
我们还为每条手机记录配了一张缩略图(
<img>标签)。这里比较有趣的是,我们在设置图片的URL地址的时候,并没有使用src属性,而是使用了
ngSrc指令,这是因为,如果直接在src中使用表达式,表达式不会被执行,而是被当作路径字符,所以如果这个表达式被放入src的话,最终得到的图片URL为:
http://localhost:8000/app/{{phone.imageUrl}}。【注解:其实这个设计我还没想明白用意,为啥href可以直接写入表达式,src却不行, it does not make sense.】
测试
test/e2e/scenarios.js
... it('should render phone specific links', function() { var query = element(by.model('query')); query.sendKeys('nexus'); element.all(by.css('.phones li a')).first().click(); browser.getLocationAbsUrl().then(function(url) { expect(url).toBe('/phones/nexus-s'); }); }); ...
我们添加了一个E2E测试来验证页面上是否能正确的生成手机的图片链接。
你可以通过
npm run protractor来运行这个测试用例。
实验小能手
使用src属性替换
<img>标签中的
ngSrc命令(对应
ng-src属性)。可以使用FireBug、Chrome的web查看器(F12)或者查看服务器日志,来确认src中实际的链接是不是变成了
/app/%7B%7Bphone.imageUrl%7D%7D(或者是
/app/{{phone.imageUrl}}).
总结
现在你已经学会如何添加图片和链接了,下一章我们将学习Angular的模版布局以及如何轻而易举的创建多视图应用。相关文章推荐
- AngularJS基础教程之简单介绍
- AngularJS中处理多个promise的方式
- angularJS 中$attrs方法使用指南
- 深入浅析AngularJS和DataModel
- 简述AngularJS相关的一些编程思想
- AngularJS的一些基本样式初窥
- 简单讲解AngularJS的Routing路由的定义与使用
- 创建你的第一个AngularJS应用的方法
- 详解AngularJS中的作用域
- Angular发布1.5正式版,专注于向Angular 2的过渡
- 简介AngularJS的视图功能应用
- AngularJS语法详解
- AngularJS 2.0新特性有哪些
- AngualrJS中的Directive制作一个菜单
- 在AngularJS框架中处理数据建模的方式解析
- angularJS与bootstrap结合实现动态加载弹出提示内容
- AngularJS实现全选反选功能
- angularjs中的e2e测试实例
- 简介AngularJS中使用factory和service的方法
- AngularJS中监视Scope变量以及外部调用Scope方法