First round of api docs

This commit is contained in:
Alex Wolfe 2015-04-19 13:53:18 -07:00
parent 3b72b71570
commit 94cc8e9005
220 changed files with 7892 additions and 1193 deletions

View File

@ -1,13 +1,16 @@
<!-- VENDORS -->
script(src="/resources/js/vendor/prettify.js")
script(src="/resources/js/vendor/lang-basic.js")
script(src="/resources/js/vendor/lang-dart.js")
script(src="/resources/js/vendor/jquery.js")
<!-- Angular Material Dependencies --> <!-- Angular Material Dependencies -->
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js") script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js")
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js") script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js")
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.js") script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.js")
script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.js") script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.js")
<!-- VENDORS -->
script(src="/resources/js/vendor/prettify.js")
script(src="/resources/js/vendor/lang-basic.js")
script(src="/resources/js/vendor/lang-dart.js")
script(src="/resources/js/site.js") script(src="/resources/js/site.js")

View File

@ -1,9 +0,0 @@
{
"annotations": {
"title": "Annotations"
},
"change-detection": {
"title": "Change Detection"
}
}

View File

@ -0,0 +1,74 @@
p.
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/visibility.js#L105">angular2/src/core/annotations/visibility.js (line 105)</a>
:markdown
Specifies that an injector should retrieve a dependency from any ancestor element.
An ancestor is any element between the parent element and shadow root.
## Example
Here is a simple directive that retrieves a dependency from an ancestor element.
```
@Decorator({
selector: '[dependency]',
properties: {
'id':'dependency'
}
})
class Dependency {
id:string;
}
@Decorator({
selector: '[my-directive]'
})
class Dependency {
constructor(@Ancestor() dependency:Dependency) {
expect(dependency.id).toEqual(2);
};
}
```
We use this with the following HTML template:
```
<div dependency="1">
<div dependency="2">
<div>
<div dependency="3" my-directive></div>
</div>
</div>
</div>
```
The `@Ancestor()` annotation in our constructor forces the injector to retrieve the dependency from the
nearest ancestor element:
- The current element `dependency="3"` is skipped because it is not an ancestor.
- Next parent has no directives `<div>`
- Next parent has the `Dependency` directive and so the dependency is satisfied.
Angular injects `dependency=2`.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
()
:markdown

View File

@ -0,0 +1,72 @@
p.
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/di.js#L53">angular2/src/core/annotations/di.js (line 53)</a>
:markdown
Specifies that a constant attribute value should be injected.
The directive can inject constant string literals of host element attributes.
## Example
Suppose we have an `<input>` element and want to know its `type`.
```html
<input type="text">
```
A decorator can inject string literal `text` like so:
```javascript
@Decorator({
selector: `input'
})
class InputDecorator {
constructor(@Attribute('type') type) {
// type would be `text` in this example
}
}
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(attributeName)
:markdown
.l-sub-section
h3 attributeName
:markdown
.l-sub-section
h3 token
:markdown

View File

@ -0,0 +1,106 @@
p.
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L750">angular2/src/core/annotations/annotations.js (line 750)</a>
:markdown
Directive that attaches behavior to DOM elements.
A decorator directive attaches behavior to a DOM element in a composable manner.
(see: http://en.wikipedia.org/wiki/Composition_over_inheritance)
Decorators:
- are simplest form of [Directive]s.
- are best used as a composition pattern ()
Decorators differ from [Component]s 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)
## Example
Here we use a decorator directive to simply define basic tool-tip behavior.
```
@Decorator({
selector: '[tooltip]',
properties: {
'text': 'tooltip'
},
hostListeners: {
'onmouseenter': 'onMouseEnter()',
'onmouseleave': 'onMouseLeave()'
}
})
class Tooltip{
text:string;
overlay:Overlay; // NOT YET IMPLEMENTED
overlayManager:OverlayManager; // NOT YET IMPLEMENTED
constructor(overlayManager:OverlayManager) {
this.overlay = overlay;
}
onMouseEnter() {
// exact signature to be determined
this.overlay = this.overlayManager.open(text, ...);
}
onMouseLeave() {
this.overlay.close();
this.overlay = null;
}
}
```
In our HTML template, we can then add this behavior to a `<div>` or any other element with the `tooltip` selector,
like so:
```
<div tooltip="some text here"></div>
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
({
selector,
properties,
events,
hostListeners,
lifecycle,
compileChildren = true,
}:{
selector:string,
properties:any,
events:List,
hostListeners:any,
lifecycle:List,
compileChildren:boolean
}={})
:markdown
.l-sub-section
h3 compileChildren
:markdown
If set to true the compiler does not compile the children of this directive.

View File

@ -0,0 +1,93 @@
p.
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L655">angular2/src/core/annotations/annotations.js (line 655)</a>
:markdown
Directive used for dynamically loading components.
Regular Angular components are statically resolved. DynamicComponent allows to you resolve a component at runtime
instead by providing a placeholder into which a regular Angular component can be dynamically loaded. Once loaded,
the dynamically-loaded component becomes permanent and cannot be changed.
## Example
Here we have `DynamicComp` which acts as the placeholder for `HelloCmp`. At runtime, the dynamic component
`DynamicComp` requests loading of the `HelloCmp` component.
There is nothing special about `HelloCmp`, which is a regular Angular component. It can also be used in other static
locations.
```
@DynamicComponent({
selector: 'dynamic-comp'
})
class DynamicComp {
helloCmp:HelloCmp;
constructor(loader:DynamicComponentLoader, location:PrivateComponentLocation) {
loader.load(HelloCmp, location).then((helloCmp) => {
this.helloCmp = helloCmp;
});
}
}
@Component({
selector: 'hello-cmp'
})
@View({
template: "{{greeting}}"
})
class HelloCmp {
greeting:string;
constructor() {
this.greeting = "hello";
}
}
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
({
selector,
properties,
events,
hostListeners,
injectables,
lifecycle
}:{
selector:string,
properties:Object,
events:List,
hostListeners:Object,
injectables:List,
lifecycle:List
}={})
:markdown
.l-sub-section
h3 injectables
:markdown
Same as [Component.injectables].

View File

@ -0,0 +1,61 @@
p.
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/visibility.js#L44">angular2/src/core/annotations/visibility.js (line 44)</a>
:markdown
Specifies that an injector should retrieve a dependency from the direct parent.
## Example
Here is a simple directive that retrieves a dependency from its parent element.
```
@Decorator({
selector: '[dependency]',
properties: {
'id':'dependency'
}
})
class Dependency {
id:string;
}
@Decorator({
selector: '[my-directive]'
})
class Dependency {
constructor(@Parent() dependency:Dependency) {
expect(dependency.id).toEqual(1);
};
}
```
We use this with the following HTML template:
```
<div dependency="1">
<div dependency="2" my-directive></div>
</div>
```
The `@Parent()` annotation in our constructor forces the injector to retrieve the dependency from the
parent element (even thought the current element could resolve it): Angular injects `dependency=1`.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
()
:markdown

View File

@ -0,0 +1,53 @@
p.
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/di.js#L12">angular2/src/core/annotations/di.js (line 12)</a>
:markdown
Specifies that a function for setting host properties should be injected.
NOTE: This is changing pre 1.0.
The directive can inject a property setter that would allow setting this property on the host element.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(propName)
:markdown
.l-sub-section
h3 propName
:markdown
.l-sub-section
h3 token
:markdown

View File

@ -0,0 +1,39 @@
p.
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/di.js#L77">angular2/src/core/annotations/di.js (line 77)</a>
:markdown
Specifies that a [QueryList] should be injected.
See: [QueryList] for usage and example.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(directive)
:markdown
.l-sub-section
h3 directive
:markdown

View File

