diff options
Diffstat (limited to 'docs/content')
22 files changed, 86 insertions, 84 deletions
diff --git a/docs/content/api/angular.module.ng.$compileProvider.directive.ngdoc b/docs/content/api/angular.module.ng.$compileProvider.directive.ngdoc index f66aa9a1..722372b2 100644 --- a/docs/content/api/angular.module.ng.$compileProvider.directive.ngdoc +++ b/docs/content/api/angular.module.ng.$compileProvider.directive.ngdoc @@ -126,8 +126,8 @@ a change in DOM structure such as in repeaters. When the above example is compiled, the compiler visits every node and looks for directives. The `{{user}}` is an example of {@link angular.module.ng.$interpolate interpolation} directive. {@link -angular.module.ng.$compileProvider.directive.ng-repeat ng-repeat} is another directive. But {@link -angular.module.ng.$compileProvider.directive.ng-repeat ng-repeat} has a dilemma. It needs to be +angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} is another directive. But {@link +angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} has a dilemma. It needs to be able to quickly stamp out new `li`s for every `action` in `user.actions`. This means that it needs to save a clean copy of the `li` element for cloning purposes and as new `action`s are inserted, the template `li` element needs to be cloned and inserted into `ul`. But cloning the `li` element @@ -143,12 +143,12 @@ the directives are identified and sorted by priority, and a linking phase where links a specific instance of the {@link angular.module.ng.$rootScope.Scope scope} and the specific instance of an `li` is performed. -{@link angular.module.ng.$compileProvider.directive.ng-repeat ng-repeat} works by preventing the +{@link angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} works by preventing the compilation process form descending into `li` element. Instead the {@link -angular.module.ng.$compileProvider.directive.ng-repeat ng-repeat} directive compiles `li` +angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} directive compiles `li` seperatly. The result of of the `li` element compilation is a linking function which contains all of the directives contained in the `li` element ready to be attached to a specific clone of `li` -element. At runtime the {@link angular.module.ng.$compileProvider.directive.ng-repeat ng-repeat} +element. At runtime the {@link angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} watches the expression and as items are added to the array it clones the `li` element, creates a new {@link angular.module.ng.$rootScope.Scope scope} for the cloned `li` element and calls the link function on the cloned `li`. @@ -415,8 +415,8 @@ compiler}. The attributes are: append the template to the element. * `transclude` - compile the content of the element and make it available to the directive. - Typically used with {@link api/angular.module.ng.$compileProvider.directive.ng-transclude - ng-transclude}. The advantage of transclusion is that the linking function receives a + Typically used with {@link api/angular.module.ng.$compileProvider.directive.ngTransclude + ngTransclude}. The advantage of transclusion is that the linking function receives a transclusion function which is pre-bound to the correct scope. In a typical setup the widget creates an `isolate` scope, but the transclusion is not a child, but a sibling of the `isolate` scope. This makes it possible for the widget to have private state, and the transclusion to @@ -440,8 +440,8 @@ compiler}. The attributes are: Compile function deals with transforming the template DOM. Since most directives do not do template transformation, it is not used often. Examples which require compile functions are directives which transform template DOM such as {@link -angular.module.ng.$compileProvider.directive.ng-repeat ng-repeat} or load the contents -asynchronously such as {@link angular.module.ng.$compileProvider.directive.ng-view ng-view}. The +angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} or load the contents +asynchronously such as {@link angular.module.ng.$compileProvider.directive.ngView ngView}. The compile functions takes the following arguments. * `tElement` - template element - The element where the directive has been declared. It is diff --git a/docs/content/cookbook/deeplinking.ngdoc b/docs/content/cookbook/deeplinking.ngdoc index db5f057e..10af8a2d 100644 --- a/docs/content/cookbook/deeplinking.ngdoc +++ b/docs/content/cookbook/deeplinking.ngdoc @@ -106,7 +106,7 @@ The two partials are defined in the following URLs: routes. * The {@link api/angular.module.ng.$route $route} service then watches the URL and instantiates the appropriate controller when the URL changes. -* The {@link api/angular.module.ng.$compileProvider.directive.ng-view ng-view} widget loads the +* The {@link api/angular.module.ng.$compileProvider.directive.ngView ngView} widget loads the view when the URL changes. It also sets the view scope to the newly instantiated controller. * Changing the URL is sufficient to change the controller and view. It makes no difference whether the URL is changed programatically or by the user. diff --git a/docs/content/cookbook/form.ngdoc b/docs/content/cookbook/form.ngdoc index b335cecf..e7f87d7c 100644 --- a/docs/content/cookbook/form.ngdoc +++ b/docs/content/cookbook/form.ngdoc @@ -102,7 +102,7 @@ allow a user to enter data. # Things to notice -* The user data model is initialized {@link api/angular.module.ng.$compileProvider.directive.ng-controller controller} and is +* The user data model is initialized {@link api/angular.module.ng.$compileProvider.directive.ngController controller} and is available in the {@link api/angular.module.ng.$rootScope.Scope scope} with the initial data. * For debugging purposes we have included a debug view of the model to better understand what is going on. diff --git a/docs/content/guide/dev_guide.bootstrap.auto_bootstrap.ngdoc b/docs/content/guide/dev_guide.bootstrap.auto_bootstrap.ngdoc index 2567cf68..6fbb528d 100644 --- a/docs/content/guide/dev_guide.bootstrap.auto_bootstrap.ngdoc +++ b/docs/content/guide/dev_guide.bootstrap.auto_bootstrap.ngdoc @@ -2,7 +2,7 @@ @name Developer Guide: Initializing Angular: Automatic Initialization @description -For Angular to manage the DOM for your application, it needs to compile some or all of an HTML page. Angular does this initialization automatically when you load the angular.js script into your page and insert an `ng-app` directive (attribute) into one of the page's elements. For example, we can tell Angular to initialize the entire document: +For Angular to manage the DOM for your application, it needs to compile some or all of an HTML page. Angular does this initialization automatically when you load the angular.js script into your page and insert an `ngApp` directive (attribute) into one of the page's elements. For example, we can tell Angular to initialize the entire document: <pre> <!doctype html> @@ -16,7 +16,7 @@ For Angular to manage the DOM for your application, it needs to compile some or </html> </pre> -You can also tell Angular to manage only a portion of a page. You would want to do this if you are using some other framework to manage other parts of the page. You do this by placing the `ng-app` directive on one or more container elements in the document. For example: +You can also tell Angular to manage only a portion of a page. You would want to do this if you are using some other framework to manage other parts of the page. You do this by placing the `ngApp` directive on one or more container elements in the document. For example: <pre> <div ng-app> @@ -24,7 +24,7 @@ You can also tell Angular to manage only a portion of a page. You would want to </div> </pre> -You can also ask `ng-app` to load additional {@link api/angular.module modules} containing services, directives or filers that you'll use on the page. +You can also ask `ngApp` to load additional {@link api/angular.module modules} containing services, directives or filers that you'll use on the page. <pre> <div ng-app="AwesomeModule"> @@ -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 `<html>` 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. <doc:example> <doc:source> @@ -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. </doc:example> -# 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) { } </pre> -Notice how we nested three `ng-controller` directives in our template. This template construct will +Notice how we nested three `ngController` directives in our template. This template construct will result in 4 scopes being created for our view: - The root scope diff --git a/docs/content/guide/dev_guide.mvc.understanding_model.ngdoc b/docs/content/guide/dev_guide.mvc.understanding_model.ngdoc index e8874c49..06557b8d 100644 --- a/docs/content/guide/dev_guide.mvc.understanding_model.ngdoc +++ b/docs/content/guide/dev_guide.mvc.understanding_model.ngdoc @@ -30,7 +30,7 @@ occurs in controllers: <button ng-click="{{foos='ball'}}">Click me</button> -* Use {@link api/angular.module.ng.$compileProvider.directive.ng-init ng-init directive} in templates (for toy/example apps +* Use {@link api/angular.module.ng.$compileProvider.directive.ngInit ngInit directive} in templates (for toy/example apps only, not recommended for real applications): <body ng-init=" foo = 'bar' "> @@ -45,7 +45,7 @@ when processing the following template constructs: The code above creates a model called "query" on the current scope with the value set to "fluffy cloud". -* An iterator declaration in {@link api/angular.module.ng.$compileProvider.directive.ng-repeat ng-repeater}: +* An iterator declaration in {@link api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeater}: <p ng-repeat="phone in phones"></p> diff --git a/docs/content/guide/dev_guide.mvc.understanding_view.ngdoc b/docs/content/guide/dev_guide.mvc.understanding_view.ngdoc index 6e34f8c8..7c6b2e5a 100644 --- a/docs/content/guide/dev_guide.mvc.understanding_view.ngdoc +++ b/docs/content/guide/dev_guide.mvc.understanding_view.ngdoc @@ -9,8 +9,8 @@ the DOM based on information in the template, controller and model. In the angular implementation of MVC, the view has knowledge of both the model and the controller. The view knows about the model where two-way data-binding occurs. The view has knowledge of the -controller through angular directives, such as {@link api/angular.module.ng.$compileProvider.directive.ng-controller -ng-controller} and {@link api/angular.module.ng.$compileProvider.directive.ng-view ng-view}, and through bindings of this form: +controller through angular directives, such as {@link api/angular.module.ng.$compileProvider.directive.ngController +ngController} and {@link api/angular.module.ng.$compileProvider.directive.ngView ngView}, and through bindings of this form: `{{someControllerFunction()}}`. In these ways, the view can call functions in an associated controller function. diff --git a/docs/content/guide/dev_guide.overview.ngdoc b/docs/content/guide/dev_guide.overview.ngdoc index 4c9c2953..e44a9cef 100644 --- a/docs/content/guide/dev_guide.overview.ngdoc +++ b/docs/content/guide/dev_guide.overview.ngdoc @@ -79,8 +79,8 @@ easier a web developer's life can if they're using angular: Try out the Live Preview above, and then let's walk through the example and describe what's going on. -In the `<html>` tag we specify that this is an angular application with the `ng-app` directive. -The `ng-app' will cause the angular to {@link dev_guide.bootstrap auto initialize} your application. +In the `<html>` tag we specify that this is an angular application with the `ngApp` directive. +The `ngApp' will cause the angular to {@link dev_guide.bootstrap auto initialize} your application. <html ng-app> @@ -88,7 +88,7 @@ We load the angular using the `<script>` tag: <script src="http://code.angularjs.org/angular-?.?.?.min.js"></script> -From the `ng-model` attribute of the `<input>` tags, angular automatically sets up two-way data +From the `ngModel` attribute of the `<input>` tags, angular automatically sets up two-way data binding, and we also demonstrate some easy input validation: Quantity: <input type="integer" min="0" ng-model="qty" required > @@ -112,7 +112,7 @@ And finally, the mysterious `{{ double curly braces }}`: This notation, `{{ _expression_ }}`, is a bit of built-in angular binding markup, a shortcut for displaying data to the user. The expression within curly braces is monitored and its evaluated value is updated into the view by angular's template compiler. Alternatively, one could use angular's -{@link api/angular.module.ng.$compileProvider.directive.ng-bind ng-bind}) directive. The expression +{@link api/angular.module.ng.$compileProvider.directive.ngBind ngBind}) directive. The expression itself can be a combination of both an expression and a {@link dev_guide.templates.filters filter}: `{{ expression | filter }}`. Angular provides filters for formatting display data. diff --git a/docs/content/guide/dev_guide.scopes.internals.ngdoc b/docs/content/guide/dev_guide.scopes.internals.ngdoc index bca9583f..1cc2b2a8 100644 --- a/docs/content/guide/dev_guide.scopes.internals.ngdoc +++ b/docs/content/guide/dev_guide.scopes.internals.ngdoc @@ -47,7 +47,7 @@ recursively check the parent scope, grandparent scope, etc. all the way to the r defaulting to undefined. {@link api/angular.module.ng.$compileProvider.directive directives} associated with elements -(ng-controller, ng-repeat, ng-include, etc.) create new child scopes that inherit properties from +(ngController, ngRepeat, ngInclude, etc.) create new child scopes that inherit properties from the current parent scope. Any code in Angular is free to create a new scope. Whether or not your code does so is an implementation detail of the directive, that is, you can decide when or if this happens. Inheritance typically mimics HTML DOM element nesting, but does not do so with the same @@ -123,8 +123,8 @@ usually fall into one of two categories: expressions `{{expression}}`, register listeners using the {@link api/angular.module.ng.$rootScope.Scope#$watch $watch()} method. This type of directive needs to be notified whenever the expression changes so that it can update the view. - - Listener directives, such as {@link api/angular.module.ng.$compileProvider.directive.ng-click - ng-click}, register a listener with the DOM. When the DOM listener fires, the directive executes + - Listener directives, such as {@link api/angular.module.ng.$compileProvider.directive.ngClick + ngClick}, register a listener with the DOM. When the DOM listener fires, the directive executes the associated expression and updates the view using the {@link api/angular.module.ng.$rootScope.Scope#$apply $apply()} method. 3. When an external event (such as a user action, timer or XHR) is received, the associated {@link @@ -134,8 +134,8 @@ api/angular.module.ng.$rootScope.Scope#$apply $apply()} method so that all liste ### Directives that create scopes In most cases, {@link api/angular.module.ng.$compileProvider.directive directives} and scopes interact but do not create new -instances of scope. However, some directives, such as {@link api/angular.module.ng.$compileProvider.directive.ng-controller -ng-controller} and {@link api/angular.module.ng.$compileProvider.directive.ng-repeat ng-repeat}, create new child scopes using +instances of scope. However, some directives, such as {@link api/angular.module.ng.$compileProvider.directive.ngController +ngController} and {@link api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat}, create new child scopes using the {@link api/angular.module.ng.$rootScope.Scope#$new $new()} method and then attach the child scope to the corresponding DOM element. You can retrieve a scope for any DOM element by using an `angular.element(aDomElement).scope()` method call.) @@ -144,7 +144,7 @@ corresponding DOM element. You can retrieve a scope for any DOM element by using ### Controllers and scopes Scopes and controllers interact with each other in the following situations: - Controllers use scopes to expose controller methods to templates (see {@link -api/angular.module.ng.$compileProvider.directive.ng-controller ng-controller}). +api/angular.module.ng.$compileProvider.directive.ngController ngController}). - Controllers define methods (behavior) that can mutate the model (properties on the scope). - Controllers may register {@link api/angular.module.ng.$rootScope.Scope#$watch watches} on the model. These watches execute immediately after the controller behavior executes, but before the DOM gets updated. @@ -170,7 +170,7 @@ $watch-ers firing and view getting updated. Similarly, when a request to fetch d is made and the response comes back, the data is written into the model (scope) within an $apply, which then pushes updates through to the view and any other dependents. -A widget that creates scopes (such as {@link api/angular.module.ng.$compileProvider.directive.ng-repeat ng-repeat}) via `$new`, +A widget that creates scopes (such as {@link api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat}) via `$new`, doesn't need to worry about propagating the `$digest` call from the parent scope to child scopes. This happens automatically. diff --git a/docs/content/guide/dev_guide.scopes.ngdoc b/docs/content/guide/dev_guide.scopes.ngdoc index 330b715d..6ddbcae4 100644 --- a/docs/content/guide/dev_guide.scopes.ngdoc +++ b/docs/content/guide/dev_guide.scopes.ngdoc @@ -14,7 +14,7 @@ the contexts in which Angular creates data-bindings between the model and the vi In addition to providing the context in which data is evaluated, Angular scope objects watch for model changes. The scope objects also notify all components interested in any model changes (for example, functions registered through {@link api/angular.module.ng.$rootScope.Scope#$watch $watch}, bindings created by -{@link api/angular.module.ng.$compileProvider.directive.ng-bind ng-bind}, or HTML input elements). +{@link api/angular.module.ng.$compileProvider.directive.ngBind ngBind}, or HTML input elements). Angular scope objects: diff --git a/docs/content/guide/dev_guide.scopes.understanding_scopes.ngdoc b/docs/content/guide/dev_guide.scopes.understanding_scopes.ngdoc index aa8a97e0..aeab3191 100644 --- a/docs/content/guide/dev_guide.scopes.understanding_scopes.ngdoc +++ b/docs/content/guide/dev_guide.scopes.understanding_scopes.ngdoc @@ -45,7 +45,7 @@ code, observe how the value of `name` changes, based on the HTML element it is d </doc:scenario> </doc:example> -The angular {@link api/angular.module.ng.$compileProvider.directive.ng-repeat ng-repeat} directive creates a new scope for each +The angular {@link api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} directive creates a new scope for each element that it repeats (in this example the elements are list items). In the `<ul>` element, we initialized `name` to "Hank", and we created an array called `names` to use as the data source for the list items. In each `<li>` element, `name` is overridden. Outside of the `<li>` repeater, the diff --git a/docs/content/guide/dev_guide.services.$location.ngdoc b/docs/content/guide/dev_guide.services.$location.ngdoc index f5790725..c99d26b0 100644 --- a/docs/content/guide/dev_guide.services.$location.ngdoc +++ b/docs/content/guide/dev_guide.services.$location.ngdoc @@ -316,7 +316,7 @@ When a user clicks on this link, In cases like the following, links are not rewritten; instead, the browser will perform a full page reload to the original link. -- Links with an `ng-ext-link` directive<br /> +- Links with an `ngExtLink` directive<br /> Example: `<a href="/ext/link?a=b" ng-ext-link>link</a>` - Links that contain `target="_blank"`<br /> Example: `<a href="/ext/link?a=b" target="_blank">link</a>` diff --git a/docs/content/guide/dev_guide.templates.css-styling.ngdoc b/docs/content/guide/dev_guide.templates.css-styling.ngdoc index 11eba2d1..30250bea 100644 --- a/docs/content/guide/dev_guide.templates.css-styling.ngdoc +++ b/docs/content/guide/dev_guide.templates.css-styling.ngdoc @@ -9,10 +9,10 @@ Angular sets these CSS classes. It is up to your application to provide useful s * `ng-invalid`, `ng-valid` - **Usage:** angular applies this class to an input widget element if that element's input does - notpass validation. (see {@link api/angular.module.ng.$compileProvider.directive.input input} widget). + notpass validation. (see {@link api/angular.module.ng.$compileProvider.directive.input input} directive). * `ng-pristine`, `ng-dirty` - - **Usage:** angular {@link api/angular.module.ng.$compileProvider.directive.input input} widget applies `ng-pristine` class + - **Usage:** angular {@link api/angular.module.ng.$compileProvider.directive.input input} directive applies `ng-pristine` class to a new input widget element which did not have user interaction. Once the user interacts with the input widget the class is changed to `ng-dirty`. diff --git a/docs/content/guide/dev_guide.templates.ngdoc b/docs/content/guide/dev_guide.templates.ngdoc index 60e6a39b..54d582ca 100644 --- a/docs/content/guide/dev_guide.templates.ngdoc +++ b/docs/content/guide/dev_guide.templates.ngdoc @@ -26,7 +26,7 @@ with {@link dev_guide.expressions expressions}: <pre> <html ng-app> - <!-- Body tag augmented with ng-controller directive --> + <!-- Body tag augmented with ngController directive --> <body ng-controller="MyController"> <input ng-model="foo" value="bar"> <!-- Button tag with ng-click directive, and @@ -42,7 +42,7 @@ In a simple single-page app, the template consists of HTML, CSS, and angular dir in just one HTML file (usually `index.html`). In a more complex app, you can display multiple views within one main page using "partials", which are segments of template located in separate HTML files. You "include" the partials in the main page using the {@link api/angular.module.ng.$route -$route} service in conjunction with the {@link api/angular.module.ng.$compileProvider.directive.ng-view ng-view} directive. An +$route} service in conjunction with the {@link api/angular.module.ng.$compileProvider.directive.ngView ngView} directive. An example of this technique is shown in the {@link tutorial/ angular tutorial}, in steps seven and eight. 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> |