Angular系列----AngularJS入门教程04：迭代器过滤（转载）
我们在上一步做了很多基础性的训练，所以现在我们可以来做一些简单的事情喽。我们要加入全文检索功能（没错，这个真的非常简单！）。同时，我们也会写一个端到端测试，因为一个好的端到端测试可以帮上很大忙。它监视着你的应用，并且在发生回归的时候迅速报告。
请重置工作目录：
git checkout -f step-3我们的应用现在有了一个搜索框。注意到页面上的手机列表随着用户在搜索框中的输入而变化。
步骤2和步骤3之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。
控制器
我们对控制器不做任何修改。
模板
app/index.html
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
</div>
<div class="span10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>我们现在添加了一个<input>标签，并且使用AngularJS的$filter函数来处理ngRepeat指令的输入。
这样允许用户输入一个搜索条件，立刻就能看到对电话列表的搜索结果。我们来解释一下新的代码：
数据绑定： 这是AngularJS的一个核心特性。当页面加载的时候，AngularJS会根据输入框的属性值名字，将其与数据模型中相同名字的变量绑定在一起，以确保两者的同步性。
在这段代码中，用户在输入框中输入的数据名字称作
query，会立刻作为列表迭代器（phone in phones | filter:query`）其过滤器的输入。当数据模型引起迭代器输入变化的时候，迭代器可以高效得更新DOM将数据模型最新的状态反映出来。
使用
filter过滤器：filter函数使用query的值来创建一个只包含匹配query记录的新数组。ngRepeat会根据filter过滤器生成的手机记录数据数组来自动更新视图。整个过程对于开发者来说都是透明的。
测试
在步骤2，我们学习了编写和运行一个测试的方法。单元测试用来测试我们用js编写的控制器和其他组件都非常方便，但是不能方便的对DOM操作和应用集成进行测试。对于这些来说，端到端测试是一个更好的选择。
搜索特性是完全通过模板和数据绑定实现的，所以我们的第一个端到端测试就来验证这些特性是否符合我们的预期。
test/e2e/scenarios.js：
describe('PhoneCat App', function() {
describe('Phone list view', function() {
beforeEach(function() {
browser().navigateTo('../../app/index.html');
});
it('should filter the phone list as user types into the search box', function() {
expect(repeater('.phones li').count()).toBe(3);
input('query').enter('nexus');
expect(repeater('.phones li').count()).toBe(1);
input('query').enter('motorola');
expect(repeater('.phones li').count()).toBe(2);
});
});
});尽管这段测试代码的语法看起来和我们之前用Jasmine写的单元测试非常像，但是端到端测试使用的是AngularJS端到端测试器提供的接口。
运行一个端到端测试，在浏览器新标签页中打开下面任意一个：
- node.js用户：http://localhost:8000/test/e2e/runner.html
- 使用其他http服务器的用户：
http://localhost:[port-number]/[context-path]/test/e2e/runner.html - 访客：http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html
这个测试验证了搜素框和迭代器被正确地集成起来。你可以发现，在AngularJS里写一个端到端测试多么的简单。尽管这个例子仅仅是一个简单的测试，但是用它来构建任何一个复杂、可读的端到端测试都很容易。
练习
- 在
index.html模板中添加一个{{query}}绑定来实时显示query模型的当前值，然后观察他们是如何根据输入框中的值而变化。 现在我们来看一下我们怎么让
query模型的值出现在HTML的页面标题上。你或许认为像下面这样在
title标签上加上一个绑定就行了：<title>Google Phone Gallery: {{query}}</title>但是，当你重载页面的时候，你根本没办法得到期望的结果。这是因为
query模型仅仅在body元素定义的作用域内才有效。<body ng-controller="PhoneListCtrl">如果你想让
<title>元素绑定上query模型，你必须把ngController声明移动到HTML元素上，因为它是title和body元素的共同祖先。<html ng-app ng-controller="PhoneListCtrl">一定要注意把
body元素上的ng-controller声明给删了。当绑定两个花括号在
title元素上可以实现我们的目标，但是你或许发现了，页面正加载的时候它们已经显示给用户看了。一个更好的解决方案是使用ngBind或者ngBindTemplate指令，它们在页面加载时对用户是不可见的：<title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>在
test/e2e/scenarios.js的describe块中加入下面这些端到端测试代码：it('should display the current filter value within an element with id "status"',
function() {
expect(element('#status').text()).toMatch(/Current filter: \s*$/);
input('query').enter('nexus');
expect(element('#status').text()).toMatch(/Current filter: nexus\s*$/);
//alternative version of the last assertion that tests just the value of the binding
using('#status').expect(binding('query')).toBe('nexus');
});刷新浏览器，端到端测试器会报告测试失败。为了让测试通过，编辑
index.html，添加一个id为“status”的div或者p元素，内容是一个query绑定，再加上Current filter:前缀。例如：<div id="status">Current filter: {{query}}</div>在端到端测试里面加一条
pause();语句，重新跑一遍。你将发现测试器暂停了！这样允许你有机会在测试运行过程中查看你应用的状态。测试应用是实时的！你可以更换搜索内容来证明。稍有经验你就会知道，这对于在端到端测试中迅速找到问题是多么的关键。
总结
我们现在添加了全文搜索功能，并且完成一个测试证明了搜索是对的！现在让我们继续到步骤4来看看给我们的手机应用增加排序功能。
Angular系列----AngularJS入门教程04：迭代器过滤（转载）的更多相关文章
- Angular系列---- AngularJS入门教程03：AngularJS 模板（转载）
是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...
- Angular系列----AngularJS入门教程01：AngularJS模板 （转载）
是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...
- Angular系列----AngularJS入门教程00：引导程序（转载）
我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...
- Angular系列------AngularJS入门教程：导言和准备（转载）
学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设 ...
- Angular系列----AngularJS入门教程05：双向绑定（转载）
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...
- Angular系列----AngularJS入门教程02：静态模板（转载）
为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板. 在本步骤中,我们往HTML页面中添加两 ...
- [转载]AngularJS入门教程04：双向绑定
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...
- 【转载】图灵AngularJS入门教程
摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...
- AngularJS入门教程：日期格式化
AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...
随机推荐
- 【转】iOS超全开源框架、项目和学习资料汇总
iOS超全开源框架.项目和学习资料汇总(1)UI篇iOS超全开源框架.项目和学习资料汇总(2)动画篇iOS超全开源框架.项目和学习资料汇总(3)网络和Model篇iOS超全开源框架.项目和学习资料汇总 ...
- GBK、UTF8、UNICODE编码转换
string GBKToUTF8(const std::string& strGBK) { , strGBK.c_str(), -, NULL, ); WCHAR * wszUTF8 = ne ...
- Nginx负载均衡 后端服务器怎么共享Session 问题
Nginx负载均衡 Nginx负载均衡一些基础知识: nginx 的 upstream目前支持 4 种方式的分配 1).轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器,如果后端 ...
- struts1+spring+myeclipse +cxf 开发webservice以及普通java应用调用webservice的实例
Cxf + Spring+ myeclipse+ cxf 进行 Webservice服务端开发 使用Cxf开发webservice的服务端项目结构 Spring配置文件applicationCont ...
- Android 5.0 Default SMS App以及运营商授权SMS App
已同步更新至个人blog:http://dxjia.cn/2015/08/android-5-default-sms-app/ 题外话:博友们有没有好用的写博客客户端推荐啊,cnblogs推荐的win ...
- Gson 和 FastJson 性能测试
使用版本: compile 'com.google.code.gson:gson:2.7' compile 'com.alibaba:fastjson:1.2.17' 评测样板为一个People数组, ...
- android studio 编译加速
1. http://www.52codes.net/article/658.html 2.http://my.oschina.net/sammy1990/blog/388846 3.http://st ...
- ORA-01654 索引 无法通过 表空间扩展
"ORA-01654: 索引VGSM.AUDIT_DATA_I无法通过8192(在表空间KLDB中)扩展" 1.有可能是索引表空间不够 select sum(bytes/102 ...
- 网站CSS选择器性能讨论
CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素.作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面 ...
- strcpy和memcpy的区别
strcpy和memcpy都是标准C库函数,它们有下面的特点.strcpy提供了字符串的复制.即strcpy只用于字符串复制,并且它不仅复制字符串内容之外,还会复制字符串的结束符. 已知strcpy函 ...