@ -0,0 +1,119 @@
p.
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/view.js#L34">angular2/src/core/annotations/view.js (line 34)</a>
:markdown
Declare the available HTML templates for an application.
Each angular component requires a single `@Component` and at least one `@View` annotation. The @View
annotation specifies the HTML template to use, and lists the directives that are active within the template.
When a component is instantiated, the template is loaded into the component's shadow root, and the
expressions and statements in the template are evaluated against the component.
For details on the `@Component` annotation, see [Component].
## Example
```
@Component({
selector: 'greet'
})
@View({
template: 'Hello {{name}}!',
directives: [GreetUser, Bold]
})
class Greet {
name: string;
constructor() {
this.name = 'World';
}
}
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
({
templateUrl,
template,
directives
}: {
templateUrl: string,
template: string,
directives: List&lt;Type&gt;
})
:markdown
.l-sub-section
h3 directives
:markdown
Specify a list of directives that are active within a template. [TODO: true?]
Directives must be listed explicitly to provide proper component encapsulation.
```javascript
@Component({
selector: 'my-component'
})
@View({
directives: [For]
template: '
<ul>
<li *for="item in items">{{item}}</li>
</ul>'
})
class MyComponent {
}
```
.l-sub-section
h3 template
:markdown
Specify an inline template for an angular component.
NOTE: either `templateURL` or `template` should be used, but not both.
.l-sub-section
h3 templateUrl
:markdown
Specify a template URL for an angular component.
NOTE: either `templateURL` or `template` should be used, but not both.

View File

@ -0,0 +1,124 @@
p.
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L879">angular2/src/core/annotations/annotations.js (line 879)</a>
:markdown
Directive that controls the instantiation, destruction, and positioning of inline template elements.
A viewport directive uses a [ViewContainer] to instantiate, insert, move, and destroy views at runtime.
The [ViewContainer] is created as a result of `<template>` element, and represents a location in the current view
where these actions are performed.
Views are always created as children of the current [View], and as siblings of the `<template>` element. Thus a
directive in a child view cannot inject the viewport directive that created it.
Since viewport directives are common in Angular, and using the full `<template>` element syntax is wordy, Angular
also supports a shorthand notation: `<li *foo="bar">` and `<li template="foo: bar">` are equivalent.
Thus,
```
<ul>
<li *foo="bar" title="text"></li>
</ul>
```
Expands in use to:
```
<ul>
<template [foo]="bar">
<li title="text"></li>
</template>
</ul>
```
Notice that although the shorthand places `*foo="bar"` within the `<li>` element, the binding for the `Viewport`
controller is correctly instantiated on the `<template>` element rather than the `<li>` element.
## Example
Let's suppose we want to implement the `unless` behavior, to conditionally include a template.
Here is a simple viewport directive that triggers on an `unless` selector:
```
@Viewport({
selector: '[unless]',
properties: {
'condition': 'unless'
}
})
export class Unless {
viewContainer: ViewContainer;
prevCondition: boolean;
constructor(viewContainer: ViewContainer) {
this.viewContainer = viewContainer;
this.prevCondition = null;
}
set condition(newCondition) {
if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) {
this.prevCondition = true;
this.viewContainer.clear();
} else if (!newCondition && (isBlank(this.prevCondition) || this.prevCondition)) {
this.prevCondition = false;
this.viewContainer.create();
}
}
}
```
We can then use this `unless` selector in a template:
```
<ul>
<li *unless="expr"></li>
</ul>
```
Once the viewport instantiates the child view, the shorthand notation for the template expands and the result is:
```
<ul>
<template [unless]="exp">
<li></li>
</template>
<li></li>
</ul>
```
Note also that although the `<li></li>` template still exists inside the `<template></template>`, the instantiated
view occurs on the second `<li></li>` which is a sibling to the `<template>` element.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
({
selector,
properties,
events,
hostListeners,
lifecycle
}:{
selector:string,
properties:any,
events:List,
lifecycle:List
}={})
:markdown

View File

@ -1,9 +1,57 @@
{ {
"directive-class": { "Directive-class" : {
"title": "Directive Class" "title" : "Directive Class"
}, },
"component-class": { "Component-class" : {
"title": "Component Class" "title" : "Component Class"
},
"DynamicComponent-class" : {
"title" : "DynamicComponent Class"
},
"Decorator-class" : {
"title" : "Decorator Class"
},
"Viewport-class" : {
"title" : "Viewport Class"
},
"onDestroy-var" : {
"title" : "onDestroy Var"
},
"onChange-var" : {
"title" : "onChange Var"
},
"onAllChangesDone-var" : {
"title" : "onAllChangesDone Var"
},
"PropertySetter-class" : {
"title" : "PropertySetter Class"
},
"Attribute-class" : {
"title" : "Attribute Class"
},
"Query-class" : {
"title" : "Query Class"
},
"View-class" : {
"title" : "View Class"
},
"Parent-class" : {
"title" : "Parent Class"
},
"Ancestor-class" : {
"title" : "Ancestor Class"
} }
} }

View File

@ -1,312 +1,144 @@
p.
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].
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:
p. p.
For each directive, the [ElementInjector] attempts to resolve the directive's constructor arguments. <span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
Angular instantiates directives for each matched element using [ElementInjector] in a depth-first order, as declared in the HTML. defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L516">angular2/src/core/annotations/annotations.js (line 516)</a>
:markdown
Declare reusable UI building blocks for an application.
Each Angular component requires a single `@Component` and at least one `@View` annotation. The `@Component`
annotation specifies when a component is instantiated, and which properties and hostListeners it binds to.
When a component is instantiated, Angular
- creates a shadow DOM for the component.
- loads the selected template into the shadow DOM.
- creates a child [Injector] which is configured with the [Component.injectables].
All template expressions and statements are then evaluated against the component instance.
For details on the `@View` annotation, see [View].
## Example
```
@Component({
selector: 'greet'
})
@View({
template: 'Hello {{name}}!'
})
class Greet {
name: string;
constructor() {
this.name = 'World';
}
}
```
.l-main-section .l-main-section
h2 Understanding How Injection Works
p There are three stages of injection resolution.
ol
li <strong>Pre-existing Injectors:</strong>
ul
li The terminal [Injector] cannot resolve dependencies. It either throws an error or, if the dependency was specified as @Optional, returns null.
li The primordial injector resolves browser singleton resources, such as: cookies, title, location, and others.
li <strong>Component Injectors:</strong> Each @Component has its own [Injector], and they follow the same parent-child hierarchy as the components in the DOM.
li <strong>Element Injectors:</strong> 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.
p 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.
p Angular then resolves dependencies as follows, according to the order in which they appear in the [View]:
ol
li Dependencies on the current element
li Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
li Dependencies on component injectors and their parents until it encounters the root component
li Dependencies on pre-existing injectors
p The [ElementInjector] can inject other directives, element-specific special objects, or it can delegate to the parent injector.
p To inject other directives, declare the constructor parameter as:
ul
li directive:DirectiveType: a directive on the current element only
li @Ancestor() directive:DirectiveType: any directive that matches the type between the current element and the Shadow DOM root. Current element is not included in the resolution, therefor even if it could resolve it, it will be ignored.
li @Parent() directive:DirectiveType: any directive that matches the type on a direct parent element only.
li @Children query:Query<DirectiveType>: A live collection of direct child directives [TO BE IMPLEMENTED].
li @Descendants query:Query<DirectiveType>: A live collection of any child directives [TO BE IMPLEMENTED].
p To inject element-specific special objects, declare the constructor parameter as:
ul
li element: NgElement to obtain a DOM element (DEPRECATED: replacement coming)
li viewContainer: ViewContainer to control child template instantiation, for [Viewport] directives only
li bindingPropagation: BindingPropagation to control change detection in a more granular way.
.l-main-section
h2 Example of Injection
p The following example demonstrates how dependency injection resolves constructor arguments in practice.
p Assume this HTML template:
pre.prettyprint.linenums.lang-html
code.
&lt;div dependency=&quot;1&quot;&gt;
&lt;div dependency=&quot;2&quot;&gt;
&lt;div dependency=&quot;3&quot; my-directive&gt;
&lt;div dependency=&quot;4&quot;&gt;
&lt;div dependency=&quot;5&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div dependency=&quot;6&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
p With the following dependency decorator and SomeService injectable class.
pre.prettyprint.linenums
code.
@Injectable()
class SomeService {
}
@Decorator({
selector: '[dependency]',
bind: {
'id':'dependency'
}
})
class Dependency {
id:string;
}
p Let's step through the different ways in which MyDirective could be declared...
.l-sub-section
h3 No injection
p Here the constructor is declared with no arguments, therefore nothing is injected into MyDirective.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor() {
}
}
p This directive would be instantiated with no dependencies.
.l-sub-section
h3 Component-level injection
p Directives can inject any injectable instance from the closest component injector or any of its parents.
p Here, the constructor declares a parameter, someService, and injects the SomeService type from the parent component's injector.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(someService: SomeService) {
}
}
p This directive would be instantiated with a dependency on SomeService.
.l-sub-section
h3 Injecting a directive from the current element
p Directives can inject other directives declared on the current element.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(dependency: Dependency) {
expect(dependency.id).toEqual(3);
}
}
p This directive would be instantiated with Dependency declared at the same element, in this case dependency="3".
.l-sub-section
h3 Injecting a directive from a direct parent element
p Directives can inject other directives declared on a direct parent element. By definition, a directive with a @Parent annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Parent() dependency: Dependency) {
expect(dependency.id).toEqual(2);
}
}
p This directive would be instantiated with Dependency declared at the parent element, in this case dependency="2".
.l-sub-section
h3 Injecting a directive from any ancestor elements
p Directives can inject other directives declared on any ancestor element (in the current Shadow DOM), i.e. on the parent element and its parents. By definition, a directive with an @Ancestor annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Ancestor() dependency: Dependency) {
expect(dependency.id).toEqual(2);
}
}
p Unlike the @Parent which only checks the parent, @Ancestor checks the parent, as well as its parents recursively. If dependency="2" didn't exist on the direct parent, this injection would have returned dependency="1".
.l-sub-section
h3 Injecting a live collection of direct child directives [PENDING IMPLEMENTATION]
p A directive can also query for other child directives. Since parent directives are instantiated before child directives, a directive can't simply inject the list of child directives. Instead, the directive asynchronously injects a [Query], which updates as children are added, removed, or moved by any [ViewPort] directive such as a for, an if, or a switch.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Children() dependencies:Query<Maker>) {
}
}
p. This directive would be instantiated with a [Query] which contains Dependency 4 and 6. Here, Dependency 5 would not be included, because it is not a direct child.
.l-sub-section
h3 Injecting a live collection of direct descendant directives [PENDING IMPLEMENTATION]
p Similar to @Children above, but also includes the children of the child elements.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Children() dependencies:Query<Maker>) {
}
}
p This directive would be instantiated with a Query which would contain Dependency 4, 5 and 6.
.l-sub-section
h3 Optional injection
p 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.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Optional() dependency:Dependency) {
}
}
p 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 h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
({
selector,
properties,
events,
hostListeners,
injectables,
lifecycle,
changeDetection = DEFAULT
}:{
selector:string,
properties:Object,
events:List,
hostListeners:Object,
injectables:List,
lifecycle:List,
changeDetection:string
}={})
:markdown
p
strong constructor({ selector, bind, events, lifecycle }:{ selector:string, bind:any, events: any, lifecycle:List }={})
.l-sub-section .l-sub-section
h3 bind h3 changeDetection
p Enumerates the set of properties that accept data binding for a directive.
p The bind property defines a set of directiveProperty to bindingProperty key-value pairs: :markdown
Defines the used change detection strategy.
ul
li directiveProperty specifies the component property where the value is written. When a component is instantiated, Angular creates a change detector, which is responsible for propagating
li bindingProperty specifies the DOM property where the value is read from. the component's bindings.
p You can include [Pipes] 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. The `changeDetection` property defines, whether the change detection will be checked every time or only when the component
tells it to do so.
.l-main-section
h2 Syntax
pre.prettyprint.linenums
code.
@Directive({ .l-sub-section
bind: { h3 injectables
'directiveProperty1': 'bindingProperty1',
'directiveProperty2': 'bindingProperty2 | pipe1 | ...',
...
} :markdown
Defines the set of injectable objects that are visible to a Component and its children.
The [injectables] defined in the Component annotation allow you to configure a set of bindings for the component's
injector.
When a component is instantiated, Angular creates a new child Injector, which is configured with the bindings in
the Component [injectables] annotation. The injectable objects then become available for injection to the component
itself and any of the directives in the component's template, i.e. they are not available to the directives which
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.
## Simple Example
Here is an example of a class that can be injected:
```
class Greeter {
greet(name:string) {
return 'Hello ' + name + '!';
}
} }
.l-main-section @Component({
h2 Basic Property Binding selector: 'greet',
injectables: [
p 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: Greeter
]
pre.prettyprint.linenums
code.
@Decorator({
selector: '[tooltip]',
bind: {
'text': 'tooltip'
}
}) })
class Tooltip { @View({
set text(text) { template: `{{greeter.greet('world')}}!`,
// This will get called every time the 'tooltip' binding changes with the new value. directives: Child
}
}
p 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:
pre.prettyprint.linenums
code.
&lt;div [tooltip]=&quot;someExpression&quot;&gt;...&lt;/div&gt;
&lt;div tooltip=&quot;Some Text&quot;&gt;...&lt;/div&gt;
p Whenever the someExpression expression changes, the bind declaration instructs Angular to update the Tooltip's text property.
.l-main-section
h2 Bindings With Pipes
p You can also use pipes when writing binding definitions for a directive.
p For example, we could write a binding that updates the directive on structural changes, rather than on reference changes, as normally occurs in change detection. (See: [Pipe] and [keyValueDiff] documentation for more details.)
pre.prettyprint.linenums
code.
@Decorator({
selector: '[class-set]',
bind: {
'classChanges': 'classSet | keyValDiff'
}
}) })
class ClassSet { class HelloWorld {
set classChanges(changes:KeyValueChanges) { greeter:Greeter;
// This will get called every time the `class-set` expressions changes its structure.
constructor(greeter:Greeter) {
this.greeter = greeter;
} }
} }
```
p The template that this directive is used in may also contain its own pipes. For example:
pre.prettyprint.linenums
code.
&lt;div [class-set]=&quot;someExpression | somePipe&quot;&gt;
p In this case, the two pipes compose as if they were inlined: someExpression | somePipe | keyValDiff.
.location-badge exported from angular2/annotations

View File

@ -1,267 +1,431 @@
p. p.
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L238">angular2/src/core/annotations/annotations.js (line 238)</a>
:markdown
Directives allow you to attach behavior to elements in the DOM. 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].
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: Directive is an abstract concept, instead use concrete directives: [Component], [DynamicComponent], [Decorator]
or [Viewport].
p.
For each directive, the [ElementInjector] attempts to resolve the directive's constructor arguments. A directive consists of a single directive annotation and a controller class. When the directive's [selector] matches
Angular instantiates directives for each matched element using [ElementInjector] in a depth-first order, as declared in the HTML. 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
specified as `@Optional`, returns `null`.
- The primordial 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
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]:
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
Shadow DOM root. Current element is not included in the resolution, therefor even if it could resolve it, it will
be ignored.
- `@Parent() directive:DirectiveType`: any directive that matches the type on a direct parent element only.
- `@Children query:Query<DirectiveType>`: A live collection of direct child directives [TO BE IMPLEMENTED].
- `@Descendants query:Query<DirectiveType>`: A live collection of any child directives [TO BE IMPLEMENTED].
To inject element-specific special objects, declare the constructor parameter as:
- `element: NgElement` to obtain a DOM element (DEPRECATED: replacement coming)
- `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:
```
<div dependency="1">
<div dependency="2">
<div dependency="3" my-directive>
<div dependency="4">
<div dependency="5"></div>
</div>
<div dependency="6"></div>
</div>
</div>
</div>
```
With the following `dependency` decorator and `SomeService` injectable class.
```
@Injectable()
class SomeService {
}
@Decorator({
selector: '[dependency]',
properties: {
'id':'dependency'
}
})
class Dependency {
id:string;
}
```
Let's step through the different ways in which `MyDirective` could be declared...
### No injection
Here the constructor is declared with no arguments, therefore nothing is injected into `MyDirective`.
```
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor() {
}
}
```
This directive would be instantiated with no dependencies.
### Component-level injection
Directives can inject any injectable instance from the closest component injector or any of its parents.
Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type from the parent
component's injector.
```
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(someService: SomeService) {
}
}
```
This directive would be instantiated with a dependency on `SomeService`.
### Injecting a directive from the current element
Directives can inject other directives declared on the current element.
```
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(dependency: Dependency) {
expect(dependency.id).toEqual(3);
}
}
```
This directive would be instantiated with `Dependency` declared at the same element, in this case `dependency="3"`.
### Injecting a directive from a direct parent element
Directives can inject other directives declared on a direct parent element. By definition, a directive with a
`@Parent` annotation does not attempt to resolve dependencies for the current element, even if this would satisfy
the dependency.
```
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Parent() dependency: Dependency) {
expect(dependency.id).toEqual(2);
}
}
```
This directive would be instantiated with `Dependency` declared at the parent element, in this case `dependency="2"`.
### Injecting a directive from any ancestor elements
Directives can inject other directives declared on any ancestor element (in the current Shadow DOM), i.e. on the
parent element and its parents. By definition, a directive with an `@Ancestor` annotation does not attempt to
resolve dependencies for the current element, even if this would satisfy the dependency.
```
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Ancestor() dependency: Dependency) {
expect(dependency.id).toEqual(2);
}
}
```
Unlike the `@Parent` which only checks the parent, `@Ancestor` checks the parent, as well as its
parents recursively. If `dependency="2"` didn't exist on the direct parent, this injection would have returned
`dependency="1"`.
### Injecting a live collection of direct child directives [PENDING IMPLEMENTATION]
A directive can also query for other child directives. Since parent directives are instantiated before child
directives, a directive can't simply inject the list of child directives. Instead, the directive asynchronously
injects a [Query], which updates 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 {
constructor(@Children() dependencies:Query<Maker>) {
}
}
```
This directive would be instantiated with a [Query] 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 direct descendant directives [PENDING IMPLEMENTATION]
Similar to `@Children` above, but also includes the children of the child elements.
```
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Children() dependencies:Query<Maker>) {
}
}
```
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 {
constructor(@Optional() dependency:Dependency) {
}
}
```
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 .l-main-section
h2 Members
.l-sub-section
h3 constructor
h2 Understanding How Injection Works
pre.prettyprint
code.
({
selector,
properties,
events,
hostListeners,
lifecycle
}:{
selector:string,
properties:any,
events:List,
hostListeners: any,
lifecycle:List
}={})
p There are three stages of injection resolution.
ol :markdown
li <strong>Pre-existing Injectors:</strong>
ul
li The terminal [Injector] cannot resolve dependencies. It either throws an error or, if the dependency was specified as @Optional, returns null.
li The primordial injector resolves browser singleton resources, such as: cookies, title, location, and others.
li <strong>Component Injectors:</strong> Each @Component has its own [Injector], and they follow the same parent-child hierarchy as the components in the DOM.
li <strong>Element Injectors:</strong> 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.
p 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.
p Angular then resolves dependencies as follows, according to the order in which they appear in the [View]:
ol .l-sub-section
li Dependencies on the current element h3 events
li Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
li Dependencies on component injectors and their parents until it encounters the root component
li Dependencies on pre-existing injectors
p The [ElementInjector] can inject other directives, element-specific special objects, or it can delegate to the parent injector.
p To inject other directives, declare the constructor parameter as: :markdown
Enumerates the set of emitted events.
ul
li directive:DirectiveType: a directive on the current element only ## Syntax
li @Ancestor() directive:DirectiveType: any directive that matches the type between the current element and the Shadow DOM root. Current element is not included in the resolution, therefor even if it could resolve it, it will be ignored.
li @Parent() directive:DirectiveType: any directive that matches the type on a direct parent element only. ```
li @Children query:Query<DirectiveType>: A live collection of direct child directives [TO BE IMPLEMENTED]. @Component({
li @Descendants query:Query<DirectiveType>: A live collection of any child directives [TO BE IMPLEMENTED]. events: ['status-change']
})
p To inject element-specific special objects, declare the constructor parameter as: class TaskComponent {
statusChange:EventEmitter;
ul
li element: NgElement to obtain a DOM element (DEPRECATED: replacement coming) constructor() {
li viewContainer: ViewContainer to control child template instantiation, for [Viewport] directives only this.complete = new EventEmitter();
li bindingPropagation: BindingPropagation to control change detection in a more granular way. }
.l-main-section onComplete() {
h2 Example of Injection this.statusChange.next("completed");
}
p The following example demonstrates how dependency injection resolves constructor arguments in practice.
p Assume this HTML template:
pre.prettyprint.linenums.lang-html
code.
&lt;div dependency=&quot;1&quot;&gt;
&lt;div dependency=&quot;2&quot;&gt;
&lt;div dependency=&quot;3&quot; my-directive&gt;
&lt;div dependency=&quot;4&quot;&gt;
&lt;div dependency=&quot;5&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div dependency=&quot;6&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
p With the following dependency decorator and SomeService injectable class.
pre.prettyprint.linenums
code.
@Injectable()
class SomeService {
} }
```
.l-sub-section
h3 hasLifecycleHook
pre.prettyprint
code.
(hook:string)
:markdown
Returns true if a directive participates in a given [LifecycleEvent].
See: [onChange], [onDestroy], [onAllChangesDone] for details.
.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.
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.
[TO BE IMPLEMENTED]
## Syntax
```
@Directive({
hostListeners: {
'event1': 'onMethod1(arguments)',
'target:event2': 'onMethod2(arguments)',
...
}
}
```
## 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({ @Decorator({
selector: '[dependency]', selector: 'input',
bind: { hostListeners: {
'id':'dependency' 'change': 'onChange($event)',
'window:resize': 'onResize($event)'
} }
}) })
class Dependency { class InputDecorator {
id:string; onChange(event:Event) {
}
onResize(event:Event) {
}
} }
```
Here the `onChange` method of `InputDecorator` is invoked whenever the DOM element fires the 'change' event.
p Let's step through the different ways in which MyDirective could be declared...
.l-sub-section
h3 No injection
p Here the constructor is declared with no arguments, therefore nothing is injected into MyDirective.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor() {
}
}
p This directive would be instantiated with no dependencies.
.l-sub-section
h3 Component-level injection
p Directives can inject any injectable instance from the closest component injector or any of its parents.
p Here, the constructor declares a parameter, someService, and injects the SomeService type from the parent component's injector.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(someService: SomeService) {
}
}
p This directive would be instantiated with a dependency on SomeService.
.l-sub-section .l-sub-section
h3 Injecting a directive from the current element h3 lifecycle
:markdown
Specifies a set of lifecycle hostListeners in which the directive participates.
See: [onChange], [onDestroy], [onAllChangesDone] for details.
p Directives can inject other directives declared on the current element.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(dependency: Dependency) {
expect(dependency.id).toEqual(3);
}
}
p This directive would be instantiated with Dependency declared at the same element, in this case dependency="3".
.l-sub-section .l-sub-section
h3 Injecting a directive from a direct parent element h3 properties
p Directives can inject other directives declared on a direct parent element. By definition, a directive with a @Parent annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
pre.prettyprint.linenums :markdown
code. Enumerates the set of properties that accept data binding for a directive.
@Decorator({ selector: '[my-directive]' })
class MyDirective { The `properties` property defines a set of `directiveProperty` to `bindingProperty`
constructor(@Parent() dependency: Dependency) { key-value pairs:
expect(dependency.id).toEqual(2);
} - `directiveProperty` specifies the component property where the value is written.
} - `bindingProperty` specifies the DOM property where the value is read from.
p This directive would be instantiated with Dependency declared at the parent element, in this case dependency="2". You can include [Pipes] 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.
.l-sub-section
h3 Injecting a directive from any ancestor elements
## Syntax
p Directives can inject other directives declared on any ancestor element (in the current Shadow DOM), i.e. on the parent element and its parents. By definition, a directive with an @Ancestor annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
```
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Ancestor() dependency: Dependency) {
expect(dependency.id).toEqual(2);
}
}
p Unlike the @Parent which only checks the parent, @Ancestor checks the parent, as well as its parents recursively. If dependency="2" didn't exist on the direct parent, this injection would have returned dependency="1".
.l-sub-section
h3 Injecting a live collection of direct child directives [PENDING IMPLEMENTATION]
p A directive can also query for other child directives. Since parent directives are instantiated before child directives, a directive can't simply inject the list of child directives. Instead, the directive asynchronously injects a [Query], which updates as children are added, removed, or moved by any [ViewPort] directive such as a for, an if, or a switch.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Children() dependencies:Query<Maker>) {
}
}
p. This directive would be instantiated with a [Query] which contains Dependency 4 and 6. Here, Dependency 5 would not be included, because it is not a direct child.
.l-sub-section
h3 Injecting a live collection of direct descendant directives [PENDING IMPLEMENTATION]
p Similar to @Children above, but also includes the children of the child elements.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Children() dependencies:Query<Maker>) {
}
}
p This directive would be instantiated with a Query which would contain Dependency 4, 5 and 6.
.l-sub-section
h3 Optional injection
p 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.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Optional() dependency:Dependency) {
}
}
p 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
p
strong constructor({ selector, bind, events, lifecycle }:{ selector:string, bind:any, events: any, lifecycle:List }={})
.l-sub-section
h3 bind
p Enumerates the set of properties that accept data binding for a directive.
p The bind property defines a set of directiveProperty to bindingProperty key-value pairs:
ul
li directiveProperty specifies the component property where the value is written.
li bindingProperty specifies the DOM property where the value is read from.
p You can include [Pipes] 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.
.l-main-section
h2 Syntax
pre.prettyprint.linenums
code.
@Directive({ @Directive({
bind: { properties: {
'directiveProperty1': 'bindingProperty1', 'directiveProperty1': 'bindingProperty1',
'directiveProperty2': 'bindingProperty2 | pipe1 | ...', 'directiveProperty2': 'bindingProperty2 | pipe1 | ...',
... ...
} }
} }
```
.l-main-section
h2 Basic Property Binding
## Basic Property Binding
p 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:
We can easily build a simple `Tooltip` directive that exposes a `tooltip` property, which can be used in templates
pre.prettyprint.linenums with standard Angular syntax. For example:
code.
```
@Decorator({ @Decorator({
selector: '[tooltip]', selector: '[tooltip]',
bind: { properties: {
'text': 'tooltip' 'text': 'tooltip'
} }
}) })
@ -270,28 +434,32 @@ p.
// This will get called every time the 'tooltip' binding changes with the new value. // This will get called every time the 'tooltip' binding changes with the new value.
} }
} }
```
p 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:
We can then bind to the `tooltip' property as either an expression (`someExpression`) or as a string literal, as
pre.prettyprint.linenums shown in the HTML template below:
code.
&lt;div [tooltip]=&quot;someExpression&quot;&gt;...&lt;/div&gt; ```html
&lt;div tooltip=&quot;Some Text&quot;&gt;...&lt;/div&gt; <div [tooltip]="someExpression">...</div>
<div tooltip="Some Text">...</div>
p Whenever the someExpression expression changes, the bind declaration instructs Angular to update the Tooltip's text property. ```
.l-main-section Whenever the `someExpression` expression changes, the `properties` declaration instructs
h2 Bindings With Pipes Angular to update the `Tooltip`'s `text` property.
p You can also use pipes when writing binding definitions for a directive.
p For example, we could write a binding that updates the directive on structural changes, rather than on reference changes, as normally occurs in change detection. (See: [Pipe] and [keyValueDiff] documentation for more details.) ## Bindings With Pipes
pre.prettyprint.linenums You can also use pipes when writing binding definitions for a directive.
code.
For example, we could write a binding that updates the directive on structural changes, rather than on reference
changes, as normally occurs in change detection. (See: [Pipe] and [keyValueDiff] documentation for more details.)
```
@Decorator({ @Decorator({
selector: '[class-set]', selector: '[class-set]',
bind: { properties: {
'classChanges': 'classSet | keyValDiff' 'classChanges': 'classSet | keyValDiff'
} }
}) })
@ -300,13 +468,55 @@ p.
// This will get called every time the `class-set` expressions changes its structure. // This will get called every time the `class-set` expressions changes its structure.
} }
} }
```
The template that this directive is used in may also contain its own pipes. For example:
```html
<div [class-set]="someExpression | somePipe">
```
In this case, the two pipes compose as if they were inlined: `someExpression | somePipe | keyValDiff`.
.l-sub-section
h3 selector
:markdown
The CSS selector that triggers the instantiation of a directive.
Angular only allows directives to trigger on CSS selectors that do not cross element boundaries.
`selector` may be declared as one of the following:
- `element-name`: select by element name.
- `.class`: select by class name.
- `[attribute]`: select by attribute name.
- `[attribute=value]`: select by attribute name and value.
- `:not(sub_selector)`: select only if the element does not match the `sub_selector`.
- `selector1, selector2`: select if either `selector1` or `selector2` matches.
Suppose we have a directive with an `input[type=text]` selector.
And the following HTML:
```html
<form>
<input type="text">
<input type="radio">
<form>
```
The directive would only be instantiated on the `<input type="text">` element.
p The template that this directive is used in may also contain its own pipes. For example:
pre.prettyprint.linenums
code.
&lt;div [class-set]=&quot;someExpression | somePipe&quot;&gt;
p In this case, the two pipes compose as if they were inlined: someExpression | somePipe | keyValDiff.
.location-badge exported from angular2/annotations

