diff options
Diffstat (limited to 'docs/content/tutorial')
| -rw-r--r-- | docs/content/tutorial/step_00.ngdoc | 21 | ||||
| -rw-r--r-- | docs/content/tutorial/step_02.ngdoc | 4 | ||||
| -rw-r--r-- | docs/content/tutorial/step_03.ngdoc | 12 |
3 files changed, 19 insertions, 18 deletions
diff --git a/docs/content/tutorial/step_00.ngdoc b/docs/content/tutorial/step_00.ngdoc index 643ec23b..63123926 100644 --- a/docs/content/tutorial/step_00.ngdoc +++ b/docs/content/tutorial/step_00.ngdoc @@ -172,9 +172,10 @@ __`app/index.html`:__ <html ng-app> - `ng-app` directive is a special tag used to flag an element which Angular should consider to be - the root element of our application. This gives application developers the freedom to tell Angular - if the entire html page or only a portion of it should be treated as the Angular application. + The `ng-app` attribute is represents an Angular directive used to flag an element which Angular + should consider to be the root element of our application. This gives application developers the + freedom to tell Angular if the entire html page or only a portion of it should be treated as the + Angular application. * AngularJS script tag: @@ -182,9 +183,9 @@ __`app/index.html`:__ This code downloads the `angular.js` script and registers a callback that will be executed by the browser when the containing HTML page is fully downloaded. When the callback is executed, Angular -looks for the {@link api/angular.module.ng.$compileProvider.directive.ng-app ng-app} directive. If -Angular finds `ng-app`, it will bootstrap the application with the root of the application DOM being -the element on which the `ng-app` directive was defined. +looks for the {@link api/angular.module.ng.$compileProvider.directive.ngApp ngApp} directive. If +Angular finds the directive, it will bootstrap the application with the root of the application DOM +being the element on which the `ngApp` directive was defined. * Double-curly binding with an expression: @@ -207,7 +208,7 @@ the element on which the `ng-app` directive was defined. ## Bootstrapping AngularJS apps -Bootstrapping AngularJS apps automatically using the `ng-app` directive is very easy and suitable +Bootstrapping AngularJS apps automatically using the `ngApp` directive is very easy and suitable for most cases. In advanced cases, such as when using script loaders, you can use {@link guide/dev_guide.bootstrap.manual_bootstrap imperative / manual way} to bootstrap the app. @@ -219,7 +220,7 @@ There are 3 important things that happen during the app bootstrap: 2. The injector will then create the {@link api/angular.module.ng.$rootScope root scope} that will become the context for the model of our application. -3. Angular will then "compile" the DOM starting at the `ng-app` root element, processing any +3. Angular will then "compile" the DOM starting at the `ngApp` root element, processing any directives and bindings found along the way. @@ -267,6 +268,6 @@ Now let's go to {@link step_01 step 1} and add some content to the web app. Move elsewhere: Note: During the bootstrap the injector and the root scope will then be associated with the - element on which `ng-app` was declared, so when debugging the app you can retrieve them from - browser console via `angular.element(rootElement).scope()` and + element on which the `ngApp` directive was declared, so when debugging the app you can retrieve + them from browser console via `angular.element(rootElement).scope()` and `angular.element(rootElement).injector()`. diff --git a/docs/content/tutorial/step_02.ngdoc b/docs/content/tutorial/step_02.ngdoc index e0ca2829..6968f479 100644 --- a/docs/content/tutorial/step_02.ngdoc +++ b/docs/content/tutorial/step_02.ngdoc @@ -52,7 +52,7 @@ __`app/index.html`:__ </pre> We replaced the hard-coded phone list with the -{@link api/angular.module.ng.$compileProvider.directive.ng-repeat ng-repeat directive} and two +{@link api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat directive} and two {@link guide/dev_guide.expressions Angular expressions} enclosed in curly braces: `{{phone.name}}` and `{{phone.snippet}}`: @@ -94,7 +94,7 @@ as follows: * `PhoneListCtrl` — the name of our controller function (located in the JavaScript file `controllers.js`), matches the value of the -{@link api/angular.module.ng.$compileProvider.directive.ng-controller ng-controller} directive located +{@link api/angular.module.ng.$compileProvider.directive.ngController ngController} directive located on the `<body>` tag. * The phone data is then attached to the *scope* (`$scope`) that was injected into our controller diff --git a/docs/content/tutorial/step_03.ngdoc b/docs/content/tutorial/step_03.ngdoc index 3c997337..a8db32bc 100644 --- a/docs/content/tutorial/step_03.ngdoc +++ b/docs/content/tutorial/step_03.ngdoc @@ -45,7 +45,7 @@ __`app/index.html`:__ We added a standard HTML `<input>` tag and used angular's {@link api/angular.module.ng.$filter.filter $filter} function to process the input for the -`ng-repeater`. +`ngRepeate` directive. 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: @@ -63,7 +63,7 @@ the DOM to reflect the current state of the model. * 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 + `ngRepeat` 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 @@ -131,7 +131,7 @@ 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 -`ng-controller` declaration to the HTML element because it is the common parent of both the body +`ngController` declaration to the HTML element because it is the common parent of both the body and title elements: <html ng-app ng-controller="PhoneListCtrl"> @@ -140,9 +140,9 @@ and title elements: 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.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: +solution would be to use the {@link api/angular.module.ng.$compileProvider.directive.ngBind +ngBind} or {@link api/angular.module.ng.$compileProvider.directive.ngBindTemplate +ngBindTemplate} directives, which are invisible to the user while the page is loading: <title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title> |
