From 53b2254ea70019937463d8e079e1991b3d3d1d8b Mon Sep 17 00:00:00 2001 From: Igor Minar Date: Mon, 2 Apr 2012 08:32:30 -0700 Subject: docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly --- docs/content/tutorial/step_03.ngdoc | 37 +++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 18 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 fef4743f..3c997337 100644 --- a/docs/content/tutorial/step_03.ngdoc +++ b/docs/content/tutorial/step_03.ngdoc @@ -32,10 +32,10 @@ We made no changes to the controller. __`app/index.html`:__ 
 ...
-   Fulltext Search: 
+   Fulltext Search:
-We added a standard HTML `` tag and used angular's {@link api/angular.module.ng.$filter.filter $filter} -function to process the input for the `ng:repeater`. +We added a standard HTML `` tag and used angular's +{@link api/angular.module.ng.$filter.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: @@ -53,17 +54,17 @@ list. This new code demonstrates the following: 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 -available as a filter input in the list repeater (`phone in phones.$filter(`__`query`__`)`). When +available as a filter input in the list repeater (`phone in phones | filter(`__`query`__`)`). When changes to the data model cause the repeater's input to change, the repeater efficiently updates the DOM to reflect the current state of the model. - + -* Use of `$filter`. The {@link api/angular.module.ng.$filter.filter $filter} method uses the `query` value to -create a new array that contains only those records that match the `query`. +* Use of `filter` filter. The {@link api/angular.module.ng.$filter.filter filter} function 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 -by the `$filter`. The process is completely transparent to the developer. + `ng-repeat` automatically updates the view in response to the changing number of phones returned +by the `filter` filter. The process is completely transparent to the developer. ## Test @@ -127,23 +128,23 @@ really is that easy to set up any functional, readable, end-to-end test. 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 -`ng:controller` declaration to the HTML element because it is the common parent of both the body +`ng-controller` declaration to the HTML element because it is the common parent of both the body and title elements: - <html ng:controller="PhoneListCtrl"> + <html ng-app 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. 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: +solution would be to use the {@link api/angular.module.ng.$compileProvider.directive.ng-bind +ng-bind} or {@link api/angular.module.ng.$compileProvider.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 + Google Phone Gallery * Add the following end-to-end test into the `describe` block within `test/e2e/scenarios.js`: -- cgit v1.2.3