View File

@ -0,0 +1,23 @@
.l-main-section
h2 onAllChangesDone <span class="type">variable</span>
p(class="module") exported from <a href="/angular2/annotations">angular2/annotations</a>
:markdown
Notify a directive when the bindings of all its children have been changed.
## Example:
```
@Decorator({
selector: '[class-set]',
lifecycle: [onAllChangesDone]
})
class ClassSet {
onAllChangesDone() {
}
}
```

View File

@ -0,0 +1,39 @@
.l-main-section
h2 onChange <span class="type">variable</span>
p(class="module") exported from <a href="/angular2/annotations">angular2/annotations</a>
:markdown
Notify a directive when any of its bindings have changed.
This method is called right after the directive's bindings have been checked,
and before any of its children's bindings have been checked.
It is invoked only if at least one of the directive's bindings has changed.
## Example:
```
@Decorator({
selector: '[class-set]',
properties: {
'propA': 'propA'
'propB': 'propB'
},
lifecycle: [onChange]
})
class ClassSet {
propA;
propB;
onChange(changes:{[idx: string, PropertyUpdate]}) {
// This will get called after any of the properties have been updated.
if (changes['propA']) {
// if propA was updated
}
if (changes['propA']) {
// if propB was updated
}
}
}
```

View File

@ -0,0 +1,22 @@
.l-main-section
h2 onDestroy <span class="type">variable</span>
p(class="module") exported from <a href="/angular2/annotations">angular2/annotations</a>
:markdown
Notify a directive whenever a [View] that contains it is destroyed.
## Example
```
@Decorator({
...,
lifecycle: [onDestroy]
})
class ClassSet {
onDestroy() {
// invoked to notify directive of the containing view destruction.
}
}
```

View File

@ -1,11 +0,0 @@
{
"directive-class": {
"title": "Directive Class",
"type": "class"
},
"component-class": {
"title": "Component Class",
"type": "class"
}
}

View File

