diff options
Diffstat (limited to 'docs/content/tutorial/step_03.ngdoc')
| -rwxr-xr-x | docs/content/tutorial/step_03.ngdoc | 63 |
1 files changed, 21 insertions, 42 deletions
diff --git a/docs/content/tutorial/step_03.ngdoc b/docs/content/tutorial/step_03.ngdoc index 33e97eed..8425ab9a 100755 --- a/docs/content/tutorial/step_03.ngdoc +++ b/docs/content/tutorial/step_03.ngdoc @@ -1,38 +1,24 @@ @ngdoc overview -@name Tutorial: Step 3 +@name Tutorial: 3 - Filtering Repeaters @description -<table id="tutorial_nav"> -<tr> - <td id="previous_step">{@link tutorial.step_02 Previous}</td> - <td id="step_result">{@link http://angular.github.com/angular-phonecat/step-3/app Live Demo}</td> - <td id="tut_home">{@link tutorial Tutorial Home}</td> -<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-2...step-3 Code -Diff}</td> - <td id="next_step">{@link tutorial.step_04 Next}</td> -</tr> -</table> -We did a lot of work in laying a foundation for the app in the last step, so now we'll do something -simple, and add full text search (yes, it will be simple!). 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. +<ul doc:tutorial-nav="3"></ul> -1. Reset your workspace to step 3. - git checkout -f step-3 +We did a lot of work in laying a foundation for the app in the last step, so now we'll do something +simple, and add full text search (yes, it will be simple!). 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. - or - ./goto_step.sh 3 +<doc:tutorial-instructions step="3"></doc:tutorial-instructions> -2. Refresh your browser or check the app out on {@link -http://angular.github.com/angular-phonecat/step-3/app angular's server}. The app now has a search box. The phone list on the page changes depending on what a user types @@ -73,7 +59,7 @@ __`app/index.html`:__ </pre> -We added a standard HTML `<input>` tag and use angular's {@link angular.Array.filter $filter} +We added a standard HTML `<input>` tag and use angular's {@link api/angular.array.filter $filter} function to process the input for the `ng:repeater`. @@ -94,7 +80,7 @@ the DOM to reflect the current state of the model. <img src="img/tutorial/tutorial_03_final.png"> -* Use of `$filter`. The {@link angular.Array.filter $filter} method, uses the `query` value, to +* Use of `$filter`. The {@link api/angular.array.filter $filter} method, uses the `query` value, to create a new array that contains only those records that match the `query`. @@ -155,7 +141,7 @@ To run the end-to-end test, open the following in a new browser tab: * node.js users: {@link http://localhost:8000/test/e2e/runner.html} * users with other http servers: -`http://localhost:[*port-number*]/[*context-path*]/test/e2e/runner.html` +`http://localhost:[port-number]/[context-path]/test/e2e/runner.html` * casual reader: {@link http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html} @@ -174,20 +160,20 @@ really is that easy to set up any functional, readable, end-to-end test. * Let's see how we can get the current value of the `query` model to appear in the HTML page title. -You might think you could just add the {{query}} to the title tag element as follows: + You might think you could just add the {{query}} to the title tag element as follows: <title>Google Phone Gallery: {{query}}</title> -However, when you reload the page, you won't see the expected result. This is because the "query" + However, when you reload the page, you won't see the expected result. This is because the "query" model lives in the scope defined by the body element: <body ng:controller="PhoneListCtrl"> -If you want to bind to the query model from the `<title>` element, you must __move__ the + If you want to bind to the query model from the `<title>` element, you must __move__ the `ng:controller` declaration to the HTML element because it is the common parent of both the body and title elements: @@ -195,23 +181,21 @@ and title elements: <html ng:controller="PhoneListCtrl"> -Be sure to *remove* the `ng:controller` declaration from the body element. + Be sure to *remove* the `ng:controller` declaration from the body element. * Add the following end-to-end test into the `describe` block within `test/e2e/scenarios.js`: <pre> - it('should display the current filter value within an element with id "status"', function() { + 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'); }); @@ -238,14 +222,9 @@ With full text search under our belt and a test to verify it, let's go to step 4 add sorting capability to the phone app. -<table id="tutorial_nav"> -<tr> - <td id="previous_step">{@link tutorial.step_02 Previous}</td> - <td id="step_result">{@link http://angular.github.com/angular-phonecat/step-3/app Live Demo}</td> - <td id="tut_home">{@link tutorial Tutorial Home}</td> -<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-2...step-3 Code -Diff}</td> - <td id="next_step">{@link tutorial.step_04 Next}</td> -</tr> -</table> + + +<ul doc:tutorial-nav="3"></ul> + + |