接上一篇文章,本文将主要介绍angularjs中的模板链接,和图像显示?

首先,切换分支,启动项目:

git checkout step-
npm start

1.效果

相较于前一篇文章,明显感觉多了图片,那么这些图片是怎么加载进去的呢?这里图片各不一样,如果用传统的方式去加载图片可能要写很多代码,这里看一下angularjs是如何实现的??

2.实现代码

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>

相较于上篇文章明显发现只多了下面这一句:

 <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>

那么先来看看数据源吧:

phones/phones.json

[
{
"age": 0,
"id": "motorola-xoom-with-wi-fi",
"imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg",
"name": "Motorola XOOM\u2122 with Wi-Fi",
"snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
},
........
]

imageUrl中存了图像的url路径.这里可以发现 a href中现在用的是{{phone.id}}进行绑定的数据源页面.

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

ngSrc指令的用法也比较简单:

<IMG
ng-src="">
...
</IMG>

src和ng-src的对比写法:

The buggy way to write it:
<img src="http://www.gravatar.com/avatar/{{hash}}"/> The correct way to write it:
<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>

为什么要这样写?官方解释是:

The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. 

浏览器将{{hash}}里的值,也即src属性值替换成文本以后可能就停止干活了.

3.测试:

test/e2e/scenarios.js:

...
it('should render phone specific links', function() {
var query = element(by.model('query'));
query.sendKeys('nexus');
element(by.css('.phones li a')).click();
browser.getLocationAbsUrl().then(function(url) {
expect(url.split('#')[1]).toBe('/phones/nexus-s');
});
});
...

测试结果:

amosli@amosli-pc:~/develop/angular-phonecat$ npm run protractor
... Finished in 6.789 seconds
tests, assertions, failures

AngularJS学习--- AngularJS中模板链接和图像 ng-src step6的更多相关文章

  1. 学习PHP中好玩的Gmagick图像操作扩展的使用

    在 PHP 的图像处理领域,要说最出名的 GD 库为什么好,那就是因为它不需要额外安装的别的什么图像处理工具,而且是随 PHP 源码一起发布的,只需要在安装 PHP 的时候添加上编译参数就可以了. G ...

  2. 使用Python中的HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies(二)(转)

    对搜索引擎.文件索引.文档转换.数据检索.站点备份或迁移等应用程序来说,经常用到对网页(即HTML文件)的解析处理.事实上,通过 Python语言提供的各种模块,我们无需借助Web服务器或者Web浏览 ...

  3. 【python】使用HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies

    一.从HTML文档中提取链接 模块HTMLParser,该模块使我们能够根据HTML文档中的标签来简洁.高效地解析HTML文档. 处理HTML文档的时候,我们常常需要从其中提取出所有的链接.使用HTM ...

  4. Python中的HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies(二)

    对搜索引擎.文件索引.文档转换.数据检索.站点备份或迁移等应用程序来说,经常用到对网页(即HTML文件)的解析处理.事实上,通过 Python语言提供的各种模块,我们无需借助Web服务器或者Web浏览 ...

  5. AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3

    1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...

  6. AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

    前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...

  7. AngularJS学习--- AngularJS中数据双向绑定(two-way data-binding) orderBy step4

    1.切换工作目录 git checkout step- #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-mo ...

  8. Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs、npm和karma

    1.下载angularjs 进入其官网下载:https://angularjs.org/‎,建议下载最新版的:https://ajax.googleapis.com/ajax/libs/angular ...

  9. Angularjs学习---ubuntu12.04中karma安装配置

    Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结   karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然 ...

随机推荐

  1. sql查看数据字典(表结构)

    SELECT (case when a.colorder=1 then d.name else null end) 表名, a.colorder 字段序号,a.name 字段名, (case when ...

  2. 也谈Oracle异常: ORA-06502: PL/SQL: 数字或值错误 : 字符串缓冲区太小

    场景: .Net程序调用Oracle方法 command.ExecuteNonQuery()执行存储过程;弹出如标题异常信息. 存储过程有4个输入参数,一个输出参数.一旦执行到给输出参数赋值的时候就报 ...

  3. java 网络编程复习(转)

    好久没有看过Java网络编程了,现在刚好公司有机会接触,顺便的拾起以前的东西 参照原博客:http://www.cnblogs.com/linzheng/archive/2011/01/23/1942 ...

  4. Hololens开发笔记之Gesture手势识别(单击,双击)

    本文使用手势识别实现识别单击及双击手势的功能,当单击Cube时改变颜色为蓝色,当双击Cube时改变颜色为绿色. 手势识别是HoloLens交互的重要输入方法之一.HoloLens提供了底层API和高层 ...

  5. PNG图片压缩工具

    https://tinypng.com/ 效果非常不错. 340k的图能压缩到140k左右. 视觉效果差距不大

  6. UUID生成

    >>>Arch Linux # uuidgen From: http://os.51cto.com/art/200709/56613.htm >>>Debian j ...

  7. python 向上取整ceil 向下取整floor 四舍五入round

    #encoding:utf-8 import math #向上取整 http://www.manongjc.com/article/1335.html print "math.ceil--- ...

  8. [转载]Macaca 测试 Android 应用:UIAutomator

    在用macaca进行自动化测试,想试一下移动端测试,看到这篇文章,尝试一下. 前言 用 Macaca 可以快速.便捷地进行安卓 native 的自动化测试,用简洁的 js 语法,写下用例,然后执行 M ...

  9. tinyxml学习2

    在TinyXML中,根据XML的各种元素来定义了一些类: TiXmlBase:整个TinyXML模型的基类. TiXmlAttribute:对应于XML中的元素的属性. TiXmlNode:对应于DO ...

  10. POS管理系统之设备出库

    JSP: <html>  <head>    <title>登录</title>   <style type="text/css&quo ...