From 7f1e2e48467f80cc083d24b44f088620e4e7bcb6 Mon Sep 17 00:00:00 2001 From: Igor Minar Date: Mon, 6 Jun 2011 08:50:35 -0700 Subject: new batch of docs --- docs/content/tutorial/step_03.ngdoc | 63 +++++++++++++------------------------ 1 file changed, 21 insertions(+), 42 deletions(-) (limited to 'docs/content/tutorial/step_03.ngdoc') 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 - - - - - - - - -
{@link tutorial.step_02 Previous}{@link http://angular.github.com/angular-phonecat/step-3/app Live Demo}{@link tutorial Tutorial Home}{@link https://github.com/angular/angular-phonecat/compare/step-2...step-3 Code -Diff}{@link tutorial.step_04 Next}
-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. + -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 + -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`:__ -We added a standard HTML `` tag and use angular's {@link angular.Array.filter $filter} +We added a standard HTML `` 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. -* 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: Google Phone Gallery: {{query}} -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: -If you want to bind to the query model from the `` 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> + + -- cgit v1.2.3