@ -1,312 +0,0 @@
p.
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].
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:
p.
For each directive, the [ElementInjector] attempts to resolve the directive's constructor arguments.
Angular instantiates directives for each matched element using [ElementInjector] in a depth-first order, as declared in the HTML.
.l-main-section
h2 Understanding How Injection Works
p There are three stages of injection resolution.
ol
li <strong>Pre-existing Injectors:</strong>
ul
li The terminal [Injector] cannot resolve dependencies. It either throws an error or, if the dependency was specified as @Optional, returns null.
li The primordial injector resolves browser singleton resources, such as: cookies, title, location, and others.
li <strong>Component Injectors:</strong> Each @Component has its own [Injector], and they follow the same parent-child hierarchy as the components in the DOM.
li <strong>Element Injectors:</strong> 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.
p 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.
p Angular then resolves dependencies as follows, according to the order in which they appear in the [View]:
ol
li Dependencies on the current element
li Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
li Dependencies on component injectors and their parents until it encounters the root component
li Dependencies on pre-existing injectors
p The [ElementInjector] can inject other directives, element-specific special objects, or it can delegate to the parent injector.
p To inject other directives, declare the constructor parameter as:
ul
li directive:DirectiveType: a directive on the current element only
li @Ancestor() directive:DirectiveType: any directive that matches the type between the current element and the Shadow DOM root. Current element is not included in the resolution, therefor even if it could resolve it, it will be ignored.
li @Parent() directive:DirectiveType: any directive that matches the type on a direct parent element only.
li @Children query:Query<DirectiveType>: A live collection of direct child directives [TO BE IMPLEMENTED].
li @Descendants query:Query<DirectiveType>: A live collection of any child directives [TO BE IMPLEMENTED].
p To inject element-specific special objects, declare the constructor parameter as:
ul
li element: NgElement to obtain a DOM element (DEPRECATED: replacement coming)
li viewContainer: ViewContainer to control child template instantiation, for [Viewport] directives only
li bindingPropagation: BindingPropagation to control change detection in a more granular way.
.l-main-section
h2 Example of Injection
p The following example demonstrates how dependency injection resolves constructor arguments in practice.
p Assume this HTML template:
pre.prettyprint.linenums.lang-html
code.
&lt;div dependency=&quot;1&quot;&gt;
&lt;div dependency=&quot;2&quot;&gt;
&lt;div dependency=&quot;3&quot; my-directive&gt;
&lt;div dependency=&quot;4&quot;&gt;
&lt;div dependency=&quot;5&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div dependency=&quot;6&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
p With the following dependency decorator and SomeService injectable class.
pre.prettyprint.linenums
code.
@Injectable()
class SomeService {
}
@Decorator({
selector: '[dependency]',
bind: {
'id':'dependency'
}
})
class Dependency {
id:string;
}
p Let's step through the different ways in which MyDirective could be declared...
.l-sub-section
h3 No injection
p Here the constructor is declared with no arguments, therefore nothing is injected into MyDirective.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor() {
}
}
p This directive would be instantiated with no dependencies.
.l-sub-section
h3 Component-level injection
p Directives can inject any injectable instance from the closest component injector or any of its parents.
p Here, the constructor declares a parameter, someService, and injects the SomeService type from the parent component's injector.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(someService: SomeService) {
}
}
p This directive would be instantiated with a dependency on SomeService.
.l-sub-section
h3 Injecting a directive from the current element
p Directives can inject other directives declared on the current element.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(dependency: Dependency) {
expect(dependency.id).toEqual(3);
}
}
p This directive would be instantiated with Dependency declared at the same element, in this case dependency="3".
.l-sub-section
h3 Injecting a directive from a direct parent element
p Directives can inject other directives declared on a direct parent element. By definition, a directive with a @Parent annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Parent() dependency: Dependency) {
expect(dependency.id).toEqual(2);
}
}
p This directive would be instantiated with Dependency declared at the parent element, in this case dependency="2".
.l-sub-section
h3 Injecting a directive from any ancestor elements
p Directives can inject other directives declared on any ancestor element (in the current Shadow DOM), i.e. on the parent element and its parents. By definition, a directive with an @Ancestor annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Ancestor() dependency: Dependency) {
expect(dependency.id).toEqual(2);
}
}
p Unlike the @Parent which only checks the parent, @Ancestor checks the parent, as well as its parents recursively. If dependency="2" didn't exist on the direct parent, this injection would have returned dependency="1".
.l-sub-section
h3 Injecting a live collection of direct child directives [PENDING IMPLEMENTATION]
p A directive can also query for other child directives. Since parent directives are instantiated before child directives, a directive can't simply inject the list of child directives. Instead, the directive asynchronously injects a [Query], which updates as children are added, removed, or moved by any [ViewPort] directive such as a for, an if, or a switch.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Children() dependencies:Query<Maker>) {
}
}
p. This directive would be instantiated with a [Query] which contains Dependency 4 and 6. Here, Dependency 5 would not be included, because it is not a direct child.
.l-sub-section
h3 Injecting a live collection of direct descendant directives [PENDING IMPLEMENTATION]
p Similar to @Children above, but also includes the children of the child elements.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Children() dependencies:Query<Maker>) {
}
}
p This directive would be instantiated with a Query which would contain Dependency 4, 5 and 6.
.l-sub-section
h3 Optional injection
p 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.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Optional() dependency:Dependency) {
}
}
p 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
p
strong constructor({ selector, bind, events, lifecycle }:{ selector:string, bind:any, events: any, lifecycle:List }={})
.l-sub-section
h3 bind
p Enumerates the set of properties that accept data binding for a directive.
p The bind property defines a set of directiveProperty to bindingProperty key-value pairs:
ul
li directiveProperty specifies the component property where the value is written.
li bindingProperty specifies the DOM property where the value is read from.
p You can include [Pipes] 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.
.l-main-section
h2 Syntax
pre.prettyprint.linenums
code.
@Directive({
bind: {
'directiveProperty1': 'bindingProperty1',
'directiveProperty2': 'bindingProperty2 | pipe1 | ...',
...
}
}
.l-main-section
h2 Basic Property Binding
p 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:
pre.prettyprint.linenums
code.
@Decorator({
selector: '[tooltip]',
bind: {
'text': 'tooltip'
}
})
class Tooltip {
set text(text) {
// This will get called every time the 'tooltip' binding changes with the new value.
}
}
p 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:
pre.prettyprint.linenums
code.
&lt;div [tooltip]=&quot;someExpression&quot;&gt;...&lt;/div&gt;
&lt;div tooltip=&quot;Some Text&quot;&gt;...&lt;/div&gt;
p Whenever the someExpression expression changes, the bind declaration instructs Angular to update the Tooltip's text property.
.l-main-section
h2 Bindings With Pipes
p You can also use pipes when writing binding definitions for a directive.
p For example, we could write a binding that updates the directive on structural changes, rather than on reference changes, as normally occurs in change detection. (See: [Pipe] and [keyValueDiff] documentation for more details.)
pre.prettyprint.linenums
code.
@Decorator({
selector: '[class-set]',
bind: {
'classChanges': 'classSet | keyValDiff'
}
})
class ClassSet {
set classChanges(changes:KeyValueChanges) {
// This will get called every time the `class-set` expressions changes its structure.
}
}
p The template that this directive is used in may also contain its own pipes. For example:
pre.prettyprint.linenums
code.
&lt;div [class-set]=&quot;someExpression | somePipe&quot;&gt;
p In this case, the two pipes compose as if they were inlined: someExpression | somePipe | keyValDiff.
.location-badge exported from angular2/annotations

View File

@ -1,312 +0,0 @@
p.
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].
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:
p.
For each directive, the [ElementInjector] attempts to resolve the directive's constructor arguments.
Angular instantiates directives for each matched element using [ElementInjector] in a depth-first order, as declared in the HTML.
.l-main-section
h2 Understanding How Injection Works
p There are three stages of injection resolution.
ol
li <strong>Pre-existing Injectors:</strong>
ul
li The terminal [Injector] cannot resolve dependencies. It either throws an error or, if the dependency was specified as @Optional, returns null.
li The primordial injector resolves browser singleton resources, such as: cookies, title, location, and others.
li <strong>Component Injectors:</strong> Each @Component has its own [Injector], and they follow the same parent-child hierarchy as the components in the DOM.
li <strong>Element Injectors:</strong> 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.
p 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.
p Angular then resolves dependencies as follows, according to the order in which they appear in the [View]:
ol
li Dependencies on the current element
li Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
li Dependencies on component injectors and their parents until it encounters the root component
li Dependencies on pre-existing injectors
p The [ElementInjector] can inject other directives, element-specific special objects, or it can delegate to the parent injector.
p To inject other directives, declare the constructor parameter as:
ul
li directive:DirectiveType: a directive on the current element only
li @Ancestor() directive:DirectiveType: any directive that matches the type between the current element and the Shadow DOM root. Current element is not included in the resolution, therefor even if it could resolve it, it will be ignored.
li @Parent() directive:DirectiveType: any directive that matches the type on a direct parent element only.
li @Children query:Query<DirectiveType>: A live collection of direct child directives [TO BE IMPLEMENTED].
li @Descendants query:Query<DirectiveType>: A live collection of any child directives [TO BE IMPLEMENTED].
p To inject element-specific special objects, declare the constructor parameter as:
ul
li element: NgElement to obtain a DOM element (DEPRECATED: replacement coming)
li viewContainer: ViewContainer to control child template instantiation, for [Viewport] directives only
li bindingPropagation: BindingPropagation to control change detection in a more granular way.
.l-main-section
h2 Example of Injection
p The following example demonstrates how dependency injection resolves constructor arguments in practice.
p Assume this HTML template:
pre.prettyprint.linenums.lang-html
code.
&lt;div dependency=&quot;1&quot;&gt;
&lt;div dependency=&quot;2&quot;&gt;
&lt;div dependency=&quot;3&quot; my-directive&gt;
&lt;div dependency=&quot;4&quot;&gt;
&lt;div dependency=&quot;5&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div dependency=&quot;6&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
p With the following dependency decorator and SomeService injectable class.
pre.prettyprint.linenums
code.
@Injectable()
class SomeService {
}
@Decorator({
selector: '[dependency]',
bind: {
'id':'dependency'
}
})
class Dependency {
id:string;
}
p Let's step through the different ways in which MyDirective could be declared...
.l-sub-section
h3 No injection
p Here the constructor is declared with no arguments, therefore nothing is injected into MyDirective.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor() {
}
}
p This directive would be instantiated with no dependencies.
.l-sub-section
h3 Component-level injection
p Directives can inject any injectable instance from the closest component injector or any of its parents.
p Here, the constructor declares a parameter, someService, and injects the SomeService type from the parent component's injector.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(someService: SomeService) {
}
}
p This directive would be instantiated with a dependency on SomeService.
.l-sub-section
h3 Injecting a directive from the current element
p Directives can inject other directives declared on the current element.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(dependency: Dependency) {
expect(dependency.id).toEqual(3);
}
}
p This directive would be instantiated with Dependency declared at the same element, in this case dependency="3".
.l-sub-section
h3 Injecting a directive from a direct parent element
p Directives can inject other directives declared on a direct parent element. By definition, a directive with a @Parent annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Parent() dependency: Dependency) {
expect(dependency.id).toEqual(2);
}
}
p This directive would be instantiated with Dependency declared at the parent element, in this case dependency="2".
.l-sub-section
h3 Injecting a directive from any ancestor elements
p Directives can inject other directives declared on any ancestor element (in the current Shadow DOM), i.e. on the parent element and its parents. By definition, a directive with an @Ancestor annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Ancestor() dependency: Dependency) {
expect(dependency.id).toEqual(2);
}
}
p Unlike the @Parent which only checks the parent, @Ancestor checks the parent, as well as its parents recursively. If dependency="2" didn't exist on the direct parent, this injection would have returned dependency="1".
.l-sub-section
h3 Injecting a live collection of direct child directives [PENDING IMPLEMENTATION]
p A directive can also query for other child directives. Since parent directives are instantiated before child directives, a directive can't simply inject the list of child directives. Instead, the directive asynchronously injects a [Query], which updates as children are added, removed, or moved by any [ViewPort] directive such as a for, an if, or a switch.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Children() dependencies:Query<Maker>) {
}
}
p. This directive would be instantiated with a [Query] which contains Dependency 4 and 6. Here, Dependency 5 would not be included, because it is not a direct child.
.l-sub-section
h3 Injecting a live collection of direct descendant directives [PENDING IMPLEMENTATION]
p Similar to @Children above, but also includes the children of the child elements.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Children() dependencies:Query<Maker>) {
}
}
p This directive would be instantiated with a Query which would contain Dependency 4, 5 and 6.
.l-sub-section
h3 Optional injection
p 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.
pre.prettyprint.linenums
code.
@Decorator({ selector: '[my-directive]' })
class MyDirective {
constructor(@Optional() dependency:Dependency) {
}
}
p 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
p
strong constructor({ selector, bind, events, lifecycle }:{ selector:string, bind:any, events: any, lifecycle:List }={})
.l-sub-section
h3 bind
p Enumerates the set of properties that accept data binding for a directive.
p The bind property defines a set of directiveProperty to bindingProperty key-value pairs:
ul
li directiveProperty specifies the component property where the value is written.
li bindingProperty specifies the DOM property where the value is read from.
p You can include [Pipes] 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.
.l-main-section
h2 Syntax
pre.prettyprint.linenums
code.
@Directive({
bind: {
'directiveProperty1': 'bindingProperty1',
'directiveProperty2': 'bindingProperty2 | pipe1 | ...',
...
}
}
.l-main-section
h2 Basic Property Binding
p 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:
pre.prettyprint.linenums
code.
@Decorator({
selector: '[tooltip]',
bind: {
'text': 'tooltip'
}
})
class Tooltip {
set text(text) {
// This will get called every time the 'tooltip' binding changes with the new value.
}
}
p 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:
pre.prettyprint.linenums
code.
&lt;div [tooltip]=&quot;someExpression&quot;&gt;...&lt;/div&gt;
&lt;div tooltip=&quot;Some Text&quot;&gt;...&lt;/div&gt;
p Whenever the someExpression expression changes, the bind declaration instructs Angular to update the Tooltip's text property.
.l-main-section
h2 Bindings With Pipes
p You can also use pipes when writing binding definitions for a directive.
p For example, we could write a binding that updates the directive on structural changes, rather than on reference changes, as normally occurs in change detection. (See: [Pipe] and [keyValueDiff] documentation for more details.)
pre.prettyprint.linenums
code.
@Decorator({
selector: '[class-set]',
bind: {
'classChanges': 'classSet | keyValDiff'
}
})
class ClassSet {
set classChanges(changes:KeyValueChanges) {
// This will get called every time the `class-set` expressions changes its structure.
}
}
p The template that this directive is used in may also contain its own pipes. For example:
pre.prettyprint.linenums
code.
&lt;div [class-set]=&quot;someExpression | somePipe&quot;&gt;
p In this case, the two pipes compose as if they were inlined: someExpression | somePipe | keyValDiff.
.location-badge exported from angular2/annotations

View File

@ -0,0 +1,44 @@
p.
<span class="location-badge">exported from <a href="/angular2/change_detection">angular2/change_detection</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/interfaces.js#L34">angular2/src/change_detection/interfaces.js (line 34)</a>
:markdown
Interface used by Angular to control the change detection strategy for an application.
Angular implements the following change detection strategies by default:
- [dynamicChangeDetection]: slower, but does not require `eval()`.
- [jitChangeDetection]: faster, but requires `eval()`.
In JavaScript, you should always use `jitChangeDetection`, unless you are in an environment that has
[CSP](https://developer.mozilla.org/en-US/docs/Web/Security/CSP), such as a Chrome Extension.
In Dart, use `dynamicChangeDetection` during development. The Angular transformer generates an analog to the
`jitChangeDetection` strategy at compile time.
See: [dynamicChangeDetection], [jitChangeDetection]
# Example
```javascript
bootstrap(MyApp, [bind(ChangeDetection).toValue(dynamicChangeDetection)]);
```
.l-main-section
h2 Members
.l-sub-section
h3 createProtoChangeDetector
pre.prettyprint
code.
(name:string, changeControlStrategy:string=DEFAULT)
:markdown

View File

@ -0,0 +1,84 @@
p.
<span class="location-badge">exported from <a href="/angular2/change_detection">angular2/change_detection</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detector_ref.js#L11">angular2/src/change_detection/change_detector_ref.js (line 11)</a>
:markdown
Controls change detection.
[ChangeDetectorRef] allows requesting checks for detectors that rely on observables. It also allows detaching and
attaching change detector subtrees.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(cd:ChangeDetector)
:markdown
.l-sub-section
h3 detach
pre.prettyprint
code.
()
:markdown
Detaches the change detector from the change detector tree.
The detached change detector will not be checked until it is reattached.
.l-sub-section
h3 reattach
pre.prettyprint
code.
()
:markdown
Reattach the change detector to the change detector tree.
This also requests a check of this change detector. This reattached change detector will be checked during the
next change detection run.
.l-sub-section
h3 requestCheck
pre.prettyprint
code.
()
:markdown
Request to check all ON_PUSH ancestors.

View File

@ -0,0 +1,53 @@
p.
<span class="location-badge">exported from <a href="/angular2/change_detection">angular2/change_detection</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detection.js#L24">angular2/src/change_detection/change_detection.js (line 24)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(registry:PipeRegistry)
:markdown
.l-sub-section
h3 createProtoChangeDetector
pre.prettyprint
code.
(name:string, changeControlStrategy:string = DEFAULT)
:markdown
.l-sub-section
h3 registry
:markdown

View File

@ -0,0 +1,53 @@
p.
<span class="location-badge">exported from <a href="/angular2/change_detection">angular2/change_detection</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detection.js#L41">angular2/src/change_detection/change_detection.js (line 41)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(registry:PipeRegistry)
:markdown
.l-sub-section
h3 createProtoChangeDetector
pre.prettyprint
code.
(name:string, changeControlStrategy:string = DEFAULT)
:markdown
.l-sub-section
h3 registry
:markdown

View File

@ -0,0 +1,84 @@
p.
<span class="location-badge">exported from <a href="/angular2/change_detection">angular2/change_detection</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/life_cycle/life_cycle.js#L31">angular2/src/core/life_cycle/life_cycle.js (line 31)</a>
:markdown
Provides access to explicitly trigger change detection in an application.
By default, [Zone] triggers change detection in Angular on each virtual machine (VM) turn. When testing, or in some
limited application use cases, a developer can also trigger change detection with the `lifecycle.tick()` method.
Each Angular application has a single `LifeCycle` instance.
# Example
This is a contrived example, since the bootstrap automatically runs inside of the [Zone], which invokes
`lifecycle.tick()` on your behalf.
```javascript
bootstrap(MyApp).then((ref:ComponentRef) => {
var lifeCycle = ref.injector.get(LifeCycle);
var myApp = ref.instance;
ref.doSomething();
lifecycle.tick();
});
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(exceptionHandler:ExceptionHandler, changeDetector:ChangeDetector = null, enforceNoNewChanges:boolean = false)
:markdown
.l-sub-section
h3 registerWith
pre.prettyprint
code.
(zone:VmTurnZone, changeDetector:ChangeDetector = null)
:markdown
.l-sub-section
h3 tick
pre.prettyprint
code.
()
:markdown
Invoke this method to explicitly process change detection and its side-effects.
In development mode, `tick()` also performs a second change detection cycle to ensure that no further
changes are detected. If additional changes are picked up during this second cycle, bindings in the app have
side-effects that cannot be resolved in a single change detection pass. In this case, Angular throws an error,
since an Angular application can only have one change detection pass during which all change detection must
complete.

View File

@ -0,0 +1,21 @@
{
"DynamicChangeDetection-class" : {
"title" : "DynamicChangeDetection Class"
},
"JitChangeDetection-class" : {
"title" : "JitChangeDetection Class"
},
"ChangeDetectorRef-class" : {
"title" : "ChangeDetectorRef Class"
},
"ChangeDetection-class" : {
"title" : "ChangeDetection Class"
},
"LifeCycle-class" : {
"title" : "LifeCycle Class"
}
}

View File

@ -0,0 +1,5 @@
ul
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
name = page.menuTitle || page.title
selected = current.path[4] == slug ? 'is-selected':''
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{slug}</a>

View File

@ -0,0 +1,50 @@
p.
<span class="location-badge">exported from <a href="/angular2/core">angular2/core</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/exception_handler.js#L34">angular2/src/core/exception_handler.js (line 34)</a>
:markdown
Provides a hook for centralized exception handling.
The default implementation of `ExceptionHandler` prints error messages to the `Console`. To intercept error handling,
write a custom exception handler that replaces this default as appropriate for your app.
# Example
```javascript
@Component({
selector: 'my-app',
injectables: [
bind(ExceptionHandler).toClass(MyExceptionHandler)
]
})
@View(...)
class MyApp { ... }
class MyExceptionHandler implements ExceptionHandler {
call(error, stackTrace = null, reason = null) {
// do something with the exception
}
}
```
.l-main-section
h2 Members
.l-sub-section
h3 call
pre.prettyprint
code.
(error, stackTrace = null, reason = null)
:markdown

View File

@ -0,0 +1,57 @@
p.
<span class="location-badge">exported from <a href="/angular2/core">angular2/core</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/ng_element.js#L13">angular2/src/core/compiler/ng_element.js (line 13)</a>
:markdown
Allows direct access to the underlying DOM element.
Attention: NgElement will be replaced by a different concept
for accessing an element in a way that is compatible with the render layer.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(view, boundElementIndex)
:markdown
.l-sub-section
h3 domElement
:markdown
.l-sub-section
h3 getAttribute
pre.prettyprint
code.
(name:string)
:markdown

View File

@ -0,0 +1,13 @@
{
"bootstrap-function" : {
"title" : "bootstrap Function"
},
"NgElement-class" : {
"title" : "NgElement Class"
},
"ExceptionHandler-class" : {
"title" : "ExceptionHandler Class"
}
}

View File

@ -0,0 +1,113 @@
.l-main-section
h2(class="function export") bootstrap
p <code>(appComponentType: Type, componentInjectableBindings: List&lt;Binding&gt; = null, errorReporter: Function = null)</code>
p(class="module").
exported from <a href="/angular2/core">angular2/core</a>
:markdown
Bootstrapping for Angular applications.
You instantiate an Angular application by explicitly specifying a component to use as the root component for your
application via the `bootstrap()` method.
## Simple Example
Assuming this `index.html`:
```html
<html>
<!-- load Angular script tags here. -->
<body>
<my-app>loading...</my-app>
</body>
</html>
```
An application is bootstrapped inside an existing browser DOM, typically `index.html`. Unlike Angular 1, Angular 2
does not compile/process bindings in `index.html`. This is mainly for security reasons, as well as architectural
changes in Angular 2. This means that `index.html` can safely be processed using server-side technologies such as
bindings. Bindings can thus use double-curly `{{ syntax }}` without collision from Angular 2 component double-curly
`{{ syntax }}`.
We can use this script code:
```
@Component({
selector: 'my-app'
})
@View({
template: 'Hello {{ name }}!'
})
class MyApp {
name:string;
constructor() {
this.name = 'World';
}
}
main() {
return bootstrap(MyApp);
}
```
When the app developer invokes `bootstrap()` with the root component `MyApp` as its argument, Angular performs the
following tasks:
1. It uses the component's `selector` property to locate the DOM element which needs to be upgraded into
the angular component.
2. It creates a new child injector (from the primordial injector) and configures the injector with the component's
`injectables`. Optionally, you can also override the injector configuration for an app by invoking
`bootstrap` with the `componentInjectableBindings` argument.
3. It creates a new [Zone] and connects it to the angular application's change detection domain instance.
4. It creates a shadow DOM on the selected component's host element and loads the template into it.
5. It instantiates the specified component.
6. Finally, Angular performs change detection to apply the initial data bindings for the application.
## Instantiating Multiple Applications on a Single Page
There are two ways to do this.
### Isolated Applications
Angular creates a new application each time that the `bootstrap()` method is invoked. When multiple applications
are created for a page, Angular treats each application as independent within an isolated change detection and
[Zone] domain. If you need to share data between applications, use the strategy described in the next
section, "Applications That Share Change Detection."
### Applications That Share Change Detection
If you need to bootstrap multiple applications that share common data, the applications must share a common
change detection and zone. To do that, create a meta-component that lists the application components in its template.
By only invoking the `bootstrap()` method once, with the meta-component as its argument, you ensure that only a
single change detection zone is created and therefore data can be shared across the applications.
## Primordial Injector
When working within a browser window, there are many singleton resources: cookies, title, location, and others.
Angular services that represent these resources must likewise be shared across all Angular applications that
occupy the same browser window. For this reason, Angular creates exactly one global primordial injector which stores
all shared services, and each angular application injector has the primordial injector as its parent.
Each application has its own private injector as well. When there are multiple applications on a page, Angular treats
each application injector's services as private to that application.
# API
- [appComponentType]: The root component which should act as the application. This is a reference to a [Type]
which is annotated with `@Component(...)`.
- [componentInjectableBindings]: An additional set of bindings that can be added to the [Component.injectables] to
override default injection behavior.
- [errorReporter]: `function(exception:any, stackTrace:string)` a default error reporter for unhandled exceptions.
Returns a [Promise] with the application`s private [Injector].

View File

@ -0,0 +1,5 @@
ul
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
name = page.menuTitle || page.title
selected = current.path[4] == slug ? 'is-selected':''
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{slug}</a>

View File

@ -0,0 +1,256 @@
p.
<span class="location-badge">exported from <a href="/angular2/di">angular2/di</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/binding.js#L49">angular2/src/di/binding.js (line 49)</a>
:markdown
Describes how the [Injector] should instantiate a given token.
See [bind].
## Example
```javascript
var injector = Injector.resolveAndCreate([
new Binding(String, { toValue: 'Hello' })
]);
expect(injector.get(String)).toEqual('Hello');
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(token, {
toClass,
toValue,
toAlias,
toFactory,
toAsyncFactory,
deps
})
:markdown
.l-sub-section
h3 dependencies
:markdown
Used in conjunction with `toFactory` or `toAsyncFactory` and specifies the `token`s which should be injected
into the factory function.
```javascript
var injector = Injector.resolveAndCreate([
new Binding(Number, { toFactory: () => { return 1+2; }}),
new Binding(String, { toFactory: (value) => { return "Value: " + value; },
dependencies: [String] })
]);
expect(injector.get(Number)).toEqual(3);
expect(injector.get(String)).toEqual('Value: 3');
```
.l-sub-section
h3 resolve
pre.prettyprint
code.
()
:markdown
.l-sub-section
h3 toAlias
:markdown
Bind a key to an alias of an existing key.
An alias means that we will return the same instance as if the alias token was used. (This is in contrast to
`toClass` where a separet instance of `toClass` will be returned.)
Becuse `toAlias` and `toClass` are often confused the example contains both use cases for easy comparison.
```javascript
class Vehicle {}
class Car extends Vehicle {}
var injectorAlias = Injector.resolveAndCreate([
Car,
new Binding(Vehicle, { toAlias: Car })
]);
var injectorClass = Injector.resolveAndCreate([
Car,
new Binding(Vehicle, { toClass: Car })
]);
expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
```
.l-sub-section
h3 toAsyncFactory
:markdown
Bind a key to a function which computes the value asynchronously.
```javascript
var injector = Injector.resolveAndCreate([
new Binding(Number, { toAsyncFactory: () => {
return new Promise((resolve) => resolve(1 + 2));
}}),
new Binding(String, { toFactory: (value) => { return "Value: " + value; },
dependencies: [String]})
]);
injector.asyncGet(Number).then((v) => expect(v).toBe(3));
injector.asyncGet(String).then((v) => expect(v).toBe('Value: 3'));
```
The interesting thing to note is that event thougt `Numeber` has an async factory, the `String` factory
function takes the resolved value. This shows that the [Injector] delays executing of the `String` factory
until after the `Number` is resolved. This can only be done if the `token` is retrive
.l-sub-section
h3 toClass
:markdown
Bind an interface to an implementation / subclass.
Becuse `toAlias` and `toClass` are often confused the example contains both use cases for easy comparison.
```javascript
class Vehicle {}
class Car extends Vehicle {}
var injectorClass = Injector.resolveAndCreate([
Car,
new Binding(Vehicle, { toClass: Car })
]);
var injectorAlias = Injector.resolveAndCreate([
Car,
new Binding(Vehicle, { toAlias: Car })
]);
expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
```
.l-sub-section
h3 toFactory
:markdown
Bind a key to a function which computes the value.
```javascript
var injector = Injector.resolveAndCreate([
new Binding(Number, { toFactory: () => { return 1+2; }}),
new Binding(String, { toFactory: (value) => { return "Value: " + value; },
dependencies: [String] })
]);
expect(injector.get(Number)).toEqual(3);
expect(injector.get(String)).toEqual('Value: 3');
```
.l-sub-section
h3 toValue
:markdown
Bind a key to a value.
```javascript
var injector = Injector.resolveAndCreate([
new Binding(String, { toValue: 'Hello' })
]);
expect(injector.get(String)).toEqual('Hello');
```
.l-sub-section
h3 token
:markdown
Token used when retriving this binding. Usually the [Type].

View File

@ -0,0 +1,216 @@
p.
<span class="location-badge">exported from <a href="/angular2/di">angular2/di</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/binding.js#L299">angular2/src/di/binding.js (line 299)</a>
:markdown
Helper class for [bind] function.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(token)
:markdown
.l-sub-section
h3 toAlias
pre.prettyprint
code.
(aliasToken)
:markdown
Bind a key to an alias of an existing key.
An alias means that we will return the same instance as if the alias token was used. (This is in contrast to
`toClass` where a separet instance of `toClass` will be returned.)
Becuse `toAlias` and `toClass` are often confused the example contains both use cases for easy comparison.
```javascript
class Vehicle {}
class Car extends Vehicle {}
var injectorAlias = Injector.resolveAndCreate([
Car,
bind(Vehicle).toAlias(Car)
]);
var injectorClass = Injector.resolveAndCreate([
Car,
bind(Vehicle).toClass(Car)
]);
expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
```
.l-sub-section
h3 toAsyncFactory
pre.prettyprint
code.
(factoryFunction:Function, dependencies:List = null)
:markdown
Bind a key to a function which computes the value asynchronously.
```javascript
var injector = Injector.resolveAndCreate([
bind(Number).toAsyncFactory(() => {
return new Promise((resolve) => resolve(1 + 2));
}),
bind(String).toFactory((v) => { return "Value: " + v; }, [String])
]);
injector.asyncGet(Number).then((v) => expect(v).toBe(3));
injector.asyncGet(String).then((v) => expect(v).toBe('Value: 3'));
```
The interesting thing to note is that event thougt `Numeber` has an async factory, the `String` factory
function takes the resolved value. This shows that the [Injector] delays executing of the `String` factory
until after the `Number` is resolved. This can only be done if the `token` is retrive
.l-sub-section
h3 toClass
pre.prettyprint
code.
(type:Type)
:markdown
Bind an interface to an implementation / subclass.
Becuse `toAlias` and `toClass` are often confused the example contains both use cases for easy comparison.
```javascript
class Vehicle {}
class Car extends Vehicle {}
var injectorClass = Injector.resolveAndCreate([
Car,
bind(Vehicle).toClass(Car)
]);
var injectorAlias = Injector.resolveAndCreate([
Car,
bind(Vehicle).toAlias(Car)
]);
expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
```
.l-sub-section
h3 toFactory
pre.prettyprint
code.
(factoryFunction:Function, dependencies:List = null)
:markdown
Bind a key to a function which computes the value.
```javascript
var injector = Injector.resolveAndCreate([
bind(Number).toFactory(() => { return 1+2; }}),
bind(String).toFactory((v) => { return "Value: " + v; }, [String] })
]);
expect(injector.get(Number)).toEqual(3);
expect(injector.get(String)).toEqual('Value: 3');
```
.l-sub-section
h3 toValue
pre.prettyprint
code.
(value)
:markdown
Bind a key to a value.
```javascript
var injector = Injector.resolveAndCreate([
bind(String).toValue('Hello')
]);
expect(injector.get(String)).toEqual('Hello');
```
.l-sub-section
h3 token
:markdown

View File

@ -0,0 +1,215 @@
p.
<span class="location-badge">exported from <a href="/angular2/di">angular2/di</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/injector.js#L60">angular2/src/di/injector.js (line 60)</a>
:markdown
A dependency injection container used for resolving dependencies.
An `Injector` is a replacement for a `new` operator, which can automatically resolve the constructor dependencies.
In typical use, application code asks for the dependencies in the constructor and they are resolved by the
`Injector`.
## Example:
Suppose that we want to inject an `Engine` into class `Car`, we would define it like this:
```javascript
class Engine {
}
class Car {
constructor(@Inject(Engine) engine) {
}
}
```
Next we need to write the code that creates and instantiates the `Injector`. We then ask for the `root` object,
`Car`, so that the `Injector` can recursively build all of that object's dependencies.
```javascript
main() {
var injector = Injector.resolveAndCreate([Car, Engine]);
// Get a reference to the `root` object, which will recursively instantiate the tree.
var car = injector.get(Car);
}
```
Notice that we don't use the `new` operator because we explicitly want to have the `Injector` resolve all of the
object's dependencies automatically.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(bindings:List&lt;ResolvedBinding&gt;, parent:Injector, defaultBindings:boolean, [object Object], [object Object], [object Object])
:markdown
.l-sub-section
h3 asyncGet
pre.prettyprint
code.
(token, [object Object])
:markdown
Used to retrieve an instance from the injector asynchronously. Used with asynchronous bindings.
.l-sub-section
h3 createChildFromResolved
pre.prettyprint
code.
(bindings:List&lt;ResolvedBinding&gt;, [object Object])
:markdown
Create a child injector and load a new set of [ResolvedBinding] into it.
.l-sub-section
h3 fromResolvedBindings
pre.prettyprint
code.
(bindings:List&lt;ResolvedBinding&gt;, {defaultBindings=false}={}, [object Object], [object Object])
:markdown
Creates an injector from previously resolved bindings. This bypasses resolution and flattening. This API is
recommended way to construct injectors in performance-sensitive parts.
.l-sub-section
h3 get
pre.prettyprint
code.
(token, [object Object])
:markdown
Used to retrieve an instance from the injector.
.l-sub-section
h3 getOptional
pre.prettyprint
code.
(token, [object Object])
:markdown
Used to retrieve an instance from the injector.
.l-sub-section
h3 resolve
pre.prettyprint
code.
(bindings:List, [object Object])
:markdown
Turns a list of binding definitions into internal resolved list of resolved bindings.
A resolution is a process of flattening multiple nested lists and converting individual bindings into a
list of [ResolvedBinding]s. The resolution can be cached for performance sensitive code.
.l-sub-section
h3 resolveAndCreate
pre.prettyprint
code.
(bindings:List, {defaultBindings=false}={}, [object Object], [object Object])
:markdown
Resolves bindings and creates an injector based on those bindings. This function is slower than the
corresponding [fromResolvedBindings] because it needs to resolve bindings first. See [Injector.resolve].
Prefer [fromResolvedBindings] in performance-critical code that creates lots of injectors.
.l-sub-section
h3 resolveAndCreateChild
pre.prettyprint
code.
(bindings:List, [object Object])
:markdown
Create a child injector and load a new set of bindings into it.
A resolution is a process of flattening multiple nested and converting individual bindings into a
list of [ResolvedBinding]s. The resolution can be cached [Injector.resolve] for performance sensitive
code.
See: [Injector.resolve].

View File

@ -0,0 +1,97 @@
p.
<span class="location-badge">exported from <a href="/angular2/di">angular2/di</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/key.js#L17">angular2/src/di/key.js (line 17)</a>
:markdown
A unique object used for retrieving items from the Injector.
[Key]s have:
- system wide unique [id].
- [token] usually the [Type] of the instance.
[Key]s are used internaly in [Injector] becouse they have system wide unique [id]s which allow the injector to
index in arrays rather ther look up items in maps.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(token, id)
:markdown
.l-sub-section
h3 get
pre.prettyprint
code.
(token)
:markdown
Retrieve a [Key] for a token.
.l-sub-section
h3 id
:markdown
.l-sub-section
h3 metadata
:markdown
.l-sub-section
h3 numberOfKeys
:markdown
.l-sub-section
h3 token
:markdown

View File

@ -0,0 +1,21 @@
{
"Binding-class" : {
"title" : "Binding Class"
},
"bind-function" : {
"title" : "bind Function"
},
"BindingBuilder-class" : {
"title" : "BindingBuilder Class"
},
"Injector-class" : {
"title" : "Injector Class"
},
"Key-class" : {
"title" : "Key Class"
}
}

View File

@ -0,0 +1,14 @@
.l-main-section
h2(class="function export") bind
p <code>(token)</code>
p(class="module").
exported from <a href="/angular2/di">angular2/di</a>
:markdown
Provides fluent API for imperative construction of [Binding] objects. (JavaScript only.)

View File

@ -0,0 +1,5 @@
ul
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
name = page.menuTitle || page.title
selected = current.path[4] == slug ? 'is-selected':''
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{slug}</a>

View File

@ -0,0 +1,60 @@
p.
<span class="location-badge">exported from <a href="/angular2/di_annotations">angular2/di_annotations</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L109">angular2/src/di/annotations.js (line 109)</a>
:markdown
`DependencyAnnotation` is used by the framework to extend DI.
Only annotations implementing `DependencyAnnotation` will be added
to the list of dependency properties.
For example:
```
class Parent extends DependencyAnnotation {}
class NotDependencyProperty {}
class AComponent {
constructor(@Parent @NotDependencyProperty aService:AService) {}
}
```
will create the following dependency:
```
new Dependency(Key.get(AService), [new Parent()])
```
The framework can use `new Parent()` to handle the `aService` dependency
in a specific way.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
()
:markdown
.l-sub-section
h3 token
:markdown

View File

@ -0,0 +1,43 @@
p.
<span class="location-badge">exported from <a href="/angular2/di_annotations">angular2/di_annotations</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L13">angular2/src/di/annotations.js (line 13)</a>
:markdown
A parameter annotation that creates a synchronous eager dependency.
```
class AComponent {
constructor(@Inject(MyService) aService:MyService) {}
}
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(token)
:markdown
.l-sub-section
h3 token
:markdown

