我们在上一步做了很多基础性的训练，所以现在我们可以来做一些简单的事情喽。我们要加入全文检索功能（没错，这个真的非常简单！）。同时，我们也会写一个端到端测试，因为一个好的端到端测试可以帮上很大忙。它监视着你的应用，并且在发生回归的时候迅速报告。

请重置工作目录：

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端到端测试器提供的接口。

运行一个端到端测试，在浏览器新标签页中打开下面任意一个：

这个测试验证了搜素框和迭代器被正确地集成起来。你可以发现，在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来看看给我们的手机应用增加排序功能。

[转载]AngularJS入门教程03：迭代器的更多相关文章

  1. Angular系列---- AngularJS入门教程03：AngularJS 模板（转载）

    是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...

  2. [转载]AngularJS入门教程02：AngularJS模板

    是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...

  3. [转载]AngularJS入门教程04：双向绑定

    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...

  4. [转载]AngularJS入门教程00：引导程序

    我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...

  5. [转载]AngularJS入门教程01：静态模板

    为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板. 在本步骤中,我们往HTML页面中添加两 ...

  6. 【转载】图灵AngularJS入门教程

    摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...

  7. AngularJS入门教程：日期格式化

    AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...

  8. AngularJS 入门教程 $http is not defined 解决方案

    采用从git下载的教程, www.angularjs.cn 版本的 入门教程,在第5步的时候 签出文件: git checkout -f step-5 运行将会提示: $http is not def ...

  9. Angular系列----AngularJS入门教程04：迭代器过滤（转载）

    我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视 ...

随机推荐

  1. Codeforces Round #518 (Div. 2) D（计数DP）

    #include<bits/stdc++.h>using namespace std;const long long mod=998244353;int n;int a[100007];l ...

  2. ASP.NET控件之RegularExpressValidator控件

    作用:对Textbox或者其他输入框进行正则验证: 属性:ControlToValidate:要验证的控件: ErrorMessage:错误提示信息: ValidationExpression:正则表 ...

  3. bzoj3720: Gty的妹子树（树分块）

    传送门 好珂怕…… 树分块是什么东西啊……感觉好暴力…… 直接贴一下好了->这里 //minamoto #include<iostream> #include<cstdio&g ...

  4. 洛谷 P1547 Out of Hay （最小生成树）

    嗯... 题目链接:https://www.luogu.org/problemnew/show/P1547 思路: 嗯...既然题中已经说了是最小生成树,那么是需要在最小生成树的模板上稍作修改即可.要 ...

  5. 利用git reflog找回错误的重置

    在开发中经常需要reset分支,如果在reset前没有记住分支指向的提交ID,想要重置回原来的提交恐怕大多数开发者是重新拉取远程版本库,再rebase分支.但如果连不上远程版本库或没有远程版本怎么办呢 ...

  6. spring定时任务的集中实现

    转载博主:感谢博主 http://gong1208.iteye.com/blog/1773177 Spring定时任务的几种实现 近日项目开发中需要执行一些定时任务,比如需要在每天凌晨时候,分析一次前 ...

  7. java——String、StringBuffer、StringBuilder、包装类、单双引号

    String: String是一个特殊的类,被定义为final类型,为字符串常量,同样的字符串在常量池中不能重复. 但是由于使用关键字new创建新的字符串,java会在对中分配新的空间,这样即使字符串 ...

  8. Spring学习（六）整合web开发

    https://www.cnblogs.com/Leo_wl/p/4459274.html 1.加载Spring核心配置文件 //1.加载Spring配置文件,根据创建对对象 ApplicationC ...

  9. Codeforces Beta Round #79 (Div. 1 Only) B. Buses 树状数组

    http://codeforces.com/contest/101/problem/B 给定一个数n,起点是0  终点是n,有m两车,每辆车是从s开去t的,我们只能从[s,s+1,s+2....t-1 ...

  10. linux安装gcc和gcc-c++

    有些VPS中使用的是精简版Linux,上篇linux下自动备份blog到dropbox中的gcc和gcc-c++编译器没安装,无法编译出链接的"hostid",下面是Linux安装 ...