@@ -38,7 +38,7 @@ From a high-level, here's what Angular does during the initialization process: 1. The browser loads the page, and then runs the Angular script. Angular then waits for the `DOMContentLoaded` (or 'Load') event to attempt to initialize. -2. Angular looks for the `ng-app` directive. If found it compilies the DOM element containing `ng-app` and its children. +2. Angular looks for the `ngApp` directive. If found it compilies the DOM element containing `ngApp` and its children. 3. Angular creates a global variable `angular` and binds all Angular APIs to this object's fields. diff --git a/docs/content/guide/dev_guide.bootstrap.manual_bootstrap.ngdoc b/docs/content/guide/dev_guide.bootstrap.manual_bootstrap.ngdoc index 9f6464b2..c32c2c1a 100644 --- a/docs/content/guide/dev_guide.bootstrap.manual_bootstrap.ngdoc +++ b/docs/content/guide/dev_guide.bootstrap.manual_bootstrap.ngdoc @@ -2,14 +2,14 @@ @name Developer Guide: Initializing Angular: Manual Initialization @description -In the vast majority of cases you'll want to let Angular handle initialization automatically. -If, however, you need to delay Angular from managing the page right after the DOMContentLoaded +In the vast majority of cases you'll want to let Angular handle initialization automatically. +If, however, you need to delay Angular from managing the page right after the DOMContentLoaded event fires, you'll need to control this initialization manually. -To initialize Angular -- after you've done your own special-purpose initialization -- just call +To initialize Angular -- after you've done your own special-purpose initialization -- just call the {@link api/angular.bootstrap bootstrap()} function with the HTML container node that you want -Angular to manage. In automatic initialization you'd do this by adding the `ng-app` attribute to -the same node. Now, you won't use `ng-app` anywhere in your document. +Angular to manage. In automatic initialization you'd do this by adding the `ngApp` attribute to +the same node. Now, you won't use `ngApp` anywhere in your document. To show the contrast of manual vs. automatic initialization, this automatic method: diff --git a/docs/content/guide/dev_guide.bootstrap.ngdoc b/docs/content/guide/dev_guide.bootstrap.ngdoc index 5ca7d1a8..02351ede 100644 --- a/docs/content/guide/dev_guide.bootstrap.ngdoc +++ b/docs/content/guide/dev_guide.bootstrap.ngdoc @@ -7,7 +7,7 @@ Angular should process and manage the page. To initialize Angular you do the fol * Specify the Angular namespace in the `` page * Choose which flavor of Angular script to load (debug or production) -* Specify whether or not Angular should process and manage the page automatically (`ng-app`) +* Specify whether or not Angular should process and manage the page automatically (`ngApp`) The simplest way to initialize Angular is to load the Angular script and tell Angular to compile and manage the whole page. You do this as follows: diff --git a/docs/content/guide/dev_guide.di.understanding_di.ngdoc b/docs/content/guide/dev_guide.di.understanding_di.ngdoc index 9b48585c..23b22884 100644 --- a/docs/content/guide/dev_guide.di.understanding_di.ngdoc +++ b/docs/content/guide/dev_guide.di.understanding_di.ngdoc @@ -27,9 +27,9 @@ In the illustration above, the dependency injection sequence proceeds as follows 1. Module "phonecat" is created and all the service providers are registered with this module. (the "ng" module is created by Angular behind the scenes as well) -2. `ng-app` triggers bootstrap sequence on given element, during which angular creates injector, +2. `ngApp` triggers bootstrap sequence on given element, during which angular creates injector, loads "phonecat" and "ng" modules and compiles the template. -3. The `ng-controller` directive implicitly creates a new child scope and instantiates +3. The `ngController` directive implicitly creates a new child scope and instantiates `PhoneListCtrl` controller. 4. Injector identifies the `$http` service as `PhoneListCtrl` controller's only dependency. 5. Injector checks its instances cache whether the `$http` service has already been instantiated. diff --git a/docs/content/guide/dev_guide.forms.ngdoc b/docs/content/guide/dev_guide.forms.ngdoc index 0c3a7fc3..334c590d 100644 --- a/docs/content/guide/dev_guide.forms.ngdoc +++ b/docs/content/guide/dev_guide.forms.ngdoc @@ -12,9 +12,9 @@ Server-side validation is still necessary for a secure application. # Simple form -The key directive in understanding two-way data-binding is {@link api/angular.module.ng.$compileProvider.directive.ng-model ng-model}. -The `ng-model` provides the two-way data-binding by synchronizing the model to the view, as well as view to the model. -In addition it provides {@link api/angular.module.ng.$compileProvider.directive.ng-model.NgModelController API} for other directives to augment its behavior. +The key directive in understanding two-way data-binding is {@link api/angular.module.ng.$compileProvider.directive.ngModel ngModel}. +The `ngModel` directive provides the two-way data-binding by synchronizing the model to the view, as well as view to the model. +In addition it provides {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController API} for other directives to augment its behavior. @@ -56,7 +56,7 @@ Note that `novalidate` is used to disable browser's native form validation. # Using CSS classes -To allow styling of form as well as controls, `ng-model` add these CSS classes: +To allow styling of form as well as controls, `ngModel` add these CSS classes: - `ng-valid` - `ng-invalid` @@ -115,7 +115,7 @@ This ensures that the user is not distracted with an error until after interacti A form is in instance of {@link api/angular.module.ng.$compileProvider.directive.form.FormController FormController}. The form instance can optionally be published into the scope using the `name` attribute. -Similarly control is an instance of {@link api/angular.module.ng.$compileProvider.directive.ng-model.NgModelController NgModelController}. +Similarly control is an instance of {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController NgModelController}. The control instance can similarly be published into the form instance using the `name` attribute. This implies that the internal state of both the form and the control is available for binding in the view using the standard binding primitives. @@ -181,16 +181,16 @@ This allows us to extend the above example with these features: Angular provides basic implementation for most common html5 {@link api/angular.module.ng.$compileProvider.directive.input input} types: ({@link api/angular.module.ng.$compileProvider.directive.input.text text}, {@link api/angular.module.ng.$compileProvider.directive.input.number number}, {@link api/angular.module.ng.$compileProvider.directive.input.url url}, {@link api/angular.module.ng.$compileProvider.directive.input.email email}, {@link api/angular.module.ng.$compileProvider.directive.input.radio radio}, {@link api/angular.module.ng.$compileProvider.directive.input.checkbox checkbox}), as well as some directives for validation (`required`, `pattern`, `minlength`, `maxlength`, `min`, `max`). -Defining your own validator can be done by defining your own directive which adds a custom validation function to the `ng-model` {@link api/angular.module.ng.$compileProvider.directive.ng-model.NgModelController controller}. +Defining your own validator can be done by defining your own directive which adds a custom validation function to the `ngModel` {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController controller}. To get a hold of the controller the directive specifies a dependency as shown in the example below. The validation can occur in two places: * **Model to View update** - - Whenever the bound model changes, all functions in {@link api/angular.module.ng.$compileProvider.directive.ng-model.NgModelController#$formatters NgModelController#$formatters} array are pipe-lined, so that each of these functions has an opportunity to format the value and change validity state of the form control through {@link api/angular.module.ng.$compileProvider.directive.ng-model.NgModelController#$setValidity NgModelController#$setValidity}. + Whenever the bound model changes, all functions in {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController#$formatters NgModelController#$formatters} array are pipe-lined, so that each of these functions has an opportunity to format the value and change validity state of the form control through {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController#$setValidity NgModelController#$setValidity}. * **View to Model update** - - In a similar way, whenever a user interacts with a control, the controll calls {@link api/angular.module.ng.$compileProvider.directive.ng-model.NgModelController#$setViewValue NgModelController#$setViewValue}. -This in turn pipelines all functions in {@link api/angular.module.ng.$compileProvider.directive.ng-model.NgModelController#$parsers NgModelController#$parsers} array, so that each of these functions has an opportunity to convert the value and change validity state of the form control through {@link api/angular.module.ng.$compileProvider.directive.ng-model.NgModelController#$setValidity NgModelController#$setValidity}. + In a similar way, whenever a user interacts with a control, the controll calls {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController#$setViewValue NgModelController#$setViewValue}. +This in turn pipelines all functions in {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController#$parsers NgModelController#$parsers} array, so that each of these functions has an opportunity to convert the value and change validity state of the form control through {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController#$setValidity NgModelController#$setValidity}. In the following example we create two directives. @@ -272,13 +272,13 @@ In the following example we create two directives. -# Implementing custom form control (using ng-model) +# Implementing custom form control (using `ngModel`) Angular implements all of the basic HTML form controls ({@link api/angular.module.ng.$compileProvider.directive.input input}, {@link api/angular.module.ng.$compileProvider.directive.select select}, {@link api/angular.module.ng.$compileProvider.directive.textarea textarea}), which should be sufficient for most cases. However, if you need more flexibility, you can write your own form control as a directive. -In order for custom control to work with `ng-model` and to achieve two-way data-binding it needs to: +In order for custom control to work with `ngModel` and to achieve two-way data-binding it needs to: - - implement `render` method, which is responsible for rendering the data after it passed the {@link api/angular.module.ng.$compileProvider.directive.ng-model.NgModelController#$formatters NgModelController#$formatters}, + - implement `render` method, which is responsible for rendering the data after it passed the {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController#$formatters NgModelController#$formatters}, - call `$setViewValue` method, whenever the user interacts with the control and model needs to be updated. This is usually done inside a DOM Event listener. See {@link api/angular.module.ng.$compileProvider.directive $compileProvider.directive} for more info. diff --git a/docs/content/guide/dev_guide.i18n.ngdoc b/docs/content/guide/dev_guide.i18n.ngdoc index 5ba627ab..ba88a2e7 100644 --- a/docs/content/guide/dev_guide.i18n.ngdoc +++ b/docs/content/guide/dev_guide.i18n.ngdoc @@ -22,7 +22,7 @@ http://docs.angularjs.org/#!/api/angular.module.ng.$filter.number number} and {@ http://docs.angularjs.org/#!/api/angular.module.ng.$filter.currency currency} filters. Additionally, Angular supports localizable pluralization support provided by the {@link -api/angular.module.ng.$compileProvider.directive.ng-pluralize ng-pluralize directive}. +api/angular.module.ng.$compileProvider.directive.ngPluralize ngPluralize directive}. All localizable Angular components depend on locale-specific rule sets managed by the {@link api/angular.module.ng.$locale $locale service}. diff --git a/docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc b/docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc index 36ceed4f..deccbeee 100644 --- a/docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc +++ b/docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc @@ -42,11 +42,12 @@ template/view. This behavior interacts with and modifies the application model. As discussed in the {@link dev_guide.mvc.understanding_model Model} section of this guide, any objects (or primitives) assigned to the scope become model properties. Any functions assigned to the scope, along with any prototype methods of the controller type, become functions available in -the template/view, and can be invoked via angular expressions and `ng-` event handlers (e.g. {@link -api/angular.module.ng.$compileProvider.directive.ng-click ng-click}). These controller methods are always evaluated within the -context of the angular scope object that the controller function was applied to (which means that -the `this` keyword of any controller method is always bound to the scope that the controller -augments). This is how the second task of adding behavior to the scope is accomplished. +the template/view, and can be invoked via angular expressions and `ng` event handler directives +(e.g. {@link api/angular.module.ng.$compileProvider.directive.ngClick ngClick}). These controller +methods are always evaluated within the context of the angular scope object that the controller +function was applied to (which means that the `this` keyword of any controller method is always +bound to the scope that the controller augments). This is how the second task of adding behavior to +the scope is accomplished. # Using Controllers Correctly @@ -78,7 +79,7 @@ instances). # Associating Controllers with Angular Scope Objects You can associate controllers with scope objects explicitly via the {@link api/angular.module.ng.$rootScope.Scope#$new -scope.$new} api or implicitly via the {@link api/angular.module.ng.$compileProvider.directive.ng-controller ng-controller +scope.$new} api or implicitly via the {@link api/angular.module.ng.$compileProvider.directive.ngController ngController directive} or {@link api/angular.module.ng.$route $route service}. @@ -119,7 +120,7 @@ SpicyCtrl.prototype.jalapenoSpicy = function() { Things to notice in the example above: -- The `ng-controller` directive is used to (implicitly) create a scope for our template, and the +- The `ngController` directive is used to (implicitly) create a scope for our template, and the scope is augmented (managed) by the `SpicyCtrl` controller. - `SpicyCtrl` is just a plain JavaScript function. As an (optional) naming convention the name starts with capital letter and ends with "Ctrl" or "Controller". @@ -186,7 +187,7 @@ function BabyCtrl($scope) { }