View File

@ -0,0 +1,45 @@
p.
<span class="location-badge">exported from <a href="/angular2/di_annotations">angular2/di_annotations</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L55">angular2/src/di/annotations.js (line 55)</a>
:markdown
A parameter annotation that creates a synchronous lazy dependency.
```
class AComponent {
constructor(@InjectLazy(MyService) aServiceFn:Function) {
var aService:MyService = aServiceFn();
}
}
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(token)
:markdown
.l-sub-section
h3 token
:markdown

View File

@ -0,0 +1,45 @@
p.
<span class="location-badge">exported from <a href="/angular2/di_annotations">angular2/di_annotations</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L34">angular2/src/di/annotations.js (line 34)</a>
:markdown
A parameter annotation that creates an asynchronous eager dependency.
```
class AComponent {
constructor(@InjectPromise(MyService) aServicePromise:Promise<MyService>) {
aServicePromise.then(aService:MyService => ...);
}
}
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(token)
:markdown
.l-sub-section
h3 token
:markdown

View File

@ -0,0 +1,34 @@
p.
<span class="location-badge">exported from <a href="/angular2/di_annotations">angular2/di_annotations</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L133">angular2/src/di/annotations.js (line 133)</a>
:markdown
A marker annotation that marks a class as available to `Injector`s for creation. Used by tooling for generating
constructor stubs.
```
class NeedsService {
constructor(svc:UsefulService) {}
}
@Injectable
class UsefulService {}
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
()
:markdown

View File

@ -0,0 +1,32 @@
p.
<span class="location-badge">exported from <a href="/angular2/di_annotations">angular2/di_annotations</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L75">angular2/src/di/annotations.js (line 75)</a>
:markdown
A parameter annotation that marks a dependency as optional. (Injects `null` if not found.)
```
class AComponent {
constructor(@Optional() aService:MyService) {
this.aService = aService;
}
}
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
()
:markdown

