We did a lot of work in laying the foundation of our app in the last step, so now we'll do
something simple, and add full text search. We will also write an end-to-end test, because a good
end-to-end test is a good friend. It stays with your app, keeps an eye on it, and quickly detects
regressions.
__`app/index.html`:__
...
Fulltext Search:
{{phone.name}}
{{phone.snippet}}
...
__`test/e2e/scenarios.js`:__
/* jasmine-like end2end tests go here */
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);
});
});
});
## Discussion:
We continued using the same controller that we set up in Step 2, but we added the following
features to our app:
* __Search Box:__ A standard HTML `` tag combined with angular's {@link
angular.Array.filter $filter} utility (added to the repeater) lets a user type in search criteria
and immediately see the effects of their search on the phone list. This new code demonstrates the
following:
* Two way Data-binding. This is one of the core features in angular. When the page loads,
angular binds the name of the input box to a variable of the same name in the data model and
keeps the two in sync.
In this example, the data that you type into the input box (named __`query`__) is immediately
available as a filter input in the list repeater (`phone in phones.$filter(`__`query`__`)`).
Whenever the data model changes and this change causes the input to the repeater to change, the
repeater will efficiently update the DOM to reflect the current state of the model.
* Use of `$filter` in a template. The `$filter` function is one of several built-in {@link
angular.Array angular functions} that augment JavaScript arrays during their evaluation as
angular expressions. In {@link guide.expression angular expressions}, these array utilities are
available as array methods. (They are prefixed with a $ to avoid naming collisions.)
* `ng:repeat` automatically shrinks and grows the number of phones in the View, via DOM
manipulation that is completely transparent to the developer. If you've written any DOM
manipulation code, this should make you happy.
* __CSS:__ We added in some minimal CSS to the file we set up in Step 0: `./css/app.css`.
* __Testing:__ To run the end to end test, open http://localhost:8000/test/e2e/runner.html in
your browser. This end-to-end test shows the following:
* Proof that the search box and the repeater are correctly wired together.
* How easy it is to write end-to-end tests. This is just a simple test, but the point here is
to show how easy it is to set up a functional, readable, end-to-end test.