diff options
Diffstat (limited to 'docs/content/tutorial/step_03.ngdoc')
| -rw-r--r-- | docs/content/tutorial/step_03.ngdoc | 56 |
1 files changed, 32 insertions, 24 deletions
diff --git a/docs/content/tutorial/step_03.ngdoc b/docs/content/tutorial/step_03.ngdoc index 1ebde553..ec546956 100644 --- a/docs/content/tutorial/step_03.ngdoc +++ b/docs/content/tutorial/step_03.ngdoc @@ -6,19 +6,19 @@ 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. +simple; we will 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. <doc:tutorial-instructions step="3"></doc:tutorial-instructions> -The app now has a search box. The phone list on the page changes depending on what a user types -into the search box. +The app now has a search box. Notice that the phone list on the page changes depending on what a +user types into the search box. -The most important changes are listed below. You can see the full diff on {@link -https://github.com/angular/angular-phonecat/compare/step-2...step-3 +The most important differences between Steps 2 and 3 are listed below. You can see the full diff on +{@link https://github.com/angular/angular-phonecat/compare/step-2...step-3 GitHub}: @@ -43,13 +43,13 @@ __`app/index.html`:__ ... </pre> -We added a standard HTML `<input>` tag and use angular's {@link api/angular.Array.filter $filter} +We added a standard HTML `<input>` tag and used angular's {@link api/angular.Array.filter $filter} function to process the input for the `ng:repeater`. This lets a user enter search criteria and immediately see the effects of their search on the phone -list. This new code demonstrates the following: +list. This new code demonstrates the following: -* Data-binding. This is one of the core features in angular. When the page loads, angular binds the +* 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 code, the data that a user types into the input box (named __`query`__) is immediately @@ -59,7 +59,7 @@ the DOM to reflect the current state of the model. <img src="img/tutorial/tutorial_03_final.png"> -* Use of `$filter`. The {@link api/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`. `ng:repeat` automatically updates the view in response to the changing number of phones returned @@ -67,7 +67,7 @@ by the `$filter`. The process is completely transparent to the developer. ## Test -In step 2, we learned how to write and run unit tests. Unit tests are perfect for testing +In Step 2, we learned how to write and run unit tests. Unit tests are perfect for testing controllers and other components of our application written in JavaScript, but they can't easily test DOM manipulation or the wiring of our application. For these, an end-to-end test is a much better choice. @@ -101,9 +101,9 @@ describe('PhoneCat App', function() { Even though the syntax of this test looks very much like our controller unit test written with Jasmine, the end-to-end test uses APIs of {@link https://docs.google.com/document/d/11L8htLKrh6c92foV71ytYpiKkeKpM4_a5-9c3HywfIc/edit?hl=en&pli=1# -angular's end-to-end test runner}. +Angular's end-to-end test runner}. -To run the end-to-end test, open the following in a new browser tab: +To run the end-to-end test, open one of the following in a new browser tab: * node.js users: {@link http://localhost:8000/test/e2e/runner.html} * users with other http servers: @@ -111,7 +111,7 @@ To run the end-to-end test, open the following in a new browser tab: * casual reader: {@link http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html} This test verifies that the search box and the repeater are correctly wired together. Notice how -easy it is to write end-to-end tests in angular. Although this example is for a simple test, it +easy it is to write end-to-end tests in Angular. Although this example is for a simple test, it really is that easy to set up any functional, readable, end-to-end test. # Experiments @@ -138,6 +138,14 @@ and title elements: Be sure to *remove* the `ng:controller` declaration from the body element. + While using double curlies works fine in within the title element, you might have noticed that +for a split second they are actually displayed to the user while the page is loading. A better +solution would be to use the {@link api/angular.directive.ng:bind ng:bind} or {@link +api/angular.directive.ng:bind-template ng:bind-template} directives, which are invisible to the +user while the page is loading: + + <title ng:bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title> + * Add the following end-to-end test into the `describe` block within `test/e2e/scenarios.js`: <pre> @@ -154,20 +162,20 @@ and title elements: }); </pre> - Refresh the browser tab with end-to-end test runner to see the test fail. Now add a `div` or `p` -element with `id` `"status"` and content with the `query` binding into the `index.html` template to -make the test pass. + Refresh the browser tab with the end-to-end test runner to see the test fail. To make the test +pass, edit the `index.html` template to add a `div` or `p` element with `id` `"status"` and content +with the `query` binding. -* Add a `pause()` statement into an end-to-end test and rerun it. You'll see the runner pausing, -giving you the opportunity to explore the state of your application displayed in the browser. The -app is live! Change the search query to prove it. This is great for troubleshooting end-to-end -tests. +* Add a `pause()` statement into an end-to-end test and rerun it. You'll see the runner pause; this +gives you the opportunity to explore the state of your application while it is displayed in the +browser. The app is live! You can change the search query to prove it. Notice how useful this is +for troubleshooting end-to-end tests. # Summary -With full text search under our belt and a test to verify it, let's go to step 4 to learn how to -add sorting capability to the phone app. +We have now added full text search and included a test to verify that search works! Now let's go on +to {@link step_04 step 4} to learn how to add sorting capability to the phone app. <ul doc:tutorial-nav="3"></ul> |