View File

@ -0,0 +1,25 @@
{
"Inject-class" : {
"title" : "Inject Class"
},
"InjectPromise-class" : {
"title" : "InjectPromise Class"
},
"InjectLazy-class" : {
"title" : "InjectLazy Class"
},
"Optional-class" : {
"title" : "Optional Class"
},
"DependencyAnnotation-class" : {
"title" : "DependencyAnnotation Class"
},
"Injectable-class" : {
"title" : "Injectable Class"
}
}

View File

@ -0,0 +1,5 @@
ul
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
name = page.menuTitle || page.title
selected = current.path[4] == slug ? 'is-selected':''
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{slug}</a>

View File

@ -0,0 +1,44 @@
p.
<span class="location-badge">exported from <a href="/angular2/di_errors">angular2/di_errors</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L95">angular2/src/di/exceptions.js (line 95)</a>
:markdown
Throw when trying to retrieve async [Binding] using sync API.
## Example
```javascript
var injector = Injector.resolveAndCreate([
bind(Number).toAsyncFactory(() => {
return new Promise((resolve) => resolve(1 + 2));
}),
bind(String).toFactory((v) => { return "Value: " + v; }, [String])
]);
injector.asyncGet(String).then((v) => expect(v).toBe('Value: 3'));
expect(() => {
injector.get(String);
}).toThrowError(AsycBindingError);
```
The above example throws because `String` dependes no `Numeber` which is async. If any binding in the dependency
graph is async then the graph can only be retrieved using `asyncGet` API.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(key)
:markdown

View File

@ -0,0 +1,38 @@
p.
<span class="location-badge">exported from <a href="/angular2/di_errors">angular2/di_errors</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L124">angular2/src/di/exceptions.js (line 124)</a>
:markdown
Throw when dependencies from a cyle.
## Example:
```javascript
class A {
constructor(b:B) {}
}
class B {
constructor(a:A) {}
}
```
Retrieving `A` or `B` will throw `CyclicDependencyError` as such a graph can not be constructed.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(key)
:markdown

View File

@ -0,0 +1,28 @@
p.
<span class="location-badge">exported from <a href="/angular2/di_errors">angular2/di_errors</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L141">angular2/src/di/exceptions.js (line 141)</a>
:markdown
Thrown when constructing type returns with an Error.
The `InstantiationError` class contains the original error plus dependency graph which caused this object to be
instantiated.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(originalException, key)
:markdown

View File

@ -0,0 +1,54 @@
p.
<span class="location-badge">exported from <a href="/angular2/di_errors">angular2/di_errors</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L157">angular2/src/di/exceptions.js (line 157)</a>
:markdown
Thrown when object other then [Binding] (or [Type]) is passed to [Injector] creation.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(binding)
:markdown
.l-sub-section
h3 message
:markdown
.l-sub-section
h3 toString
pre.prettyprint
code.
()
:markdown

View File

@ -0,0 +1,57 @@
p.
<span class="location-badge">exported from <a href="/angular2/di_errors">angular2/di_errors</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L177">angular2/src/di/exceptions.js (line 177)</a>
:markdown
Thrown when the class as no annotation information.
Lack of annotation prevents the [Injector] from determininig what dependencies need to be injected int the
constructor.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(typeOrFunc)
:markdown
.l-sub-section
h3 message
:markdown
.l-sub-section
h3 toString
pre.prettyprint
code.
()
:markdown

View File

@ -0,0 +1,26 @@
p.
<span class="location-badge">exported from <a href="/angular2/di_errors">angular2/di_errors</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L61">angular2/src/di/exceptions.js (line 61)</a>
:markdown
Thrown when trying to retrieve a dependency by [Key] from [Injector], but [Injector] does not have a [Binding] for
said [Key].
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(key)
:markdown

View File

@ -0,0 +1,95 @@
p.
<span class="location-badge">exported from <a href="/angular2/di_errors">angular2/di_errors</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L32">angular2/src/di/exceptions.js (line 32)</a>
:markdown
Base class for all errors arising from missconfigured bindings.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(key, constructResolvingMessage:Function)
:markdown
.l-sub-section
h3 addKey
pre.prettyprint
code.
(key)
:markdown
.l-sub-section
h3 constructResolvingMessage
:markdown
.l-sub-section
h3 keys
:markdown
.l-sub-section
h3 message
:markdown
.l-sub-section
h3 toString
pre.prettyprint
code.
()
:markdown

View File

@ -0,0 +1,29 @@
{
"ProviderError-class" : {
"title" : "ProviderError Class"
},
"NoProviderError-class" : {
"title" : "NoProviderError Class"
},
"AsyncBindingError-class" : {
"title" : "AsyncBindingError Class"
},
"CyclicDependencyError-class" : {
"title" : "CyclicDependencyError Class"
},
"InstantiationError-class" : {
"title" : "InstantiationError Class"
},
"InvalidBindingError-class" : {
"title" : "InvalidBindingError Class"
},
"NoAnnotationError-class" : {
"title" : "NoAnnotationError Class"
}
}

View File

@ -0,0 +1,5 @@
ul
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
name = page.menuTitle || page.title
selected = current.path[4] == slug ? 'is-selected':''
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{slug}</a>

View File

@ -0,0 +1,132 @@
p.
<span class="location-badge">exported from <a href="/angular2/directives">angular2/directives</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/for.js#L44">angular2/src/directives/for.js (line 44)</a>
:markdown
The `For` directive instantiates a template once per item from an iterable. The context for each
instantiated template inherits from the outer context with the given loop variable set to the
current item from the iterable.
It is possible to alias the `index` to a local variable that will be set to the current loop
iteration in the template context.
When the contents of the iterator changes, `For` makes the corresponding changes to the DOM:
* When an item is added, a new instance of the template is added to the DOM.
* When an item is removed, its template instance is removed from the DOM.
* When items are reordered, their respective templates are reordered in the DOM.
# Example
```
<ul>
<li *for="#error in errors; #i = index">
Error {{i}} of {{errors.length}}: {{error.message}}
</li>
</ul>
```
# Syntax
- `<li *for="#item of items; #i = index">...</li>`
- `<li template="for #item of items; #i=index">...</li>`
- `<template [for]="#item" [of]="items" #i="index"><li>...</li></template>`
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(viewContainer:ViewContainer)
:markdown
.l-sub-section
h3 bulkInsert
pre.prettyprint
code.
(tuples, viewContainer)
:markdown
.l-sub-section
h3 bulkRemove
pre.prettyprint
code.
(tuples, viewContainer)
:markdown
.l-sub-section
h3 iterableChanges
pre.prettyprint
code.
(changes)
:markdown
.l-sub-section
h3 perViewChange
pre.prettyprint
code.
(view, record)
:markdown
.l-sub-section
h3 viewContainer
:markdown

View File

@ -0,0 +1,84 @@
p.
<span class="location-badge">exported from <a href="/angular2/directives">angular2/directives</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/if.js#L33">angular2/src/directives/if.js (line 33)</a>
:markdown
Removes or recreates a portion of the DOM tree based on an {expression}.
If the expression assigned to `if` evaluates to a false value then the element is removed from the
DOM, otherwise a clone of the element is reinserted into the DOM.
# Example:
```
<div *if="errorCount > 0" class="error">
<!-- Error message displayed when the errorCount property on the current context is greater than 0. -->
{{errorCount}} errors detected
</div>
```
# Syntax
- `<div *if="condition">...</div>`
- `<div template="if condition">...</div>`
- `<template [if]="condition"><div>...</div></template>`
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(viewContainer: ViewContainer)
:markdown
.l-sub-section
h3 condition
pre.prettyprint
code.
(newCondition)
:markdown
.l-sub-section
h3 prevCondition
:markdown
.l-sub-section
h3 viewContainer
:markdown

View File

@ -0,0 +1,18 @@
p.
<span class="location-badge">exported from <a href="/angular2/directives">angular2/directives</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/non_bindable.js#L21">angular2/src/directives/non_bindable.js (line 21)</a>
:markdown
The `NonBindable` directive tells Angular not to compile or bind the contents of the current
DOM element. This is useful if the element contains what appears to be Angular directives and
bindings but which should be ignored by Angular. This could be the case if you have a site that
displays snippets of code, for instance.
Example:
```
<div>Normal: {{1 + 2}}</div> // output "Normal: 3"
<div non-bindable>Ignored: {{1 + 2}}</div> // output "Ignored: {{1 + 2}}"
```

View File

@ -0,0 +1,64 @@
p.
<span class="location-badge">exported from <a href="/angular2/directives">angular2/directives</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L39">angular2/src/directives/switch.js (line 39)</a>
:markdown
The `Switch` directive is used to conditionally swap DOM structure on your template based on a
scope expression.
Elements within `Switch` but without `SwitchWhen` or `SwitchDefault` directives will be
preserved at the location as specified in the template.
`Switch` simply chooses nested elements and makes them visible based on which element matches
the value obtained from the evaluated expression. In other words, you define a container element
(where you place the directive), place an expression on the **`[switch]="..."` attribute**),
define any inner elements inside of the directive and place a `[switch-when]` attribute per
element.
The when attribute is used to inform Switch which element to display when the expression is
evaluated. If a matching expression is not found via a when attribute then an element with the
default attribute is displayed.
# Example:
```
<ANY [switch]="expression">
<template [switch-when]="whenExpression1">...</template>
<template [switch-when]="whenExpression1">...</template>
<template [switch-default]>...</template>
</ANY>
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
()
:markdown
.l-sub-section
h3 value
pre.prettyprint
code.
(value)
:markdown

View File

@ -0,0 +1,33 @@
p.
<span class="location-badge">exported from <a href="/angular2/directives">angular2/directives</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L187">angular2/src/directives/switch.js (line 187)</a>
:markdown
Defines a default case statement.
Default case statements are displayed when no `SwitchWhen` match the `switch` value.
Example:
```
<template [switch-default]>...</template>
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(viewContainer: ViewContainer, sswitch: Switch)
:markdown

View File

@ -0,0 +1,54 @@
p.
<span class="location-badge">exported from <a href="/angular2/directives">angular2/directives</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L152">angular2/src/directives/switch.js (line 152)</a>
:markdown
Defines a case statement as an expression.
If multiple `SwitchWhen` match the `Switch` value, all of them are displayed.
Example:
```
// match against a context variable
<template [switch-when]="contextVariable">...</template>
// match against a constant string
<template [switch-when]="'stringValue'">...</template>
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(viewContainer: ViewContainer, sswitch: Switch)
:markdown
.l-sub-section
h3 when
pre.prettyprint
code.
(value)
:markdown

View File

@ -0,0 +1,25 @@
{
"For-class" : {
"title" : "For Class"
},
"If-class" : {
"title" : "If Class"
},
"NonBindable-class" : {
"title" : "NonBindable Class"
},
"Switch-class" : {
"title" : "Switch Class"
},
"SwitchWhen-class" : {
"title" : "SwitchWhen Class"
},
"SwitchDefault-class" : {
"title" : "SwitchDefault Class"
}
}

View File

@ -0,0 +1,5 @@
ul
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
name = page.menuTitle || page.title
selected = current.path[4] == slug ? 'is-selected':''
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{slug}</a>

View File

@ -0,0 +1,60 @@
p.
<span class="location-badge">exported from <a href="/angular2/forms">angular2/forms</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L62">angular2/src/forms/directives.js (line 62)</a>
:markdown
The accessor for writing a value and listening to changes on a checkbox input element.
# Example
```
<input type="checkbox" [control]="rememberLogin">
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(cd:ControlDirective, setCheckedProperty:Function)
:markdown
.l-sub-section
h3 onChange
:markdown
.l-sub-section
h3 writeValue
pre.prettyprint
code.
(value)
:markdown

View File

@ -0,0 +1,45 @@
p.
<span class="location-badge">exported from <a href="/angular2/forms">angular2/forms</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/model.js#L96">angular2/src/forms/model.js (line 96)</a>
:markdown
Defines a part of a form that cannot be divided into other controls.
`Control` is one of the three fundamental building blocks used to define forms in Angular, along with [ControlGroup]
and [ControlArray].
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(value:any, validator:Function = Validators.nullValidator)
:markdown
.l-sub-section
h3 updateValue
pre.prettyprint
code.
(value:any)
:markdown

View File

@ -0,0 +1,124 @@
p.
<span class="location-badge">exported from <a href="/angular2/forms">angular2/forms</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/model.js#L217">angular2/src/forms/model.js (line 217)</a>
:markdown
Defines a part of a form, of variable length, that can contain other controls.
A `ControlArray` aggregates the values and errors of each [Control] in the group. Thus, if one of the controls in a
group is invalid, the entire group is invalid. Similarly, if a control changes its value, the entire group changes
as well.
`ControlArray` is one of the three fundamental building blocks used to define forms in Angular, along with [Control]
and [ControlGroup]. [ControlGroup] can also contain other controls, but is of fixed length.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(controls:List&lt;AbstractControl&gt;, validator:Function = Validators.array)
:markdown
.l-sub-section
h3 at
pre.prettyprint
code.
(index:number)
:markdown
.l-sub-section
h3 controls
:markdown
.l-sub-section
h3 insert
pre.prettyprint
code.
(index:number, control:AbstractControl)
:markdown
.l-sub-section
h3 length
:markdown
.l-sub-section
h3 push
pre.prettyprint
code.
(control:AbstractControl)
:markdown
.l-sub-section
h3 removeAt
pre.prettyprint
code.
(index:number)
:markdown

View File

@ -0,0 +1,103 @@
p.
<span class="location-badge">exported from <a href="/angular2/forms">angular2/forms</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L114">angular2/src/forms/directives.js (line 114)</a>
:markdown
Binds a control to a DOM element.
# Example
In this example, we bind the control to an input element. When the value of the input element changes, the value of
the control will reflect that change. Likewise, if the value of the control changes, the input element reflects that
change.
Here we use [FormDirectives], rather than importing each form directive individually, e.g.
`ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result.
```
@Component({selector: "login-comp"})
@View({
directives: [FormDirectives],
inline: "<input type='text' [control]='loginControl'>"
})
class LoginComp {
loginControl:Control;
constructor() {
this.loginControl = new Control('');
}
}
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(groupDirective:ControlGroupDirective, valueAccessor:DefaultValueAccessor)
:markdown
.l-sub-section
h3 controlOrName
:markdown
.l-sub-section
h3 onChange
pre.prettyprint
code.
(_)
:markdown
.l-sub-section
h3 validator
:markdown
.l-sub-section
h3 valueAccessor
:markdown

View File

@ -0,0 +1,95 @@
p.
<span class="location-badge">exported from <a href="/angular2/forms">angular2/forms</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/model.js#L131">angular2/src/forms/model.js (line 131)</a>
:markdown
Defines a part of a form, of fixed length, that can contain other controls.
A ControlGroup aggregates the values and errors of each [Control] in the group. Thus, if one of the controls in a
group is invalid, the entire group is invalid. Similarly, if a control changes its value, the entire group changes
as well.
`ControlGroup` is one of the three fundamental building blocks used to define forms in Angular, along with [Control]
and [ControlArray]. [ControlArray] can also contain other controls, but is of variable length.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(controls:StringMap, optionals:StringMap = null, validator:Function = Validators.group)
:markdown
.l-sub-section
h3 contains
pre.prettyprint
code.
(controlName:string)
:markdown
.l-sub-section
h3 controls
:markdown
.l-sub-section
h3 exclude
pre.prettyprint
code.
(controlName:string)
:markdown
.l-sub-section
h3 include
pre.prettyprint
code.
(controlName:string)
:markdown

View File

@ -0,0 +1,111 @@
p.
<span class="location-badge">exported from <a href="/angular2/forms">angular2/forms</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L210">angular2/src/forms/directives.js (line 210)</a>
:markdown
Binds a control group to a DOM element.
# Example
In this example, we bind the control group to the form element, and we bind the login and password controls to the
login and password elements.
Here we use [FormDirectives], rather than importing each form directive individually, e.g.
`ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result.
```
@Component({selector: "login-comp"})
@View({
directives: [FormDirectives],
inline: "<form [control-group]='loginForm'>" +
"Login <input type='text' control='login'>" +
"Password <input type='password' control='password'>" +
"<button (click)="onLogin()">Login</button>" +
"</form>"
})
class LoginComp {
loginForm:ControlGroup;
constructor() {
this.loginForm = new ControlGroup({
login: new Control(""),
password: new Control("")
});
}
onLogin() {
// this.loginForm.value
}
}
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(groupDirective:ControlGroupDirective)
:markdown
.l-sub-section
h3 addDirective
pre.prettyprint
code.
(c:ControlDirective)
:markdown
.l-sub-section
h3 controlGroup
pre.prettyprint
code.
(controlGroup)
:markdown
.l-sub-section
h3 findControl
pre.prettyprint
code.
(name:string)
:markdown

View File

@ -0,0 +1,61 @@
p.
<span class="location-badge">exported from <a href="/angular2/forms">angular2/forms</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L31">angular2/src/forms/directives.js (line 31)</a>
:markdown
The default accessor for writing a value and listening to changes that is used by a [Control] directive.
This is the default strategy that Angular uses when no other accessor is applied.
# Example
```
<input type="text" [control]="loginControl">
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(setValueProperty:Function)
:markdown
.l-sub-section
h3 onChange
:markdown
.l-sub-section
h3 writeValue
pre.prettyprint
code.
(value)
:markdown

View File

@ -0,0 +1,76 @@
p.
<span class="location-badge">exported from <a href="/angular2/forms">angular2/forms</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/form_builder.js#L26">angular2/src/forms/form_builder.js (line 26)</a>
:markdown
Creates a form object from a user-specified configuration.
# Example
This example creates a [ControlGroup] that consists of a `login` [Control], and a nested [ControlGroup] that defines
a `password` and a `passwordConfirmation` [Control].
```
var loginForm = builder.group({
login: ["", Validators.required],
passwordRetry: builder.group({
password: ["", Validators.required],
passwordConfirmation: ["", Validators.required]
})
});
```
.l-main-section
h2 Members
.l-sub-section
h3 array
pre.prettyprint
code.
(controlsConfig:List, validator:Function = null)
:markdown
.l-sub-section
h3 control
pre.prettyprint
code.
(value, validator:Function = null)
:markdown
.l-sub-section
h3 group
pre.prettyprint
code.
(controlsConfig, extra = null)
:markdown

View File

@ -0,0 +1,11 @@
.l-main-section
h2 FormDirectives <span class="type">variable</span>
p(class="module") exported from <a href="/angular2/forms">angular2/forms</a>
:markdown
A list of all the form directives used as part of a `@View` annotation.
This is a shorthand for importing them each individually.

View File

@ -0,0 +1,9 @@
.l-main-section
h2 INVALID <span class="type">variable</span>
p(class="module") exported from <a href="/angular2/forms">angular2/forms</a>
:markdown
Indicates that a Control is invalid, i.e. that an error exists in the input value.

View File

@ -0,0 +1,9 @@
.l-main-section
h2 VALID <span class="type">variable</span>
p(class="module") exported from <a href="/angular2/forms">angular2/forms</a>
:markdown
Indicates that a Control is valid, i.e. that no errors exist in the input value.

View File

@ -0,0 +1,100 @@
p.
<span class="location-badge">exported from <a href="/angular2/forms">angular2/forms</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/validators.js#L16">angular2/src/forms/validators.js (line 16)</a>
:markdown
Provides a set of validators used by form controls.
# Example
```
var loginControl = new Control("", Validators.required)
```
.l-main-section
h2 Members
.l-sub-section
h3 array
pre.prettyprint
code.
(c:modelModule.ControlArray)
:markdown
.l-sub-section
h3 compose
pre.prettyprint
code.
(validators:List&lt;Function&gt;)
:markdown
.l-sub-section
h3 group
pre.prettyprint
code.
(c:modelModule.ControlGroup)
:markdown
.l-sub-section
h3 nullValidator
pre.prettyprint
code.
(c:any)
:markdown
.l-sub-section
h3 required
pre.prettyprint
code.
(c:modelModule.Control)
:markdown

View File

@ -0,0 +1,49 @@
{
"DefaultValueAccessor-class" : {
"title" : "DefaultValueAccessor Class"
},
"CheckboxControlValueAccessor-class" : {
"title" : "CheckboxControlValueAccessor Class"
},
"ControlDirective-class" : {
"title" : "ControlDirective Class"
},
"ControlGroupDirective-class" : {
"title" : "ControlGroupDirective Class"
},
"FormDirectives-var" : {
"title" : "FormDirectives Var"
},
"FormBuilder-class" : {
"title" : "FormBuilder Class"
},
"VALID-var" : {
"title" : "VALID Var"
},
"INVALID-var" : {
"title" : "INVALID Var"
},
"Control-class" : {
"title" : "Control Class"
},
"ControlGroup-class" : {
"title" : "ControlGroup Class"
},
"ControlArray-class" : {
"title" : "ControlArray Class"
},
"Validators-class" : {
"title" : "Validators Class"
}
}

View File

@ -0,0 +1,5 @@
ul
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
name = page.menuTitle || page.title
selected = current.path[4] == slug ? 'is-selected':''
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{slug}</a>

View File

@ -0,0 +1,77 @@
p.
<span class="location-badge">exported from <a href="/angular2/pipes">angular2/pipes</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/iterable_changes.js#L509">angular2/src/change_detection/pipes/iterable_changes.js (line 509)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(item)
:markdown
.l-sub-section
h3 currentIndex
:markdown
.l-sub-section
h3 item
:markdown
.l-sub-section
h3 previousIndex
:markdown
.l-sub-section
h3 toString
pre.prettyprint
code.
()
:markdown

View File

@ -0,0 +1,230 @@
p.
<span class="location-badge">exported from <a href="/angular2/pipes">angular2/pipes</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/iterable_changes.js#L31">angular2/src/change_detection/pipes/iterable_changes.js (line 31)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
()
:markdown
.l-sub-section
h3 check
pre.prettyprint
code.
(collection)
:markdown
.l-sub-section
h3 collection
:markdown
.l-sub-section
h3 forEachAddedItem
pre.prettyprint
code.
(fn:Function)
:markdown
.l-sub-section
h3 forEachItem
pre.prettyprint
code.
(fn:Function)
:markdown
.l-sub-section
h3 forEachMovedItem
pre.prettyprint
code.
(fn:Function)
:markdown
.l-sub-section
h3 forEachPreviousItem
pre.prettyprint
code.
(fn:Function)
:markdown
.l-sub-section
h3 forEachRemovedItem
pre.prettyprint
code.
(fn:Function)
:markdown
.l-sub-section
h3 isDirty
:markdown
.l-sub-section
h3 length
:markdown
.l-sub-section
h3 supports
pre.prettyprint
code.
(obj)
:markdown
.l-sub-section
h3 supportsObj
pre.prettyprint
code.
(obj)
:markdown
.l-sub-section
h3 toString
pre.prettyprint
code.
()
:markdown
.l-sub-section
h3 transform
pre.prettyprint
code.
(collection)
:markdown

View File

@ -0,0 +1,77 @@
p.
<span class="location-badge">exported from <a href="/angular2/pipes">angular2/pipes</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/keyvalue_changes.js#L360">angular2/src/change_detection/pipes/keyvalue_changes.js (line 360)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
(key)
:markdown
.l-sub-section
h3 currentValue
:markdown
.l-sub-section
h3 key
:markdown
.l-sub-section
h3 previousValue
:markdown
.l-sub-section
h3 toString
pre.prettyprint
code.
()
:markdown

View File

@ -0,0 +1,206 @@
p.
<span class="location-badge">exported from <a href="/angular2/pipes">angular2/pipes</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/keyvalue_changes.js#L21">angular2/src/change_detection/pipes/keyvalue_changes.js (line 21)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
()
:markdown
.l-sub-section
h3 check
pre.prettyprint
code.
(map)
:markdown
.l-sub-section
h3 forEachAddedItem
pre.prettyprint
code.
(fn:Function)
:markdown
.l-sub-section
h3 forEachChangedItem
pre.prettyprint
code.
(fn:Function)
:markdown
.l-sub-section
h3 forEachItem
pre.prettyprint
code.
(fn:Function)
:markdown
.l-sub-section
h3 forEachPreviousItem
pre.prettyprint
code.
(fn:Function)
:markdown
.l-sub-section
h3 forEachRemovedItem
pre.prettyprint
code.
(fn:Function)
:markdown
.l-sub-section
h3 isDirty
:markdown
.l-sub-section
h3 supports
pre.prettyprint
code.
(obj)
:markdown
.l-sub-section
h3 supportsObj
pre.prettyprint
code.
(obj)
:markdown
.l-sub-section
h3 toString
pre.prettyprint
code.
()
:markdown
.l-sub-section
h3 transform
pre.prettyprint
code.
(map)
:markdown

View File

@ -0,0 +1,42 @@
p.
<span class="location-badge">exported from <a href="/angular2/pipes">angular2/pipes</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/keyvalue_changes.js#L8">angular2/src/change_detection/pipes/keyvalue_changes.js (line 8)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 create
pre.prettyprint
code.
(cdRef)
:markdown
.l-sub-section
h3 supports
pre.prettyprint
code.
(obj)
:markdown

View File

@ -0,0 +1,87 @@
p.
<span class="location-badge">exported from <a href="/angular2/pipes">angular2/pipes</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/null_pipe.js#L19">angular2/src/change_detection/pipes/null_pipe.js (line 19)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
()
:markdown
.l-sub-section
h3 called
:markdown
.l-sub-section
h3 supports
pre.prettyprint
code.
(obj)
:markdown
.l-sub-section
h3 supportsObj
pre.prettyprint
code.
(obj)
:markdown
.l-sub-section
h3 transform
pre.prettyprint
code.
(value)
:markdown

View File

@ -0,0 +1,42 @@
p.
<span class="location-badge">exported from <a href="/angular2/pipes">angular2/pipes</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/null_pipe.js#L6">angular2/src/change_detection/pipes/null_pipe.js (line 6)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 create
pre.prettyprint
code.
(cdRef)
:markdown
.l-sub-section
h3 supports
pre.prettyprint
code.
(obj)
:markdown

View File

@ -0,0 +1,76 @@
p.
<span class="location-badge">exported from <a href="/angular2/pipes">angular2/pipes</a></span>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/pipe.js#L32">angular2/src/change_detection/pipes/pipe.js (line 32)</a>
:markdown
An interface for extending the list of pipes known to Angular.
If you are writing a custom [Pipe], you must extend this interface.
#Example
```
class DoublePipe extends Pipe {
supports(obj) {
return true;
}
transform(value) {
return `${value}${value}`;
}
}
```
.l-main-section
h2 Members
.l-sub-section
h3 onDestroy
pre.prettyprint
code.
()
:markdown
.l-sub-section
h3 supports
pre.prettyprint
code.
(obj)
:markdown
.l-sub-section
h3 transform
pre.prettyprint
code.
(value:any)
:markdown

View File

@ -0,0 +1,33 @@
{
"IterableChanges-class" : {
"title" : "IterableChanges Class"
},
"CollectionChangeRecord-class" : {
"title" : "CollectionChangeRecord Class"
},
"KeyValueChangesFactory-class" : {
"title" : "KeyValueChangesFactory Class"
},
"KeyValueChanges-class" : {
"title" : "KeyValueChanges Class"
},
"KVChangeRecord-class" : {
"title" : "KVChangeRecord Class"
},
"NullPipeFactory-class" : {
"title" : "NullPipeFactory Class"
},
"NullPipe-class" : {
"title" : "NullPipe Class"
},
"Pipe-class" : {
"title" : "Pipe Class"
}
}

View File

@ -0,0 +1,5 @@
{
"AbstractChangeDetector-class" : {
"title" : "AbstractChangeDetector Class"
}
}

View File

@ -0,0 +1,5 @@
{
"BindingRecord-class" : {
"title" : "BindingRecord Class"
}
}

View File

@ -0,0 +1,17 @@
{
"defaultPipes-var" : {
"title" : "defaultPipes Var"
},
"DynamicChangeDetection-class" : {
"title" : "DynamicChangeDetection Class"
},
"JitChangeDetection-class" : {
"title" : "JitChangeDetection Class"
},
"defaultPipeRegistry-var" : {
"title" : "defaultPipeRegistry Var"
}
}

View File

@ -0,0 +1,13 @@
{
"uninitialized-var" : {
"title" : "uninitialized Var"
},
"SimpleChange-class" : {
"title" : "SimpleChange Class"
},
"ChangeDetectionUtil-class" : {
"title" : "ChangeDetectionUtil Class"
}
}

View File

@ -0,0 +1,5 @@
{
"ChangeDetectorRef-class" : {
"title" : "ChangeDetectorRef Class"
}
}

View File

@ -0,0 +1,5 @@
{
"coalesce-function" : {
"title" : "coalesce Function"
}
}

View File

@ -0,0 +1,25 @@
{
"CHECK_ONCE-var" : {
"title" : "CHECK_ONCE Var"
},
"CHECKED-var" : {
"title" : "CHECKED Var"
},
"CHECK_ALWAYS-var" : {
"title" : "CHECK_ALWAYS Var"
},
"DETACHED-var" : {
"title" : "DETACHED Var"
},
"ON_PUSH-var" : {
"title" : "ON_PUSH Var"
},
"DEFAULT-var" : {
"title" : "DEFAULT Var"
}
}

View File

@ -0,0 +1,5 @@
{
"DirectiveRecord-class" : {
"title" : "DirectiveRecord Class"
}
}

View File

@ -0,0 +1,5 @@
{
"DynamicChangeDetector-class" : {
"title" : "DynamicChangeDetector Class"
}
}

View File

@ -0,0 +1,9 @@
{
"ExpressionChangedAfterItHasBeenChecked-class" : {
"title" : "ExpressionChangedAfterItHasBeenChecked Class"
},
"ChangeDetectionError-class" : {
"title" : "ChangeDetectionError Class"
}
}

View File

@ -0,0 +1,17 @@
{
"ProtoChangeDetector-class" : {
"title" : "ProtoChangeDetector Class"
},
"ChangeDetection-class" : {
"title" : "ChangeDetection Class"
},
"ChangeDispatcher-class" : {
"title" : "ChangeDispatcher Class"
},
"ChangeDetector-class" : {
"title" : "ChangeDetector Class"
}
}

View File

@ -0,0 +1,85 @@
{
"AST-class" : {
"title" : "AST Class"
},
"EmptyExpr-class" : {
"title" : "EmptyExpr Class"
},
"ImplicitReceiver-class" : {
"title" : "ImplicitReceiver Class"
},
"Chain-class" : {
"title" : "Chain Class"
},
"Conditional-class" : {
"title" : "Conditional Class"
},
"AccessMember-class" : {
"title" : "AccessMember Class"
},
"KeyedAccess-class" : {
"title" : "KeyedAccess Class"
},
"Pipe-class" : {
"title" : "Pipe Class"
},
"LiteralPrimitive-class" : {
"title" : "LiteralPrimitive Class"
},
"LiteralArray-class" : {
"title" : "LiteralArray Class"
},
"LiteralMap-class" : {
"title" : "LiteralMap Class"
},
"Interpolation-class" : {
"title" : "Interpolation Class"
},
"Binary-class" : {
"title" : "Binary Class"
},
"PrefixNot-class" : {
"title" : "PrefixNot Class"
},
"Assignment-class" : {
"title" : "Assignment Class"
},
"MethodCall-class" : {
"title" : "MethodCall Class"
},
"FunctionCall-class" : {
"title" : "FunctionCall Class"
},
"ASTWithSource-class" : {
"title" : "ASTWithSource Class"
},
"TemplateBinding-class" : {
"title" : "TemplateBinding Class"
},
"AstVisitor-class" : {
"title" : "AstVisitor Class"
},
"AstTransformer-class" : {
"title" : "AstTransformer Class"
}
}

Some files were not shown because too many files have changed in this diff Show More