Injector which is configured with the `injectables` for the Component.
+ - creates a child Injector which is configured with the `injectables` for the Component.
All template expressions and statements are then evaluated against the component instance.
- For details on the `@View` annotation, see View.
+ For details on the `@View` annotation, see View.
## Example
@@ -101,8 +101,8 @@ p.location-badge.
are children in the component's light DOM.
- The syntax for configuring the `injectables` injectable is identical to Injector injectable configuration.
- See Injector for additional detail.
+ The syntax for configuring the `injectables` injectable is identical to Injector injectable configuration.
+ See Injector for additional detail.
## Simple Example
diff --git a/public/docs/js/latest/api/annotations/Decorator-class.jade b/public/docs/js/latest/api/annotations/Decorator-class.jade
index 39bee5ed34..daa0783e70 100644
--- a/public/docs/js/latest/api/annotations/Decorator-class.jade
+++ b/public/docs/js/latest/api/annotations/Decorator-class.jade
@@ -10,10 +10,10 @@ p.location-badge.
(see: http://en.wikipedia.org/wiki/Composition_over_inheritance)
Decorators:
- - are simplest form of Directives.
+ - are simplest form of Directives.
- are best used as a composition pattern ()
- Decorators differ from Components in that they:
+ Decorators differ from Components in that they:
- can have multiple decorators per element
- do not create their own evaluation context
- do not have a template (and therefor do not create Shadow DOM)
diff --git a/public/docs/js/latest/api/annotations/Directive-class.jade b/public/docs/js/latest/api/annotations/Directive-class.jade
index 23ded95a76..e938e3f6f1 100644
--- a/public/docs/js/latest/api/annotations/Directive-class.jade
+++ b/public/docs/js/latest/api/annotations/Directive-class.jade
@@ -5,43 +5,43 @@ p.location-badge.
:markdown
Directives allow you to attach behavior to elements in the DOM.
-
- Directive is an abstract concept, instead use concrete directives: Component, DynamicComponent, Decorator
- or Viewport.
-
+
+ Directive is an abstract concept, instead use concrete directives: Component, DynamicComponent, Decorator
+ or Viewport.
+
A directive consists of a single directive annotation and a controller class. When the directive's `selector` matches
elements in the DOM, the following steps occur:
-
+
1. For each directive, the `ElementInjector` attempts to resolve the directive's constructor arguments.
2. Angular instantiates directives for each matched element using `ElementInjector` in a depth-first order,
as declared in the HTML.
-
+
## Understanding How Injection Works
-
+
There are three stages of injection resolution.
- *Pre-existing Injectors*:
- - The terminal Injector cannot resolve dependencies. It either throws an error or, if the dependency was
+ - The terminal Injector cannot resolve dependencies. It either throws an error or, if the dependency was
specified as `@Optional`, returns `null`.
- The platform injector resolves browser singleton resources, such as: cookies, title, location, and others.
- - *Component Injectors*: Each `@Component` has its own Injector, and they follow the same parent-child hierarchy
+ - *Component Injectors*: Each `@Component` has its own Injector, and they follow the same parent-child hierarchy
as the components in the DOM.
- *Element Injectors*: Each component has a Shadow DOM. Within the Shadow DOM each element has an `ElementInjector`
which follow the same parent-child hierarchy as the DOM elements themselves.
-
+
When a template is instantiated, it also must instantiate the corresponding directives in a depth-first order. The
current `ElementInjector` resolves the constructor dependencies for each directive.
-
- Angular then resolves dependencies as follows, according to the order in which they appear in the View:
-
+
+ Angular then resolves dependencies as follows, according to the order in which they appear in the View:
+
1. Dependencies on the current element
2. Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
3. Dependencies on component injectors and their parents until it encounters the root component
4. Dependencies on pre-existing injectors
-
-
+
+
The `ElementInjector` can inject other directives, element-specific special objects, or it can delegate to the parent
injector.
-
+
To inject other directives, declare the constructor parameter as:
- `directive:DirectiveType`: a directive on the current element only
- `@Ancestor() directive:DirectiveType`: any directive that matches the type between the current element and the
@@ -50,19 +50,19 @@ p.location-badge.
- `@Parent() directive:DirectiveType`: any directive that matches the type on a direct parent element only.
- `@Children query:QueryViewport directives only
+ - `viewContainer: ViewContainer` to control child template instantiation, for Viewport directives only
- `bindingPropagation: BindingPropagation` to control change detection in a more granular way.
-
+
## Example
-
+
The following example demonstrates how dependency injection resolves constructor arguments in practice.
-
-
+
+
Assume this HTML template:
-
+
```
QueryList, which updates its contents as children are added, removed, or moved by any
- Viewport directive such as a `for`, an `if`, or a `switch`.
-
+ directives, a directive can't simply inject the list of child directives. Instead, the directive
+ injects a QueryList, which updates its contents as children are added, removed, or moved by any
+ Viewport directive such as a `for`, an `if`, or a `switch`.
+
```
@Decorator({ selector: '[my-directive]' })
class MyDirective {
@@ -196,16 +196,16 @@ p.location-badge.
}
}
```
-
- This directive would be instantiated with a QueryList which contains `Dependency` 4 and 6. Here, `Dependency`
+
+ This directive would be instantiated with a QueryList which contains `Dependency` 4 and 6. Here, `Dependency`
5 would not be included, because it is not a direct child.
-
+
### Injecting a live collection of descendant directives
-
+
Note: This is will be implemented in later release. ()
-
+
Similar to `@Children` above, but also includes the children of the child elements.
-
+
```
@Decorator({ selector: '[my-directive]' })
class MyDirective {
@@ -213,15 +213,15 @@ p.location-badge.
}
}
```
-
+
This directive would be instantiated with a Query which would contain `Dependency` 4, 5 and 6.
-
+
### Optional injection
-
+
The normal behavior of directives is to return an error when a specified dependency cannot be resolved. If you
would like to inject `null` on unresolved dependency instead, you can annotate that dependency with `@Optional()`.
This explicitly permits the author of a template to treat some of the surrounding directives as optional.
-
+
```
@Decorator({ selector: '[my-directive]' })
class MyDirective {
@@ -229,16 +229,16 @@ p.location-badge.
}
}
```
-
+
This directive would be instantiated with a `Dependency` directive found on the current element. If none can be
found, the injector supplies `null` instead of throwing an error.
-
+
.l-main-section
h2 Members
.l-sub-section
h3 constructor
-
+
pre.prettyprint
code.
constructor({
@@ -254,9 +254,9 @@ p.location-badge.
hostListeners: any,
lifecycle:List
}={})
-
+
:markdown
-
+
@@ -264,23 +264,23 @@ p.location-badge.
.l-sub-section
h3 events
-
+
:markdown
Enumerates the set of emitted events.
-
+
## Syntax
-
+
```
@Component({
events: ['statusChange']
})
class TaskComponent {
statusChange:EventEmitter;
-
+
constructor() {
this.statusChange = new EventEmitter();
}
-
+
onComplete() {
this.statusChange.next('completed');
}
@@ -294,15 +294,15 @@ p.location-badge.
.l-sub-section
h3 hasLifecycleHook
-
+
pre.prettyprint
code.
hasLifecycleHook(hook:string)
-
+
:markdown
Returns true if a directive participates in a given `LifecycleEvent`.
-
- See onChange, onDestroy, onAllChangesDone for details.
+
+ See onChange, onDestroy, onAllChangesDone for details.
@@ -311,27 +311,27 @@ p.location-badge.
.l-sub-section
h3 hostListeners
-
+
:markdown
Specifies which DOM hostListeners a directive listens to.
-
+
The `hostListeners` property defines a set of `event` to `method` key-value pairs:
-
+
- `event1`: the DOM event that the directive listens to.
- `statement`: the statement to execute when the event occurs.
If the evalutation of the statement returns `false`, then `preventDefault`is applied on the DOM event.
-
+
To listen to global events, a target must be added to the event name.
The target can be `window`, `document` or `body`.
-
+
When writing a directive event binding, you can also refer to the following local variables:
- `$event`: Current event object which triggered the event.
- `$target`: The source of the event. This will be either a DOM element or an Angular directive.
(will be implemented in later release)
-
-
+
+
## Syntax
-
+
```
@Directive({
hostListeners: {
@@ -341,12 +341,12 @@ p.location-badge.
}
}
```
-
+
## Basic Event Binding:
-
+
Suppose you want to write a directive that triggers on `change` events in the DOM and on `resize` events in window.
You would define the event binding as follows:
-
+
```
@Decorator({
selector: 'input',
@@ -362,7 +362,7 @@ p.location-badge.
}
}
```
-
+
Here the `onChange` method of `InputDecorator` is invoked whenever the DOM element fires the 'change' event.
@@ -372,11 +372,11 @@ p.location-badge.
.l-sub-section
h3 lifecycle
-
+
:markdown
Specifies a set of lifecycle hostListeners in which the directive participates.
-
- See onChange, onDestroy, onAllChangesDone for details.
+
+ See onChange, onDestroy, onAllChangesDone for details.
@@ -385,22 +385,22 @@ p.location-badge.
.l-sub-section
h3 properties
-
+
:markdown
Enumerates the set of properties that accept data binding for a directive.
-
+
The `properties` property defines a set of `directiveProperty` to `bindingProperty`
key-value pairs:
-
+
- `directiveProperty` specifies the component property where the value is written.
- `bindingProperty` specifies the DOM property where the value is read from.
-
- You can include a Pipe when specifying a `bindingProperty` to allow for data transformation and structural
+
+ You can include a Pipe when specifying a `bindingProperty` to allow for data transformation and structural
change detection of the value. These pipes will be evaluated in the context of this component.
-
-
+
+
## Syntax
-
+
```
@Directive({
properties: {
@@ -410,13 +410,13 @@ p.location-badge.
}
}
```
-
-
+
+
## Basic Property Binding
-
+
We can easily build a simple `Tooltip` directive that exposes a `tooltip` property, which can be used in templates
with standard Angular syntax. For example:
-
+
```
@Decorator({
selector: '[tooltip]',
@@ -430,29 +430,29 @@ p.location-badge.
}
}
```
-
+
We can then bind to the `tooltip' property as either an expression (`someExpression`) or as a string literal, as
shown in the HTML template below:
-
+
```html
Pipe and keyValDiff documentation for more details.
-
+
+ See Pipe and keyValDiff documentation for more details.
+
```
@Decorator({
selector: '[class-set]',
@@ -466,13 +466,13 @@ p.location-badge.
}
}
```
-
+
The template that this directive is used in may also contain its own pipes. For example:
-
+
```html