AngularJS学习笔记之全文检索

2015年02月27日 javascript 暂无评论 阅读 38 views 次
请重置工作目录:
git checkout -f step-3

C:Usersdellnodejsstudyangular-phonecatscriptsprivate>git checkout -f step-3
HEAD is now at 117af67... step-3 interactive search


模板

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>

 

 

启动服务

C:Usersdellnodejsstudyangular-phonecat>npm start

> angular-phonecat@0.0.0 prestart C:Usersdellnodejsstudyangular-phonecat
> npm install

npm WARN package.json karma-chrome-launcher@0.1.7 No README data

> angular-phonecat@0.0.0 postinstall C:Usersdellnodejsstudyangular-phonecat
> bower install
> angular-phonecat@0.0.0 start C:Usersdellnodejsstudyangular-phonecat
> http-server -a 0.0.0.0 -p 8000

Starting up http-server, serving ./ on port: 8000
Hit CTRL-C to stop the server

2015-02-27_093815

我们现在添加了一个<input>标签,并且使用AngularJS的$filter函数来处理ngRepeat指令的输入。

这样允许用户输入一个搜索条件,立刻就能看到对电话列表的搜索结果。我们来解释一下新的代码:

  • 数据绑定: 这是AngularJS的一个核心特性。当页面加载的时候,AngularJS会根据输入框的属性值名字,将其与数据模型中相同名字的变量绑定在一起,以确保两者的同步性。在这段代码中,用户在输入框中输入的数据名字称作query,会立刻作为列表迭代器(phone in phones | filter:query`)其过滤器的输入。当数据模型引起迭代器输入变化的时候,迭代器可以高效得更新DOM将数据模型最新的状态反映出来。

tutorial_03

  • 使用filter过滤器:filter函数使用query的值来创建一个只包含匹配query记录的新数组。ngRepeat会根据filter过滤器生成的手机记录数据数组来自动更新视图。整个过程对于开发者来说都是透明的。

测试

在测试之前,先安装环境

npm install chromedriver

在步骤2,我们学习了编写和运行一个测试的方法。单元测试用来测试我们用js编写的控制器和其他组件都非常方便,但是不能方便的对DOM操作和应用集成进行测试。对于这些来说,端到端测试是一个更好的选择。

搜索特性是完全通过模板和数据绑定实现的,所以我们的第一个端到端测试就来验证这些特性是否符合我们的预期。

test/e2e/scenarios.js:

describe('PhoneCat App', function() {

 describe('Phone list view', function() {

 beforeEach(function() {
 browser.get('app/index.html');
 });


 it('should filter the phone list as a user types into the search box', function() {

 var phoneList = element.all(by.repeater('phone in phones'));
 var query = element(by.model('query'));

 expect(phoneList.count()).toBe(3);

 query.sendKeys('nexus');
 expect(phoneList.count()).toBe(1);

 query.clear();
 query.sendKeys('motorola');
 expect(phoneList.count()).toBe(2);
 });
 });
});

 

 

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: