docs(alpha-36): update api for alpha-36 renames
This commit is contained in:
parent
b9a53c023d
commit
61db4a09a9
|
@ -1,12 +0,0 @@
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 Attribute <span class="type">variable</span>
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations/decorators.ts#L391-L391">angular2/src/core/annotations/decorators.ts (line 391)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
<a href='Attribute-var.html'><code>Attribute</code></a> factory function.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,98 +0,0 @@
|
||||||
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations_impl/di.ts#L3-L44">angular2/src/core/annotations_impl/di.ts (line 3)</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
|
|
||||||
@Directive({
|
|
||||||
selector: `input'
|
|
||||||
})
|
|
||||||
class InputDirective {
|
|
||||||
constructor(@Attribute('type') type) {
|
|
||||||
// type would be `text` in this example
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 Annotations
|
|
||||||
.l-sub-section
|
|
||||||
h3.annotation CONST
|
|
||||||
pre.prettyprint
|
|
||||||
code.
|
|
||||||
@CONST()
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 Members
|
|
||||||
.l-sub-section
|
|
||||||
h3 constructor
|
|
||||||
|
|
||||||
|
|
||||||
pre.prettyprint
|
|
||||||
code.
|
|
||||||
constructor(attributeName: string)
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
|
||||||
h3 attributeName
|
|
||||||
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
|
||||||
h3 token
|
|
||||||
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
|
||||||
h3 toString
|
|
||||||
|
|
||||||
|
|
||||||
pre.prettyprint
|
|
||||||
code.
|
|
||||||
toString()
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,52 +0,0 @@
|
||||||
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations/decorators.ts#L243-L294">angular2/src/core/annotations/decorators.ts (line 243)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
<a href='Attribute-var.html'><code>Attribute</code></a> factory for creating annotations, decorators or DSL.
|
|
||||||
|
|
||||||
## Example as TypeScript Decorator
|
|
||||||
|
|
||||||
```
|
|
||||||
import {Attribute, Component, View} from "angular2/angular2";
|
|
||||||
|
|
||||||
@Component({...})
|
|
||||||
@View({...})
|
|
||||||
class MyComponent {
|
|
||||||
constructor(@Attribute('title') title: string) {
|
|
||||||
...
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Example as ES5 DSL
|
|
||||||
|
|
||||||
```
|
|
||||||
var MyComponent = ng
|
|
||||||
.Component({...})
|
|
||||||
.View({...})
|
|
||||||
.Class({
|
|
||||||
constructor: [new ng.Attribute('title'), function(title) {
|
|
||||||
...
|
|
||||||
}]
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
## Example as ES5 annotation
|
|
||||||
|
|
||||||
```
|
|
||||||
var MyComponent = function(title) {
|
|
||||||
...
|
|
||||||
};
|
|
||||||
|
|
||||||
MyComponent.annotations = [
|
|
||||||
new ng.Component({...})
|
|
||||||
new ng.View({...})
|
|
||||||
]
|
|
||||||
MyComponent.parameters = [
|
|
||||||
[new ng.Attribute('title')]
|
|
||||||
]
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
|
@ -1,12 +0,0 @@
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 Component <span class="type">variable</span>
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations/decorators.ts#L375-L376">angular2/src/core/annotations/decorators.ts (line 375)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
<a href='Component-var.html'><code>Component</code></a> factory function.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,37 +0,0 @@
|
||||||
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations/decorators.ts#L18-L38">angular2/src/core/annotations/decorators.ts (line 18)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Interface for the <a href='Component-var.html'><code>Component</code></a> decorator function.
|
|
||||||
|
|
||||||
See <a href='ComponentFactory-interface.html'><code>ComponentFactory</code></a>.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 Members
|
|
||||||
.l-sub-section
|
|
||||||
h3 View
|
|
||||||
|
|
||||||
|
|
||||||
pre.prettyprint
|
|
||||||
code.
|
|
||||||
View(obj: {
|
|
||||||
templateUrl?: string,
|
|
||||||
template?: string,
|
|
||||||
directives?: List<Type | any | List<any>>,
|
|
||||||
pipes?: List<Type | any | List<any>>,
|
|
||||||
renderer?: string,
|
|
||||||
styles?: List<string>,
|
|
||||||
styleUrls?: List<string>,
|
|
||||||
})
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Chain <a href='View-var.html'><code>View</code></a> annotation.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,49 +0,0 @@
|
||||||
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations/decorators.ts#L111-L181">angular2/src/core/annotations/decorators.ts (line 111)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
<a href='ComponentAnnotation-class.html'><code>ComponentAnnotation</code></a> factory for creating annotations, decorators or DSL.
|
|
||||||
|
|
||||||
## Example as TypeScript Decorator
|
|
||||||
|
|
||||||
```
|
|
||||||
import {Component, View} from "angular2/angular2";
|
|
||||||
|
|
||||||
@Component({...})
|
|
||||||
@View({...})
|
|
||||||
class MyComponent {
|
|
||||||
constructor() {
|
|
||||||
...
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Example as ES5 DSL
|
|
||||||
|
|
||||||
```
|
|
||||||
var MyComponent = ng
|
|
||||||
.Component({...})
|
|
||||||
.View({...})
|
|
||||||
.Class({
|
|
||||||
constructor: function() {
|
|
||||||
...
|
|
||||||
}
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
## Example as ES5 annotation
|
|
||||||
|
|
||||||
```
|
|
||||||
var MyComponent = function() {
|
|
||||||
...
|
|
||||||
};
|
|
||||||
|
|
||||||
MyComponent.annotations = [
|
|
||||||
new ng.Component({...})
|
|
||||||
new ng.View({...})
|
|
||||||
]
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
|
@ -1,12 +0,0 @@
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 Directive <span class="type">variable</span>
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations/decorators.ts#L380-L380">angular2/src/core/annotations/decorators.ts (line 380)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
<a href='Directive-var.html'><code>Directive</code></a> factory function.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,827 +0,0 @@
|
||||||
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations_impl/annotations.ts#L4-L754">angular2/src/core/annotations_impl/annotations.ts (line 4)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Directives allow you to attach behavior to elements in the DOM.
|
|
||||||
|
|
||||||
<a href='Directive-var.html'><code>Directive</code></a>s with an embedded view are called <a href='Component-var.html'><code>Component</code></a>s.
|
|
||||||
|
|
||||||
A directive consists of a single directive annotation and a controller class. When the
|
|
||||||
directive's `selector` matches
|
|
||||||
elements in the DOM, the following steps occur:
|
|
||||||
|
|
||||||
1. For each directive, the `ElementInjector` attempts to resolve the directive's constructor
|
|
||||||
arguments.
|
|
||||||
2. Angular instantiates directives for each matched element using `ElementInjector` in a
|
|
||||||
depth-first order,
|
|
||||||
as declared in the HTML.
|
|
||||||
|
|
||||||
## Understanding How Injection Works
|
|
||||||
|
|
||||||
There are three stages of injection resolution.
|
|
||||||
- *Pre-existing Injectors*:
|
|
||||||
- The terminal <a href='../di/Injector-class.html'><code>Injector</code></a> cannot resolve dependencies. It either throws an error or, if
|
|
||||||
the dependency was
|
|
||||||
specified as `@Optional`, returns `null`.
|
|
||||||
- The platform injector resolves browser singleton resources, such as: cookies, title,
|
|
||||||
location, and others.
|
|
||||||
- *Component Injectors*: Each component instance has its own <a href='../di/Injector-class.html'><code>Injector</code></a>, and they follow
|
|
||||||
the same parent-child hierarchy
|
|
||||||
as the component instances in the DOM.
|
|
||||||
- *Element Injectors*: Each component instance 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
|
|
||||||
<a href='View-var.html'><code>View</code></a>:
|
|
||||||
|
|
||||||
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
|
|
||||||
- `@Host() directive:DirectiveType`: any directive that matches the type between the current
|
|
||||||
element and the
|
|
||||||
Shadow DOM root.
|
|
||||||
- `@Query(DirectiveType) query:QueryList<DirectiveType>`: A live collection of direct child
|
|
||||||
directives.
|
|
||||||
- `@QueryDescendants(DirectiveType) query:QueryList<DirectiveType>`: A live collection of any
|
|
||||||
child directives.
|
|
||||||
|
|
||||||
To inject element-specific special objects, declare the constructor parameter as:
|
|
||||||
- `element: ElementRef` to obtain a reference to logical element in the view.
|
|
||||||
- `viewContainer: ViewContainerRef` to control child template instantiation, for
|
|
||||||
<a href='Directive-var.html'><code>Directive</code></a> 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 {
|
|
||||||
}
|
|
||||||
|
|
||||||
@Directive({
|
|
||||||
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`.
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({ 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.
|
|
||||||
```
|
|
||||||
@Directive({ 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.
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({ 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 any ancestor elements
|
|
||||||
|
|
||||||
Directives can inject other directives declared on any ancestor element (in the current Shadow
|
|
||||||
DOM), i.e. on the current element, the
|
|
||||||
parent element, or its parents.
|
|
||||||
```
|
|
||||||
@Directive({ selector: '[my-directive]' })
|
|
||||||
class MyDirective {
|
|
||||||
constructor(@Host() dependency: Dependency) {
|
|
||||||
expect(dependency.id).toEqual(2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
`@Host` checks the current element, 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
|
|
||||||
|
|
||||||
|
|
||||||
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 injects a <a href='../core/QueryList-class.html'><code>QueryList</code></a>, which updates its contents as children are added,
|
|
||||||
removed, or moved by a directive that uses a <a href='../core/ViewContainerRef-class.html'><code>ViewContainerRef</code></a> such as a `ng-for`, an
|
|
||||||
`ng-if`, or an `ng-switch`.
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({ selector: '[my-directive]' })
|
|
||||||
class MyDirective {
|
|
||||||
constructor(@Query(Dependency) dependencies:QueryList<Dependency>) {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
This directive would be instantiated with a <a href='../core/QueryList-class.html'><code>QueryList</code></a> which contains `Dependency` 4 and
|
|
||||||
6. Here, `Dependency` 5 would not be included, because it is not a direct child.
|
|
||||||
|
|
||||||
### Injecting a live collection of descendant directives
|
|
||||||
|
|
||||||
By passing the descendant flag to `@Query` above, we can include the children of the child
|
|
||||||
elements.
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({ selector: '[my-directive]' })
|
|
||||||
class MyDirective {
|
|
||||||
constructor(@Query(Dependency, {descendants: true}) dependencies:QueryList<Dependency>) {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({ 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.
|
|
||||||
|
|
||||||
## Example
|
|
||||||
|
|
||||||
Here we use a decorator directive to simply define basic tool-tip behavior.
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
Directives can also control the instantiation, destruction, and positioning of inline template
|
|
||||||
elements:
|
|
||||||
|
|
||||||
A directive uses a <a href='../core/ViewContainerRef-class.html'><code>ViewContainerRef</code></a> to instantiate, insert, move, and destroy views at
|
|
||||||
runtime.
|
|
||||||
The <a href='../core/ViewContainerRef-class.html'><code>ViewContainerRef</code></a> 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 <a href='View-var.html'><code>View</code></a>, and as siblings of the
|
|
||||||
`<template>` element. Thus a
|
|
||||||
directive in a child view cannot inject the directive that created it.
|
|
||||||
|
|
||||||
Since directives that create views via ViewContainers 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 directive
|
|
||||||
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 directive that triggers on an `unless` selector:
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({
|
|
||||||
selector: '[unless]',
|
|
||||||
properties: ['unless']
|
|
||||||
})
|
|
||||||
export class Unless {
|
|
||||||
viewContainer: ViewContainerRef;
|
|
||||||
templateRef: TemplateRef;
|
|
||||||
prevCondition: boolean;
|
|
||||||
|
|
||||||
constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef) {
|
|
||||||
this.viewContainer = viewContainer;
|
|
||||||
this.templateRef = templateRef;
|
|
||||||
this.prevCondition = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
set unless(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(this.templateRef);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
We can then use this `unless` selector in a template:
|
|
||||||
```
|
|
||||||
<ul>
|
|
||||||
<li *unless="expr"></li>
|
|
||||||
</ul>
|
|
||||||
```
|
|
||||||
|
|
||||||
Once the directive 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 Annotations
|
|
||||||
.l-sub-section
|
|
||||||
h3.annotation CONST
|
|
||||||
pre.prettyprint
|
|
||||||
code.
|
|
||||||
@CONST()
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 Members
|
|
||||||
.l-sub-section
|
|
||||||
h3 constructor
|
|
||||||
|
|
||||||
|
|
||||||
pre.prettyprint
|
|
||||||
code.
|
|
||||||
constructor({
|
|
||||||
selector, properties, events, host, lifecycle, bindings, exportAs,
|
|
||||||
compileChildren = true,
|
|
||||||
}?: {
|
|
||||||
selector?: string,
|
|
||||||
properties?: List<string>,
|
|
||||||
events?: List<string>,
|
|
||||||
host?: StringMap<string, string>,
|
|
||||||
lifecycle?: List<LifecycleEvent>,
|
|
||||||
bindings?: List<any>,
|
|
||||||
exportAs?: string,
|
|
||||||
compileChildren?: boolean,
|
|
||||||
})
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.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.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
|
||||||
h3 properties
|
|
||||||
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Enumerates the set of properties that accept data binding for a directive.
|
|
||||||
|
|
||||||
The `properties` property defines a set of `directiveProperty` to `bindingProperty`
|
|
||||||
configuration:
|
|
||||||
|
|
||||||
- `directiveProperty` specifies the component property where the value is written.
|
|
||||||
- `bindingProperty` specifies the DOM property where the value is read from.
|
|
||||||
|
|
||||||
You can include a <a href='Pipe-var.html'><code>Pipe</code></a> when specifying a `bindingProperty` to allow for data
|
|
||||||
transformation and structural change detection of the value. These pipes will be evaluated in
|
|
||||||
the context of this component.
|
|
||||||
|
|
||||||
## Syntax
|
|
||||||
|
|
||||||
There is no need to specify both `directiveProperty` and `bindingProperty` when they both have
|
|
||||||
the same value.
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({
|
|
||||||
properties: [
|
|
||||||
'propertyName', // shorthand notation for 'propertyName: propertyName'
|
|
||||||
'directiveProperty1: bindingProperty1',
|
|
||||||
'directiveProperty2: bindingProperty2 | pipe1 | ...',
|
|
||||||
...
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## Basic Property Binding
|
|
||||||
|
|
||||||
We can easily build a simple `Tooltip` directive that exposes a `tooltip` property, which can
|
|
||||||
be used in templates with standard Angular syntax. For example:
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({
|
|
||||||
selector: '[tooltip]',
|
|
||||||
properties: [
|
|
||||||
'text: tooltip'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
class Tooltip {
|
|
||||||
set text(value: string) {
|
|
||||||
// This will get called every time with the new value when the 'tooltip' property changes
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
We can then bind to the `tooltip' property as either an expression (`someExpression`) or as a
|
|
||||||
string literal, as shown in the HTML template below:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div [tooltip]="someExpression">...</div>
|
|
||||||
<div tooltip="Some Text">...</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
Whenever the `someExpression` expression changes, the `properties` declaration instructs
|
|
||||||
Angular to update the `Tooltip`'s `text` property.
|
|
||||||
|
|
||||||
### Bindings With Pipes
|
|
||||||
|
|
||||||
You can use pipes in bindings, as follows:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div [class-set]="someExpression | somePipe">
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
|
||||||
h3 events
|
|
||||||
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Enumerates the set of emitted events.
|
|
||||||
|
|
||||||
## Syntax
|
|
||||||
|
|
||||||
```
|
|
||||||
@Component({
|
|
||||||
events: ['statusChange']
|
|
||||||
})
|
|
||||||
class TaskComponent {
|
|
||||||
statusChange: EventEmitter;
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
this.statusChange = new EventEmitter();
|
|
||||||
}
|
|
||||||
|
|
||||||
onComplete() {
|
|
||||||
this.statusChange.next('completed');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Use `propertyName: eventName` when the event emitter property name is different from the name
|
|
||||||
of the emitted event:
|
|
||||||
|
|
||||||
```
|
|
||||||
@Component({
|
|
||||||
events: ['status: statusChange']
|
|
||||||
})
|
|
||||||
class TaskComponent {
|
|
||||||
status: EventEmitter;
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
this.status = new EventEmitter();
|
|
||||||
}
|
|
||||||
|
|
||||||
onComplete() {
|
|
||||||
this.status.next('completed');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
|
||||||
h3 host
|
|
||||||
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Specifiy the events, actions, properties and attributes related to the host element.
|
|
||||||
|
|
||||||
## Events
|
|
||||||
|
|
||||||
Specifies which DOM hostListeners a directive listens to via a set of `(event)` to `method`
|
|
||||||
key-value pairs:
|
|
||||||
|
|
||||||
- `event1`: the DOM event that the directive listens to.
|
|
||||||
- `statement`: the statement to execute when the event occurs.
|
|
||||||
If the evalutation of the statement returns `false`, then `preventDefault`is applied on the DOM
|
|
||||||
event.
|
|
||||||
|
|
||||||
To listen to global events, a target must be added to the event name.
|
|
||||||
The target can be `window`, `document` or `body`.
|
|
||||||
|
|
||||||
When writing a directive event binding, you can also refer to the following local variables:
|
|
||||||
- `$event`: Current event object which triggered the event.
|
|
||||||
- `$target`: The source of the event. This will be either a DOM element or an Angular
|
|
||||||
directive. (will be implemented in later release)
|
|
||||||
|
|
||||||
## Syntax
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({
|
|
||||||
host: {
|
|
||||||
'(event1)': 'onMethod1(arguments)',
|
|
||||||
'(target:event2)': 'onMethod2(arguments)',
|
|
||||||
...
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Basic Event Binding:
|
|
||||||
|
|
||||||
Suppose you want to write a directive that reacts to `change` events in the DOM and on
|
|
||||||
`resize` events in window.
|
|
||||||
You would define the event binding as follows:
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({
|
|
||||||
selector: 'input',
|
|
||||||
host: {
|
|
||||||
'(change)': 'onChange($event)',
|
|
||||||
'(window:resize)': 'onResize($event)'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
class InputDirective {
|
|
||||||
onChange(event:Event) {
|
|
||||||
// invoked when the input element fires the 'change' event
|
|
||||||
}
|
|
||||||
onResize(event:Event) {
|
|
||||||
// invoked when the window fires the 'resize' event
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Properties
|
|
||||||
|
|
||||||
Specifies which DOM properties a directives updates.
|
|
||||||
|
|
||||||
## Syntax
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({
|
|
||||||
selector: 'input',
|
|
||||||
host: {
|
|
||||||
'[prop]': 'expression'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
class InputDirective {
|
|
||||||
value:string;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
In this example the prop property of the host element is updated with the expression value
|
|
||||||
every time it changes.
|
|
||||||
|
|
||||||
## Attributes
|
|
||||||
|
|
||||||
Specifies static attributes that should be propagated to a host element. Attributes specified
|
|
||||||
in `hostAttributes` are propagated only if a given attribute is not present on a host element.
|
|
||||||
|
|
||||||
## Syntax
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({
|
|
||||||
selector: '[my-button]',
|
|
||||||
host: {
|
|
||||||
'role': 'button'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
class MyButton {
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
In this example using `my-button` directive (ex.: `<div my-button></div>`) on a host element
|
|
||||||
(here: `<div>` ) will ensure that this element will get the "button" role.
|
|
||||||
|
|
||||||
## Actions
|
|
||||||
|
|
||||||
Specifies which DOM methods a directive can invoke.
|
|
||||||
|
|
||||||
## Syntax
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({
|
|
||||||
selector: 'input',
|
|
||||||
host: {
|
|
||||||
'@emitFocus': 'focus()'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
class InputDirective {
|
|
||||||
constructor() {
|
|
||||||
this.emitFocus = new EventEmitter();
|
|
||||||
}
|
|
||||||
|
|
||||||
focus() {
|
|
||||||
this.emitFocus.next();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
In this example calling focus on InputDirective will result in calling focus on the input.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
|
||||||
h3 lifecycle
|
|
||||||
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Specifies which lifecycle should be notified to the directive.
|
|
||||||
|
|
||||||
See <a href='LifecycleEvent-enum.html'><code>LifecycleEvent</code></a> for details.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
|
||||||
h3 compileChildren
|
|
||||||
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
If set to false the compiler does not compile the children of this directive.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
|
||||||
h3 bindings
|
|
||||||
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Defines the set of injectable objects that are visible to a Directive and its light dom
|
|
||||||
children.
|
|
||||||
|
|
||||||
## Simple Example
|
|
||||||
|
|
||||||
Here is an example of a class that can be injected:
|
|
||||||
|
|
||||||
```
|
|
||||||
class Greeter {
|
|
||||||
greet(name:string) {
|
|
||||||
return 'Hello ' + name + '!';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@Directive({
|
|
||||||
selector: 'greet',
|
|
||||||
bindings: [
|
|
||||||
Greeter
|
|
||||||
]
|
|
||||||
})
|
|
||||||
class HelloWorld {
|
|
||||||
greeter:Greeter;
|
|
||||||
|
|
||||||
constructor(greeter:Greeter) {
|
|
||||||
this.greeter = greeter;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
|
||||||
h3 exportAs
|
|
||||||
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Defines the name that can be used in the template to assign this directive to a variable.
|
|
||||||
|
|
||||||
## Simple Example
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({
|
|
||||||
selector: 'child-dir',
|
|
||||||
exportAs: 'child'
|
|
||||||
})
|
|
||||||
class ChildDir {
|
|
||||||
}
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'main',
|
|
||||||
})
|
|
||||||
@View({
|
|
||||||
template: `<child-dir #c="child"></child-dir>`,
|
|
||||||
directives: [ChildDir]
|
|
||||||
})
|
|
||||||
class MainComponent {
|
|
||||||
}
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,11 +0,0 @@
|
||||||
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations/decorators.ts#L11-L18">angular2/src/core/annotations/decorators.ts (line 11)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Interface for the <a href='Directive-var.html'><code>Directive</code></a> decorator function.
|
|
||||||
|
|
||||||
See <a href='DirectiveFactory-interface.html'><code>DirectiveFactory</code></a>.
|
|
||||||
|
|
||||||
|
|
|
@ -1,46 +0,0 @@
|
||||||
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations/decorators.ts#L58-L111">angular2/src/core/annotations/decorators.ts (line 58)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
<a href='Directive-var.html'><code>Directive</code></a> factory for creating annotations, decorators or DSL.
|
|
||||||
|
|
||||||
## Example as TypeScript Decorator
|
|
||||||
|
|
||||||
```
|
|
||||||
import {Directive} from "angular2/angular2";
|
|
||||||
|
|
||||||
@Directive({...})
|
|
||||||
class MyDirective {
|
|
||||||
constructor() {
|
|
||||||
...
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Example as ES5 DSL
|
|
||||||
|
|
||||||
```
|
|
||||||
var MyDirective = ng
|
|
||||||
.Directive({...})
|
|
||||||
.Class({
|
|
||||||
constructor: function() {
|
|
||||||
...
|
|
||||||
}
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
## Example as ES5 annotation
|
|
||||||
|
|
||||||
```
|
|
||||||
var MyDirective = function() {
|
|
||||||
...
|
|
||||||
};
|
|
||||||
|
|
||||||
MyDirective.annotations = [
|
|
||||||
new ng.Directive({...})
|
|
||||||
]
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
|
@ -1,176 +0,0 @@
|
||||||
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations_impl/annotations.ts#L876-L1008">angular2/src/core/annotations_impl/annotations.ts (line 876)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Lifecycle events are guaranteed to be called in the following order:
|
|
||||||
- `onChange` (optional if any bindings have changed),
|
|
||||||
- `onInit` (optional after the first check only),
|
|
||||||
- `onCheck`,
|
|
||||||
- `onAllChangesDone`
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 Members
|
|
||||||
.l-sub-section
|
|
||||||
h3 onDestroy
|
|
||||||
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Notify a directive whenever a <a href='View-var.html'><code>View</code></a> that contains it is destroyed.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({
|
|
||||||
...,
|
|
||||||
lifecycle: [LifecycleEvent.onDestroy]
|
|
||||||
})
|
|
||||||
class ClassSet {
|
|
||||||
onDestroy() {
|
|
||||||
// invoked to notify directive of the containing view destruction.
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
|
||||||
h3 onChange
|
|
||||||
|
|
||||||
|
|
||||||
: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.
|
|
||||||
|
|
||||||
:
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({
|
|
||||||
selector: '[class-set]',
|
|
||||||
properties: [
|
|
||||||
'propA',
|
|
||||||
'propB'
|
|
||||||
],
|
|
||||||
lifecycle: [LifecycleEvent.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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
|
||||||
h3 onCheck
|
|
||||||
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Notify a directive when it has been checked.
|
|
||||||
|
|
||||||
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 every time even when none of the directive's bindings has changed.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({
|
|
||||||
selector: '[class-set]',
|
|
||||||
lifecycle: [LifecycleEvent.onCheck]
|
|
||||||
})
|
|
||||||
class ClassSet {
|
|
||||||
onCheck() {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
|
||||||
h3 onInit
|
|
||||||
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Notify a directive when it has been checked the first itme.
|
|
||||||
|
|
||||||
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 once.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({
|
|
||||||
selector: '[class-set]',
|
|
||||||
lifecycle: [LifecycleEvent.onInit]
|
|
||||||
})
|
|
||||||
class ClassSet {
|
|
||||||
onInit() {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
|
||||||
h3 onAllChangesDone
|
|
||||||
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Notify a directive when the bindings of all its children have been checked (whether they have
|
|
||||||
changed or not).
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
```
|
|
||||||
@Directive({
|
|
||||||
selector: '[class-set]',
|
|
||||||
lifecycle: [LifecycleEvent.onAllChangesDone]
|
|
||||||
})
|
|
||||||
class ClassSet {
|
|
||||||
|
|
||||||
onAllChangesDone() {
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,28 +0,0 @@
|
||||||
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/compiler/interfaces.ts#L30-L37">angular2/src/core/compiler/interfaces.ts (line 30)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Defines lifecycle method
|
|
||||||
<a href='annotations/LifeCycleEvent#onAllChangesDone'>`LifeCycleEvent.onAllChangesDone`</a>
|
|
||||||
called when the bindings of all its children have been changed.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 Members
|
|
||||||
.l-sub-section
|
|
||||||
h3 onAllChangesDone
|
|
||||||
|
|
||||||
|
|
||||||
pre.prettyprint
|
|
||||||
code.
|
|
||||||
onAllChangesDone()
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,27 +0,0 @@
|
||||||
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/compiler/interfaces.ts#L7-L12">angular2/src/core/compiler/interfaces.ts (line 7)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Defines lifecycle method <a href='annotations/LifeCycleEvent#onChange'>`LifeCycleEvent.onChange`</a>
|
|
||||||
called after all of component's bound properties are updated.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 Members
|
|
||||||
.l-sub-section
|
|
||||||
h3 onChange
|
|
||||||
|
|
||||||
|
|
||||||
pre.prettyprint
|
|
||||||
code.
|
|
||||||
onChange(changes: StringMap<string, any>)
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,27 +0,0 @@
|
||||||
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/compiler/interfaces.ts#L18-L24">angular2/src/core/compiler/interfaces.ts (line 18)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Defines lifecycle method <a href='annotations/LifeCycleEvent#onCheck'>`LifeCycleEvent.onCheck`</a>
|
|
||||||
called when a directive is being checked.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 Members
|
|
||||||
.l-sub-section
|
|
||||||
h3 onCheck
|
|
||||||
|
|
||||||
|
|
||||||
pre.prettyprint
|
|
||||||
code.
|
|
||||||
onCheck()
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,27 +0,0 @@
|
||||||
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/compiler/interfaces.ts#L12-L18">angular2/src/core/compiler/interfaces.ts (line 12)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Defines lifecycle method <a href='annotations/LifeCycleEvent#onDestroy'>`LifeCycleEvent.onDestroy`</a>
|
|
||||||
called when a directive is being destroyed.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 Members
|
|
||||||
.l-sub-section
|
|
||||||
h3 onDestroy
|
|
||||||
|
|
||||||
|
|
||||||
pre.prettyprint
|
|
||||||
code.
|
|
||||||
onDestroy()
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,27 +0,0 @@
|
||||||
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/compiler/interfaces.ts#L24-L30">angular2/src/core/compiler/interfaces.ts (line 24)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Defines lifecycle method <a href='annotations/LifeCycleEvent#onInit'>`LifeCycleEvent.onInit`</a>
|
|
||||||
called when a directive is being checked the first time.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 Members
|
|
||||||
.l-sub-section
|
|
||||||
h3 onInit
|
|
||||||
|
|
||||||
|
|
||||||
pre.prettyprint
|
|
||||||
code.
|
|
||||||
onInit()
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,12 +0,0 @@
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 Pipe <span class="type">variable</span>
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations/decorators.ts#L407-L407">angular2/src/core/annotations/decorators.ts (line 407)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
<a href='Pipe-var.html'><code>Pipe</code></a> factory function.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,58 +0,0 @@
|
||||||
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations_impl/annotations.ts#L1008-L1032">angular2/src/core/annotations_impl/annotations.ts (line 1008)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Declare reusable pipe function.
|
|
||||||
|
|
||||||
## Example
|
|
||||||
|
|
||||||
```
|
|
||||||
@Pipe({
|
|
||||||
name: 'lowercase'
|
|
||||||
})
|
|
||||||
class Lowercase {
|
|
||||||
transform(v, args) { return v.toLowerCase(); }
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 Annotations
|
|
||||||
.l-sub-section
|
|
||||||
h3.annotation CONST
|
|
||||||
pre.prettyprint
|
|
||||||
code.
|
|
||||||
@CONST()
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 Members
|
|
||||||
.l-sub-section
|
|
||||||
h3 constructor
|
|
||||||
|
|
||||||
|
|
||||||
pre.prettyprint
|
|
||||||
code.
|
|
||||||
constructor({name}: {name: string})
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
|
||||||
h3 name
|
|
||||||
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,24 +0,0 @@
|
||||||
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations/decorators.ts#L345-L370">angular2/src/core/annotations/decorators.ts (line 345)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
<a href='Pipe-var.html'><code>Pipe</code></a> factory for creating decorators.
|
|
||||||
|
|
||||||
## Example as TypeScript Decorator
|
|
||||||
|
|
||||||
```
|
|
||||||
import {Pipe} from "angular2/angular2";
|
|
||||||
|
|
||||||
@Pipe({...})
|
|
||||||
class MyPipe {
|
|
||||||
constructor() {
|
|
||||||
...
|
|
||||||
}
|
|
||||||
|
|
||||||
transform(v, args) {}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
|
@ -1,12 +0,0 @@
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 Query <span class="type">variable</span>
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations/decorators.ts#L396-L396">angular2/src/core/annotations/decorators.ts (line 396)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
<a href='Query-var.html'><code>Query</code></a> factory function.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,52 +0,0 @@
|
||||||
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations/decorators.ts#L294-L345">angular2/src/core/annotations/decorators.ts (line 294)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
<a href='Query-var.html'><code>Query</code></a> factory for creating annotations, decorators or DSL.
|
|
||||||
|
|
||||||
## Example as TypeScript Decorator
|
|
||||||
|
|
||||||
```
|
|
||||||
import {Query, QueryList, Component, View} from "angular2/angular2";
|
|
||||||
|
|
||||||
@Component({...})
|
|
||||||
@View({...})
|
|
||||||
class MyComponent {
|
|
||||||
constructor(@Query(SomeType) queryList: QueryList) {
|
|
||||||
...
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Example as ES5 DSL
|
|
||||||
|
|
||||||
```
|
|
||||||
var MyComponent = ng
|
|
||||||
.Component({...})
|
|
||||||
.View({...})
|
|
||||||
.Class({
|
|
||||||
constructor: [new ng.Query(SomeType), function(queryList) {
|
|
||||||
...
|
|
||||||
}]
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
## Example as ES5 annotation
|
|
||||||
|
|
||||||
```
|
|
||||||
var MyComponent = function(queryList) {
|
|
||||||
...
|
|
||||||
};
|
|
||||||
|
|
||||||
MyComponent.annotations = [
|
|
||||||
new ng.Component({...})
|
|
||||||
new ng.View({...})
|
|
||||||
]
|
|
||||||
MyComponent.parameters = [
|
|
||||||
[new ng.Query(SomeType)]
|
|
||||||
]
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
|
@ -1,12 +0,0 @@
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 View <span class="type">variable</span>
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations/decorators.ts#L385-L386">angular2/src/core/annotations/decorators.ts (line 385)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
<a href='View-var.html'><code>View</code></a> factory function.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,37 +0,0 @@
|
||||||
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations/decorators.ts#L38-L58">angular2/src/core/annotations/decorators.ts (line 38)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Interface for the <a href='View-var.html'><code>View</code></a> decorator function.
|
|
||||||
|
|
||||||
See <a href='ViewFactory-interface.html'><code>ViewFactory</code></a>.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 Members
|
|
||||||
.l-sub-section
|
|
||||||
h3 View
|
|
||||||
|
|
||||||
|
|
||||||
pre.prettyprint
|
|
||||||
code.
|
|
||||||
View(obj: {
|
|
||||||
templateUrl?: string,
|
|
||||||
template?: string,
|
|
||||||
directives?: List<Type | any | List<any>>,
|
|
||||||
pipes?: List<Type | any | List<any>>,
|
|
||||||
renderer?: string,
|
|
||||||
styles?: List<string>,
|
|
||||||
styleUrls?: List<string>,
|
|
||||||
})
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Chain <a href='View-var.html'><code>View</code></a> annotation.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,50 +0,0 @@
|
||||||
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/render/api.ts#L274-L293">angular2/src/render/api.ts (line 274)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
How the template and styles of a view should be encapsulated.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 Members
|
|
||||||
.l-sub-section
|
|
||||||
h3 EMULATED
|
|
||||||
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Emulate scoping of styles by preprocessing the style rules
|
|
||||||
and adding additional attributes to elements. This is the default.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
|
||||||
h3 NATIVE
|
|
||||||
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Uses the native mechanism of the renderer. For the DOM this means creating a ShadowRoot.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
|
||||||
h3 NONE
|
|
||||||
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
Don't scope the template nor the styles.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,49 +0,0 @@
|
||||||
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations/decorators.ts#L181-L243">angular2/src/core/annotations/decorators.ts (line 181)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
<a href='ViewAnnotation-class.html'><code>ViewAnnotation</code></a> factory for creating annotations, decorators or DSL.
|
|
||||||
|
|
||||||
## Example as TypeScript Decorator
|
|
||||||
|
|
||||||
```
|
|
||||||
import {Component, View} from "angular2/angular2";
|
|
||||||
|
|
||||||
@Component({...})
|
|
||||||
@View({...})
|
|
||||||
class MyComponent {
|
|
||||||
constructor() {
|
|
||||||
...
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Example as ES5 DSL
|
|
||||||
|
|
||||||
```
|
|
||||||
var MyComponent = ng
|
|
||||||
.Component({...})
|
|
||||||
.View({...})
|
|
||||||
.Class({
|
|
||||||
constructor: function() {
|
|
||||||
...
|
|
||||||
}
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
## Example as ES5 annotation
|
|
||||||
|
|
||||||
```
|
|
||||||
var MyComponent = function() {
|
|
||||||
...
|
|
||||||
};
|
|
||||||
|
|
||||||
MyComponent.annotations = [
|
|
||||||
new ng.Component({...})
|
|
||||||
new ng.View({...})
|
|
||||||
]
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
|
@ -1,12 +0,0 @@
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 ViewQuery <span class="type">variable</span>
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../annotations'>angular2/annotations</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/annotations/decorators.ts#L402-L402">angular2/src/core/annotations/decorators.ts (line 402)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
<a href='ViewQuery-var.html'><code>ViewQuery</code></a> factory function.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,134 +0,0 @@
|
||||||
{
|
|
||||||
"index" : {
|
|
||||||
"title" : "Annotations",
|
|
||||||
"intro" : "Annotations provide the additional information that Angular requires in order to run yourapplication. This modulecontains <a href='Component-var.html'><code>Component</code></a>, <a href='Directive-var.html'><code>Directive</code></a>, and <a href='View-var.html'><code>View</code></a> annotations, as well asthe <a href='../di/Host-var.html'><code>Host</code></a> annotation that is used by Angular to resolve dependencies."
|
|
||||||
},
|
|
||||||
|
|
||||||
"ComponentAnnotation-class" : {
|
|
||||||
"title" : "ComponentAnnotation Class"
|
|
||||||
},
|
|
||||||
|
|
||||||
"DirectiveAnnotation-class" : {
|
|
||||||
"title" : "DirectiveAnnotation Class"
|
|
||||||
},
|
|
||||||
|
|
||||||
"PipeAnnotation-class" : {
|
|
||||||
"title" : "PipeAnnotation Class"
|
|
||||||
},
|
|
||||||
|
|
||||||
"LifecycleEvent-enum" : {
|
|
||||||
"title" : "LifecycleEvent Enum"
|
|
||||||
},
|
|
||||||
|
|
||||||
"ViewAnnotation-class" : {
|
|
||||||
"title" : "ViewAnnotation Class"
|
|
||||||
},
|
|
||||||
|
|
||||||
"ViewEncapsulation-enum" : {
|
|
||||||
"title" : "ViewEncapsulation Enum"
|
|
||||||
},
|
|
||||||
|
|
||||||
"QueryAnnotation-class" : {
|
|
||||||
"title" : "QueryAnnotation Class"
|
|
||||||
},
|
|
||||||
|
|
||||||
"AttributeAnnotation-class" : {
|
|
||||||
"title" : "AttributeAnnotation Class"
|
|
||||||
},
|
|
||||||
|
|
||||||
"OnAllChangesDone-interface" : {
|
|
||||||
"title" : "OnAllChangesDone Interface"
|
|
||||||
},
|
|
||||||
|
|
||||||
"OnChange-interface" : {
|
|
||||||
"title" : "OnChange Interface"
|
|
||||||
},
|
|
||||||
|
|
||||||
"OnDestroy-interface" : {
|
|
||||||
"title" : "OnDestroy Interface"
|
|
||||||
},
|
|
||||||
|
|
||||||
"OnInit-interface" : {
|
|
||||||
"title" : "OnInit Interface"
|
|
||||||
},
|
|
||||||
|
|
||||||
"OnCheck-interface" : {
|
|
||||||
"title" : "OnCheck Interface"
|
|
||||||
},
|
|
||||||
|
|
||||||
"Class-function" : {
|
|
||||||
"title" : "Class Function"
|
|
||||||
},
|
|
||||||
|
|
||||||
"ClassDefinition-interface" : {
|
|
||||||
"title" : "ClassDefinition Interface"
|
|
||||||
},
|
|
||||||
|
|
||||||
"TypeDecorator-interface" : {
|
|
||||||
"title" : "TypeDecorator Interface"
|
|
||||||
},
|
|
||||||
|
|
||||||
"Attribute-var" : {
|
|
||||||
"title" : "Attribute Var"
|
|
||||||
},
|
|
||||||
|
|
||||||
"AttributeFactory-interface" : {
|
|
||||||
"title" : "AttributeFactory Interface"
|
|
||||||
},
|
|
||||||
|
|
||||||
"Component-var" : {
|
|
||||||
"title" : "Component Var"
|
|
||||||
},
|
|
||||||
|
|
||||||
"ComponentDecorator-interface" : {
|
|
||||||
"title" : "ComponentDecorator Interface"
|
|
||||||
},
|
|
||||||
|
|
||||||
"ComponentFactory-interface" : {
|
|
||||||
"title" : "ComponentFactory Interface"
|
|
||||||
},
|
|
||||||
|
|
||||||
"Directive-var" : {
|
|
||||||
"title" : "Directive Var"
|
|
||||||
},
|
|
||||||
|
|
||||||
"DirectiveDecorator-interface" : {
|
|
||||||
"title" : "DirectiveDecorator Interface"
|
|
||||||
},
|
|
||||||
|
|
||||||
"DirectiveFactory-interface" : {
|
|
||||||
"title" : "DirectiveFactory Interface"
|
|
||||||
},
|
|
||||||
|
|
||||||
"View-var" : {
|
|
||||||
"title" : "View Var"
|
|
||||||
},
|
|
||||||
|
|
||||||
"ViewDecorator-interface" : {
|
|
||||||
"title" : "ViewDecorator Interface"
|
|
||||||
},
|
|
||||||
|
|
||||||
"ViewFactory-interface" : {
|
|
||||||
"title" : "ViewFactory Interface"
|
|
||||||
},
|
|
||||||
|
|
||||||
"Query-var" : {
|
|
||||||
"title" : "Query Var"
|
|
||||||
},
|
|
||||||
|
|
||||||
"QueryFactory-interface" : {
|
|
||||||
"title" : "QueryFactory Interface"
|
|
||||||
},
|
|
||||||
|
|
||||||
"ViewQuery-var" : {
|
|
||||||
"title" : "ViewQuery Var"
|
|
||||||
},
|
|
||||||
|
|
||||||
"Pipe-var" : {
|
|
||||||
"title" : "Pipe Var"
|
|
||||||
},
|
|
||||||
|
|
||||||
"PipeFactory-interface" : {
|
|
||||||
"title" : "PipeFactory Interface"
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,13 +0,0 @@
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 CHECKED <span class="type">variable</span>
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/constants.ts#L13-L13">angular2/src/change_detection/constants.ts (line 13)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
CHECKED means that the change detector should be skipped until its mode changes to
|
|
||||||
CHECK_ONCE or CHECK_ALWAYS.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,13 +0,0 @@
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 CHECK_ALWAYS <span class="type">variable</span>
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/constants.ts#L19-L19">angular2/src/change_detection/constants.ts (line 19)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
CHECK_ALWAYS means that after calling detectChanges the mode of the change detector
|
|
||||||
will remain CHECK_ALWAYS.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,13 +0,0 @@
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 CHECK_ONCE <span class="type">variable</span>
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/constants.ts#L7-L7">angular2/src/change_detection/constants.ts (line 7)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
CHECK_ONCE means that after calling detectChanges the mode of the change detector
|
|
||||||
will become CHECKED.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,14 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/exceptions.ts#L18-L36">angular2/src/change_detection/exceptions.ts (line 18)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/change_detection/exceptions.ts#L17-L34">angular2/src/core/change_detection/exceptions.ts (line 17)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Thrown when an expression evaluation raises an exception.
|
Change detection enables data binding in Angular.
|
||||||
|
|
||||||
This error wraps the original exception, this is done to attach expression location information.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
@ -17,7 +13,7 @@ p.location-badge.
|
||||||
|
|
||||||
pre.prettyprint
|
pre.prettyprint
|
||||||
code.
|
code.
|
||||||
constructor(proto: ProtoRecord, originalException: any, originalStack: any, context: any)
|
constructor(exp: string, originalException: any, originalStack: any, context: any)
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,103 @@
|
||||||
|
|
||||||
|
p.location-badge.
|
||||||
|
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||||
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/change_detection/constants.ts#L2-L43">angular2/src/core/change_detection/constants.ts (line 2)</a>
|
||||||
|
|
||||||
|
:markdown
|
||||||
|
Change detection enables data binding in Angular.
|
||||||
|
.l-main-section
|
||||||
|
h2 Members
|
||||||
|
.l-sub-section
|
||||||
|
h3 CheckOnce
|
||||||
|
|
||||||
|
|
||||||
|
:markdown
|
||||||
|
`CheckedOnce` means that after calling detectChanges the mode of the change detector
|
||||||
|
will become `Checked`.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.l-sub-section
|
||||||
|
h3 Checked
|
||||||
|
|
||||||
|
|
||||||
|
:markdown
|
||||||
|
`Checked` means that the change detector should be skipped until its mode changes to
|
||||||
|
`CheckOnce`.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.l-sub-section
|
||||||
|
h3 CheckAlways
|
||||||
|
|
||||||
|
|
||||||
|
:markdown
|
||||||
|
`CheckAlways` means that after calling detectChanges the mode of the change detector
|
||||||
|
will remain `CheckAlways`.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.l-sub-section
|
||||||
|
h3 Detached
|
||||||
|
|
||||||
|
|
||||||
|
:markdown
|
||||||
|
`Detached` means that the change detector sub tree is not a part of the main tree and
|
||||||
|
should be skipped.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.l-sub-section
|
||||||
|
h3 OnPush
|
||||||
|
|
||||||
|
|
||||||
|
:markdown
|
||||||
|
`OnPush` means that the change detector's mode will be set to `CheckOnce` during hydration.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.l-sub-section
|
||||||
|
h3 Default
|
||||||
|
|
||||||
|
|
||||||
|
:markdown
|
||||||
|
`Default` means that the change detector's mode will be set to `CheckAlways` during hydration.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.l-sub-section
|
||||||
|
h3 OnPushObserve
|
||||||
|
|
||||||
|
|
||||||
|
:markdown
|
||||||
|
This is an experimental feature. Works only in Dart.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/interfaces.ts#L49-L67">angular2/src/change_detection/interfaces.ts (line 49)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/change_detection/interfaces.ts#L55-L74">angular2/src/core/change_detection/interfaces.ts (line 55)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
Change detection enables data binding in Angular.
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
@ -172,6 +171,22 @@ p.location-badge.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.l-sub-section
|
||||||
|
h3 handleEvent
|
||||||
|
|
||||||
|
|
||||||
|
pre.prettyprint
|
||||||
|
code.
|
||||||
|
handleEvent(eventName: string, elIndex: number, locals: Locals)
|
||||||
|
|
||||||
|
:markdown
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
h3 detectChanges
|
h3 detectChanges
|
||||||
|
|
||||||
|
|
|
@ -1,15 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/change_detector_ref.ts#L2-L39">angular2/src/change_detection/change_detector_ref.ts (line 2)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/change_detection/change_detector_ref.ts#L2-L38">angular2/src/core/change_detection/change_detector_ref.ts (line 2)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Controls change detection.
|
Change detection enables data binding in Angular.
|
||||||
|
|
||||||
<a href='ChangeDetectorRef-class.html'><code>ChangeDetectorRef</code></a> allows requesting checks for detectors that rely on observables. It
|
|
||||||
also allows detaching and attaching change detector subtrees.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
@ -27,15 +22,15 @@ p.location-badge.
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
h3 requestCheck
|
h3 markForCheck
|
||||||
|
|
||||||
|
|
||||||
pre.prettyprint
|
pre.prettyprint
|
||||||
code.
|
code.
|
||||||
requestCheck()
|
markForCheck()
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Request to check all ON_PUSH ancestors.
|
Request to check all OnPush ancestors.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -74,8 +69,7 @@ p.location-badge.
|
||||||
Reattach the change detector to the change detector tree.
|
Reattach the change detector to the change detector tree.
|
||||||
|
|
||||||
This also requests a check of this change detector. This reattached change detector will be
|
This also requests a check of this change detector. This reattached change detector will be
|
||||||
checked during the
|
checked during the next change detection run.
|
||||||
next change detection run.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,12 +0,0 @@
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 DEFAULT <span class="type">variable</span>
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/constants.ts#L35-L35">angular2/src/change_detection/constants.ts (line 35)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
DEFAULT means that the change detector's mode will be set to CHECK_ALWAYS during hydration.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,13 +0,0 @@
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 DETACHED <span class="type">variable</span>
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/constants.ts#L25-L25">angular2/src/change_detection/constants.ts (line 25)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
DETACHED means that the change detector sub tree is not a part of the main tree and
|
|
||||||
should be skipped.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,18 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/exceptions.ts#L2-L18">angular2/src/change_detection/exceptions.ts (line 2)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/change_detection/exceptions.ts#L1-L17">angular2/src/core/change_detection/exceptions.ts (line 1)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
An error thrown if application changes model breaking the top-down data flow.
|
Change detection enables data binding in Angular.
|
||||||
|
|
||||||
Angular expects that the data flows from top (root) component to child (leaf) components.
|
|
||||||
This is known as directed acyclic graph. This allows Angular to only execute change detection
|
|
||||||
once and prevents loops in change detection data flow.
|
|
||||||
|
|
||||||
This exception is only thrown in dev mode.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
@ -21,7 +13,7 @@ p.location-badge.
|
||||||
|
|
||||||
pre.prettyprint
|
pre.prettyprint
|
||||||
code.
|
code.
|
||||||
constructor(proto: ProtoRecord, change: any, context: any)
|
constructor(exp: string, oldValue: any, currValue: any, context: any)
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/differs/iterable_differs.ts#L4-L9">angular2/src/change_detection/differs/iterable_differs.ts (line 4)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/change_detection/differs/iterable_differs.ts#L4-L9">angular2/src/core/change_detection/differs/iterable_differs.ts (line 4)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
Change detection enables data binding in Angular.
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,12 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/differs/iterable_differs.ts#L9-L17">angular2/src/change_detection/differs/iterable_differs.ts (line 9)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/change_detection/differs/iterable_differs.ts#L9-L17">angular2/src/core/change_detection/differs/iterable_differs.ts (line 9)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Provides a factory for <a href='IterableDiffer-interface.html'><code>IterableDiffer</code></a>.
|
Change detection enables data binding in Angular.
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,12 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/differs/iterable_differs.ts#L17-L80">angular2/src/change_detection/differs/iterable_differs.ts (line 17)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/change_detection/differs/iterable_differs.ts#L17-L80">angular2/src/core/change_detection/differs/iterable_differs.ts (line 17)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
A repository of different iterable diffing strategies used by NgFor, NgClass, and others.
|
Change detection enables data binding in Angular.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Annotations
|
h2 Annotations
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/differs/keyvalue_differs.ts#L4-L9">angular2/src/change_detection/differs/keyvalue_differs.ts (line 4)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/change_detection/differs/keyvalue_differs.ts#L4-L9">angular2/src/core/change_detection/differs/keyvalue_differs.ts (line 4)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
Change detection enables data binding in Angular.
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,12 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/differs/keyvalue_differs.ts#L9-L17">angular2/src/change_detection/differs/keyvalue_differs.ts (line 9)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/change_detection/differs/keyvalue_differs.ts#L9-L17">angular2/src/core/change_detection/differs/keyvalue_differs.ts (line 9)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Provides a factory for <a href='KeyValueDiffer-interface.html'><code>KeyValueDiffer</code></a>.
|
Change detection enables data binding in Angular.
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,12 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/differs/keyvalue_differs.ts#L17-L80">angular2/src/change_detection/differs/keyvalue_differs.ts (line 17)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/change_detection/differs/keyvalue_differs.ts#L17-L80">angular2/src/core/change_detection/differs/keyvalue_differs.ts (line 17)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
A repository of different Map diffing strategies used by NgClass, NgStyle, and others.
|
Change detection enables data binding in Angular.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Annotations
|
h2 Annotations
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/parser/locals.ts#L2-L44">angular2/src/change_detection/parser/locals.ts (line 2)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/change_detection/parser/locals.ts#L2-L44">angular2/src/core/change_detection/parser/locals.ts (line 2)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
Change detection enables data binding in Angular.
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,12 +0,0 @@
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
h2 ON_PUSH <span class="type">variable</span>
|
|
||||||
p.location-badge.
|
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/constants.ts#L30-L30">angular2/src/change_detection/constants.ts (line 30)</a>
|
|
||||||
|
|
||||||
:markdown
|
|
||||||
ON_PUSH means that the change detector's mode will be set to CHECK_ONCE during hydration.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,30 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/pipe_transform.ts#L16-L39">angular2/src/change_detection/pipe_transform.ts (line 16)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/change_detection/pipe_transform.ts#L16-L39">angular2/src/core/change_detection/pipe_transform.ts (line 16)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
An interface that stateful pipes should implement.
|
Change detection enables data binding in Angular.
|
||||||
|
|
||||||
#Example
|
|
||||||
|
|
||||||
```
|
|
||||||
class StatefulPipe implements PipeTransform, PipeOnDestroy {
|
|
||||||
connection;
|
|
||||||
|
|
||||||
onDestroy() {
|
|
||||||
this.connection.release();
|
|
||||||
}
|
|
||||||
|
|
||||||
transform(value, args = []) {
|
|
||||||
this.connection = createConnection();
|
|
||||||
// ...
|
|
||||||
return someValue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,22 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/pipe_transform.ts#L1-L16">angular2/src/change_detection/pipe_transform.ts (line 1)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/change_detection/pipe_transform.ts#L1-L16">angular2/src/core/change_detection/pipe_transform.ts (line 1)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
An interface which all pipes must implement.
|
Change detection enables data binding in Angular.
|
||||||
|
|
||||||
#Example
|
|
||||||
|
|
||||||
```
|
|
||||||
class DoublePipe implements PipeTransform {
|
|
||||||
transform(value, args = []) {
|
|
||||||
return `${value}${value}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
@ -25,7 +13,7 @@ p.location-badge.
|
||||||
|
|
||||||
pre.prettyprint
|
pre.prettyprint
|
||||||
code.
|
code.
|
||||||
transform(value: any, args: List<any>)
|
transform(value: any, args: any[])
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
|
||||||
|
|
|
@ -1,26 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/change_detection/change_detection_util.ts#L5-L33">angular2/src/change_detection/change_detection_util.ts (line 5)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/change_detection/change_detection_util.ts#L14-L43">angular2/src/core/change_detection/change_detection_util.ts (line 14)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Indicates that the result of a <a href='../annotations/Pipe-var.html'><code>Pipe</code></a> transformation has changed even though the reference
|
Change detection enables data binding in Angular.
|
||||||
has not changed.
|
|
||||||
|
|
||||||
The wrapped value will be unwrapped by change detection, and the unwrapped value will be stored.
|
|
||||||
|
|
||||||
Example:
|
|
||||||
|
|
||||||
```
|
|
||||||
if (this._latestValue === this._latestReturnedValue) {
|
|
||||||
return this._latestReturnedValue;
|
|
||||||
} else {
|
|
||||||
this._latestReturnedValue = this._latestValue;
|
|
||||||
return WrappedValue.wrap(this._latestValue); // this will force update
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -4,83 +4,63 @@
|
||||||
"intro" : "Change detection enables data binding in Angular."
|
"intro" : "Change detection enables data binding in Angular."
|
||||||
},
|
},
|
||||||
|
|
||||||
"CHECK_ONCE-const" : {
|
"ChangeDetectionStrategy-enum" : {
|
||||||
"title" : "CHECK_ONCE Const"
|
"title" : "ChangeDetectionStrategy"
|
||||||
},
|
|
||||||
|
|
||||||
"CHECK_ALWAYS-const" : {
|
|
||||||
"title" : "CHECK_ALWAYS Const"
|
|
||||||
},
|
|
||||||
|
|
||||||
"DETACHED-const" : {
|
|
||||||
"title" : "DETACHED Const"
|
|
||||||
},
|
|
||||||
|
|
||||||
"CHECKED-const" : {
|
|
||||||
"title" : "CHECKED Const"
|
|
||||||
},
|
|
||||||
|
|
||||||
"ON_PUSH-const" : {
|
|
||||||
"title" : "ON_PUSH Const"
|
|
||||||
},
|
|
||||||
|
|
||||||
"DEFAULT-const" : {
|
|
||||||
"title" : "DEFAULT Const"
|
|
||||||
},
|
},
|
||||||
|
|
||||||
"ExpressionChangedAfterItHasBeenCheckedException-class" : {
|
"ExpressionChangedAfterItHasBeenCheckedException-class" : {
|
||||||
"title" : "ExpressionChangedAfterItHasBeenCheckedException Class"
|
"title" : "ExpressionChangedAfterItHasBeenCheckedException"
|
||||||
},
|
},
|
||||||
|
|
||||||
"ChangeDetectionError-class" : {
|
"ChangeDetectionError-class" : {
|
||||||
"title" : "ChangeDetectionError Class"
|
"title" : "ChangeDetectionError"
|
||||||
},
|
},
|
||||||
|
|
||||||
"ChangeDetector-interface" : {
|
"ChangeDetector-interface" : {
|
||||||
"title" : "ChangeDetector Interface"
|
"title" : "ChangeDetector"
|
||||||
},
|
},
|
||||||
|
|
||||||
"Locals-class" : {
|
"Locals-class" : {
|
||||||
"title" : "Locals Class"
|
"title" : "Locals"
|
||||||
},
|
},
|
||||||
|
|
||||||
"ChangeDetectorRef-class" : {
|
"ChangeDetectorRef-class" : {
|
||||||
"title" : "ChangeDetectorRef Class"
|
"title" : "ChangeDetectorRef"
|
||||||
},
|
},
|
||||||
|
|
||||||
"WrappedValue-class" : {
|
"WrappedValue-class" : {
|
||||||
"title" : "WrappedValue Class"
|
"title" : "WrappedValue"
|
||||||
},
|
},
|
||||||
|
|
||||||
"PipeTransform-interface" : {
|
"PipeTransform-interface" : {
|
||||||
"title" : "PipeTransform Interface"
|
"title" : "PipeTransform"
|
||||||
},
|
},
|
||||||
|
|
||||||
"PipeOnDestroy-interface" : {
|
"PipeOnDestroy-interface" : {
|
||||||
"title" : "PipeOnDestroy Interface"
|
"title" : "PipeOnDestroy"
|
||||||
},
|
},
|
||||||
|
|
||||||
"IterableDiffers-class" : {
|
"IterableDiffers-class" : {
|
||||||
"title" : "IterableDiffers Class"
|
"title" : "IterableDiffers"
|
||||||
},
|
},
|
||||||
|
|
||||||
"IterableDiffer-interface" : {
|
"IterableDiffer-interface" : {
|
||||||
"title" : "IterableDiffer Interface"
|
"title" : "IterableDiffer"
|
||||||
},
|
},
|
||||||
|
|
||||||
"IterableDifferFactory-interface" : {
|
"IterableDifferFactory-interface" : {
|
||||||
"title" : "IterableDifferFactory Interface"
|
"title" : "IterableDifferFactory"
|
||||||
},
|
},
|
||||||
|
|
||||||
"KeyValueDiffers-class" : {
|
"KeyValueDiffers-class" : {
|
||||||
"title" : "KeyValueDiffers Class"
|
"title" : "KeyValueDiffers"
|
||||||
},
|
},
|
||||||
|
|
||||||
"KeyValueDiffer-interface" : {
|
"KeyValueDiffer-interface" : {
|
||||||
"title" : "KeyValueDiffer Interface"
|
"title" : "KeyValueDiffer"
|
||||||
},
|
},
|
||||||
|
|
||||||
"KeyValueDifferFactory-interface" : {
|
"KeyValueDifferFactory-interface" : {
|
||||||
"title" : "KeyValueDifferFactory Interface"
|
"title" : "KeyValueDifferFactory"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/change_detection.ts#L1-L32">angular2/change_detection.ts (line 1)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/change_detection.ts#L1-L28">angular2/change_detection.ts (line 1)</a>
|
||||||
|
|
||||||
ul
|
ul
|
||||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
||||||
|
|
|
@ -1,9 +1,8 @@
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 APP_COMPONENT <span class="type">variable</span>
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/application_tokens.ts#L25-L25">angular2/src/core/application_tokens.ts (line 25)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/application_tokens.ts#L25-L25">angular2/src/core/application_tokens.ts (line 25)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
An opaque token representing the application root type in the <a href='../di/Injector-class.html'><code>Injector</code></a>.
|
An opaque token representing the application root type in the <a href='../di/Injector-class.html'><code>Injector</code></a>.
|
||||||
|
|
|
@ -1,18 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/services/app_root_url.ts#L2-L25">angular2/src/services/app_root_url.ts (line 2)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/services/app_root_url.ts#L2-L25">angular2/src/core/services/app_root_url.ts (line 2)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Specifies app root url for the application.
|
Define angular core API here.
|
||||||
|
|
||||||
Used by the <a href='Compiler-class.html'><code>Compiler</code></a> when resolving HTML and CSS template URLs.
|
|
||||||
|
|
||||||
This interface can be overridden by the application developer to create custom behavior.
|
|
||||||
|
|
||||||
See <a href='Compiler-class.html'><code>Compiler</code></a>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Annotations
|
h2 Annotations
|
||||||
|
|
|
@ -1,14 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/compiler/view_manager.ts#L18-L378">angular2/src/core/compiler/view_manager.ts (line 18)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/compiler/view_manager.ts#L18-L378">angular2/src/core/compiler/view_manager.ts (line 18)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Entry point for creating, moving views in the view hierarchy and destroying views.
|
Define angular core API here.
|
||||||
This manager contains all recursion and delegates to helper methods
|
|
||||||
in AppViewManagerUtils and the Renderer, so unit tests get simpler.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Annotations
|
h2 Annotations
|
||||||
|
|
|
@ -1,16 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/application_common.ts#L338-L383">angular2/src/core/application_common.ts (line 338)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/application_ref.ts#L3-L47">angular2/src/core/application_ref.ts (line 3)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Represents a Angular's representation of an Application.
|
Define angular core API here.
|
||||||
|
|
||||||
`ApplicationRef` represents a running application instance. Use it to retrieve the host
|
|
||||||
component, injector,
|
|
||||||
or dispose of an application.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
@ -32,7 +26,7 @@ p.location-badge.
|
||||||
|
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Returns the current <a href='../annotations/Component-var.html'><code>Component</code></a> type.
|
Returns the current <a href='../metadata/ComponentMetadata-class.html'><code>ComponentMetadata</code></a> type.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -45,7 +39,7 @@ p.location-badge.
|
||||||
|
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Returns the current <a href='../annotations/Component-var.html'><code>Component</code></a> instance.
|
Returns the current <a href='../metadata/ComponentMetadata-class.html'><code>ComponentMetadata</code></a> instance.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,29 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/compiler/compiler.ts#L64-L355">angular2/src/core/compiler/compiler.ts (line 64)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/compiler/compiler.ts#L71-L361">angular2/src/core/compiler/compiler.ts (line 71)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
## URL Resolution
|
Define angular core API here.
|
||||||
|
|
||||||
```
|
|
||||||
var appRootUrl: AppRootUrl = ...;
|
|
||||||
var componentUrlMapper: ComponentUrlMapper = ...;
|
|
||||||
var urlResolver: UrlResolver = ...;
|
|
||||||
|
|
||||||
var componentType: Type = ...;
|
|
||||||
var componentAnnotation: ComponentAnnotation = ...;
|
|
||||||
var viewAnnotation: ViewAnnotation = ...;
|
|
||||||
|
|
||||||
// Resolving a URL
|
|
||||||
|
|
||||||
var url = viewAnnotation.templateUrl;
|
|
||||||
var componentUrl = componentUrlMapper.getUrl(componentType);
|
|
||||||
var componentResolvedUrl = urlResolver.resolve(appRootUrl.value, componentUrl);
|
|
||||||
var templateResolvedUrl = urlResolver.resolve(componetResolvedUrl, url);
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Annotations
|
h2 Annotations
|
||||||
|
@ -42,7 +23,7 @@ p.location-badge.
|
||||||
|
|
||||||
pre.prettyprint
|
pre.prettyprint
|
||||||
code.
|
code.
|
||||||
constructor(_directiveResolver: DirectiveResolver, _pipeResolver: PipeResolver, _defaultPipes: Type[], _compilerCache: CompilerCache, _viewResolver: ViewResolver, _componentUrlMapper: ComponentUrlMapper, _urlResolver: UrlResolver, _render:RenderCompiler, _protoViewFactory: ProtoViewFactory, appUrl: AppRootUrl)
|
constructor(_directiveResolver: DirectiveResolver, _pipeResolver: PipeResolver, _defaultPipes: Type[], _compilerCache: CompilerCache, _viewResolver: ViewResolver, _componentUrlMapper: ComponentUrlMapper, _urlResolver: UrlResolver, _render: RenderCompiler, _protoViewFactory: ProtoViewFactory, appUrl: AppRootUrl)
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
|
||||||
|
|
|
@ -1,14 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/compiler/dynamic_component_loader.ts#L7-L42">angular2/src/core/compiler/dynamic_component_loader.ts (line 7)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/compiler/dynamic_component_loader.ts#L7-L42">angular2/src/core/compiler/dynamic_component_loader.ts (line 7)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Angular's reference to a component instance.
|
Define angular core API here.
|
||||||
|
|
||||||
`ComponentRef` represents a component instance lifecycle and meta information.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,16 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/compiler/component_url_mapper.ts#L3-L21">angular2/src/core/compiler/component_url_mapper.ts (line 3)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/compiler/component_url_mapper.ts#L3-L21">angular2/src/core/compiler/component_url_mapper.ts (line 3)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Resolve a `Type` from a <a href='../annotations/Component-var.html'><code>Component</code></a> into a URL.
|
Define angular core API here.
|
||||||
|
|
||||||
This interface can be overridden by the application developer to create custom behavior.
|
|
||||||
|
|
||||||
See <a href='Compiler-class.html'><code>Compiler</code></a>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Annotations
|
h2 Annotations
|
||||||
|
|
|
@ -1,16 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/compiler/directive_resolver.ts#L4-L30">angular2/src/core/compiler/directive_resolver.ts (line 4)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/compiler/directive_resolver.ts#L4-L30">angular2/src/core/compiler/directive_resolver.ts (line 4)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Resolve a `Type` for <a href='../annotations/Directive-var.html'><code>Directive</code></a>.
|
Define angular core API here.
|
||||||
|
|
||||||
This interface can be overridden by the application developer to create custom behavior.
|
|
||||||
|
|
||||||
See <a href='Compiler-class.html'><code>Compiler</code></a>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Annotations
|
h2 Annotations
|
||||||
|
@ -32,7 +26,7 @@ p.location-badge.
|
||||||
resolve(type: Type)
|
resolve(type: Type)
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Return <a href='../annotations/Directive-var.html'><code>Directive</code></a> for a given `Type`.
|
Return <a href='../metadata/DirectiveMetadata-class.html'><code>DirectiveMetadata</code></a> for a given `Type`.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,13 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/compiler/dynamic_component_loader.ts#L42-L235">angular2/src/core/compiler/dynamic_component_loader.ts (line 42)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/compiler/dynamic_component_loader.ts#L42-L235">angular2/src/core/compiler/dynamic_component_loader.ts (line 42)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Service for dynamically loading a Component into an arbitrary position in the internal Angular
|
Define angular core API here.
|
||||||
application tree.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Annotations
|
h2 Annotations
|
||||||
|
|
|
@ -1,17 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/compiler/element_ref.ts#L3-L63">angular2/src/core/compiler/element_ref.ts (line 3)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/compiler/element_ref.ts#L3-L63">angular2/src/core/compiler/element_ref.ts (line 3)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Reference to the element.
|
Define angular core API here.
|
||||||
|
|
||||||
Represents an opaque reference to the underlying element. The element is a DOM ELement in
|
|
||||||
a Browser, but may represent other types on other rendering platforms. In the browser the
|
|
||||||
`ElementRef` can be sent to the web-worker. Web Workers can not have references to the
|
|
||||||
DOM Elements.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,15 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/facade/async.ts#L90-L129">angular2/src/facade/async.ts (line 90)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/facade/async.ts#L91-L123">angular2/src/core/facade/async.ts (line 91)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Use Rx.Observable but provides an adapter to make it work as specified here:
|
Define angular core API here.
|
||||||
https://github.com/jhusain/observable-spec
|
|
||||||
|
|
||||||
Once a reference implementation of the spec is available, switch to it.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/compiler/view_ref.ts#L13-L15">angular2/src/core/compiler/view_ref.ts (line 13)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/compiler/view_ref.ts#L13-L15">angular2/src/core/compiler/view_ref.ts (line 13)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
Define angular core API here.
|
||||||
|
|
||||||
|
|
|
@ -1,35 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/life_cycle/life_cycle.ts#L5-L89">angular2/src/core/life_cycle/life_cycle.ts (line 5)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/life_cycle/life_cycle.ts#L5-L89">angular2/src/core/life_cycle/life_cycle.ts (line 5)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Provides access to explicitly trigger change detection in an application.
|
Define angular core API here.
|
||||||
|
|
||||||
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
|
.l-main-section
|
||||||
h2 Annotations
|
h2 Annotations
|
||||||
|
|
|
@ -1,18 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/zone/ng_zone.ts#L6-L279">angular2/src/core/zone/ng_zone.ts (line 6)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/zone/ng_zone.ts#L6-L279">angular2/src/core/zone/ng_zone.ts (line 6)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
A wrapper around zones that lets you schedule tasks after it has executed a task.
|
Define angular core API here.
|
||||||
|
|
||||||
The wrapper maintains an "inner" and an "mount" `Zone`. The application code will executes
|
|
||||||
in the "inner" zone unless `runOutsideAngular` is explicitely called.
|
|
||||||
|
|
||||||
A typical application will create a singleton `NgZone`. The outer `Zone` is a fork of the root
|
|
||||||
`Zone`. The default `onTurnDone` runs the Angular change detection.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/facade/async.ts#L85-L90">angular2/src/facade/async.ts (line 85)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/facade/async.ts#L86-L91">angular2/src/core/facade/async.ts (line 86)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
Define angular core API here.
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,45 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/compiler/view_ref.ts#L91-L134">angular2/src/core/compiler/view_ref.ts (line 91)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/compiler/view_ref.ts#L91-L135">angular2/src/core/compiler/view_ref.ts (line 91)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
A reference to an Angular ProtoView.
|
Define angular core API here.
|
||||||
|
|
||||||
A ProtoView is a reference to a template for easy creation of views.
|
|
||||||
(See <a href='AppViewManager-class.html#createViewInContainer'><code>AppViewManager</code></a> and <a href='AppViewManager-class.html#createRootHostView'><code>AppViewManager</code></a>).
|
|
||||||
|
|
||||||
A `ProtoView` is a foctary for creating `View`s.
|
|
||||||
|
|
||||||
## Example
|
|
||||||
|
|
||||||
Given this template
|
|
||||||
|
|
||||||
```
|
|
||||||
Count: {{items.length}}
|
|
||||||
<ul>
|
|
||||||
<li *ng-for="var item of items">{{item}}</li>
|
|
||||||
</ul>
|
|
||||||
```
|
|
||||||
|
|
||||||
The above example we have two <a href='ProtoViewRef-class.html'><code>ProtoViewRef</code></a>s:
|
|
||||||
|
|
||||||
Outter <a href='ProtoViewRef-class.html'><code>ProtoViewRef</code></a>:
|
|
||||||
```
|
|
||||||
Count: {{items.length}}
|
|
||||||
<ul>
|
|
||||||
<template ng-for var-item [ng-for-of]="items"></template>
|
|
||||||
</ul>
|
|
||||||
```
|
|
||||||
|
|
||||||
Inner <a href='ProtoViewRef-class.html'><code>ProtoViewRef</code></a>:
|
|
||||||
```
|
|
||||||
<li>{{item}}</li>
|
|
||||||
```
|
|
||||||
|
|
||||||
Notice that the original template is broken down into two separate <a href='ProtoViewRef-class.html'><code>ProtoViewRef</code></a>s.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,80 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/compiler/query_list.ts#L1-L107">angular2/src/core/compiler/query_list.ts (line 1)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/compiler/query_list.ts#L1-L109">angular2/src/core/compiler/query_list.ts (line 1)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
An iterable and observable live list of components in the DOM.
|
Define angular core API here.
|
||||||
|
|
||||||
A QueryList contains a live list of child directives in the DOM of a directive.
|
|
||||||
The directives are kept in depth-first pre-order traversal of the DOM.
|
|
||||||
|
|
||||||
The `QueryList` is iterable, therefore it can be used in both javascript code with `for..of` loop
|
|
||||||
as well as in template with `*ng-for="of"` directive.
|
|
||||||
|
|
||||||
QueryList is updated as part of the change-detection cycle of a directive. Since change detection
|
|
||||||
happens after construction of a directive, QueryList will always be empty when observed in the
|
|
||||||
constructor.
|
|
||||||
|
|
||||||
|
|
||||||
NOTE: In the future this class will implement an `Observable` interface. For now it uses a plain
|
|
||||||
list of observable callbacks.
|
|
||||||
|
|
||||||
# Example:
|
|
||||||
|
|
||||||
Assume that `<tabs>` component would like to get a list its children which are `<pane>`
|
|
||||||
components as shown in this example:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<tabs>
|
|
||||||
<pane title="Overview">...</pane>
|
|
||||||
<pane *ng-for="#o of objects" [title]="o.title">{{o.text}}</pane>
|
|
||||||
</tabs>
|
|
||||||
```
|
|
||||||
|
|
||||||
In the above example the list of `<tabs>` elements needs to get a list of `<pane>` elements so
|
|
||||||
that it could render tabs with the correct titles and in the correct order.
|
|
||||||
|
|
||||||
A possible solution would be for a `<pane>` to inject `<tabs>` component and then register itself
|
|
||||||
with `<tabs>` component's on `hydrate` and deregister on `dehydrate` event. While a reasonable
|
|
||||||
approach, this would only work partialy since `*ng-for` could rearrange the list of `<pane>`
|
|
||||||
components which would not be reported to `<tabs>` component and thus the list of `<pane>`
|
|
||||||
components would be out of sync with respect to the list of `<pane>` elements.
|
|
||||||
|
|
||||||
A preferred solution is to inject a `QueryList` which is a live list of directives in the
|
|
||||||
component`s light DOM.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
@Component({
|
|
||||||
selector: 'tabs'
|
|
||||||
})
|
|
||||||
@View({
|
|
||||||
template: `
|
|
||||||
<ul>
|
|
||||||
<li *ng-for="#pane of panes">{{pane.title}}</li>
|
|
||||||
</ul>
|
|
||||||
<content></content>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
class Tabs {
|
|
||||||
panes: QueryList<Pane>
|
|
||||||
|
|
||||||
constructor(@Query(Pane) panes:QueryList<Pane>) {
|
|
||||||
this.panes = panes;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'pane',
|
|
||||||
properties: ['title']
|
|
||||||
})
|
|
||||||
@View(...)
|
|
||||||
class Pane {
|
|
||||||
title:string;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
@ -83,7 +13,7 @@ p.location-badge.
|
||||||
|
|
||||||
pre.prettyprint
|
pre.prettyprint
|
||||||
code.
|
code.
|
||||||
reset(newList: List<T>)
|
reset(newList: T[])
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
|
||||||
|
@ -157,6 +87,22 @@ p.location-badge.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.l-sub-section
|
||||||
|
h3 toString
|
||||||
|
|
||||||
|
|
||||||
|
pre.prettyprint
|
||||||
|
code.
|
||||||
|
toString()
|
||||||
|
|
||||||
|
:markdown
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
h3 length
|
h3 length
|
||||||
|
|
||||||
|
|
|
@ -1,15 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/compiler/template_ref.ts#L3-L32">angular2/src/core/compiler/template_ref.ts (line 3)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/compiler/template_ref.ts#L3-L32">angular2/src/core/compiler/template_ref.ts (line 3)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Reference to a template within a component.
|
Define angular core API here.
|
||||||
|
|
||||||
Represents an opaque reference to the underlying template that can
|
|
||||||
be instantiated using the <a href='ViewContainerRef-class.html'><code>ViewContainerRef</code></a>.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,11 +1,7 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/facade/lang.ts#L5-L5">angular2/src/facade/lang.ts (line 5)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/facade/lang.ts#L23-L23">angular2/src/core/facade/lang.ts (line 23)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Runtime representation of a type.
|
Define angular core API here.
|
||||||
|
|
||||||
In JavaScript a Type is a constructor function.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,16 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/services/url_resolver.ts#L9-L33">angular2/src/services/url_resolver.ts (line 9)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/services/url_resolver.ts#L9-L33">angular2/src/core/services/url_resolver.ts (line 9)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Used by the <a href='Compiler-class.html'><code>Compiler</code></a> when resolving HTML and CSS template URLs.
|
Define angular core API here.
|
||||||
|
|
||||||
This interface can be overridden by the application developer to create custom behavior.
|
|
||||||
|
|
||||||
See <a href='Compiler-class.html'><code>Compiler</code></a>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Annotations
|
h2 Annotations
|
||||||
|
|
|
@ -1,16 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/compiler/view_container_ref.ts#L10-L116">angular2/src/core/compiler/view_container_ref.ts (line 10)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/compiler/view_container_ref.ts#L10-L116">angular2/src/core/compiler/view_container_ref.ts (line 10)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
A location where <a href='ViewRef-class.html'><code>ViewRef</code></a>s can be attached.
|
Define angular core API here.
|
||||||
|
|
||||||
A `ViewContainerRef` represents a location in a <a href='ViewRef-class.html'><code>ViewRef</code></a> where other child
|
|
||||||
<a href='ViewRef-class.html'><code>ViewRef</code></a>s can be inserted. Adding and removing views is the only way of structurally
|
|
||||||
changing the rendered DOM of the application.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,60 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../core'>angular2/core</a>
|
exported from <a href='../core'>angular2/core</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/core/compiler/view_ref.ts#L15-L91">angular2/src/core/compiler/view_ref.ts (line 15)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/compiler/view_ref.ts#L15-L91">angular2/src/core/compiler/view_ref.ts (line 15)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
A reference to an Angular View.
|
Define angular core API here.
|
||||||
|
|
||||||
A View is a fundamental building block of Application UI. A View is the smallest set of
|
|
||||||
elements which are created and destroyed together. A View can change properties on the elements
|
|
||||||
within the view, but it can not change the structure of those elements.
|
|
||||||
|
|
||||||
To change structure of the elements, the Views can contain zero or more <a href='ViewContainerRef-class.html'><code>ViewContainerRef</code></a>s
|
|
||||||
which allow the views to be nested.
|
|
||||||
|
|
||||||
## Example
|
|
||||||
|
|
||||||
Given this template
|
|
||||||
|
|
||||||
```
|
|
||||||
Count: {{items.length}}
|
|
||||||
<ul>
|
|
||||||
<li *ng-for="var item of items">{{item}}</li>
|
|
||||||
</ul>
|
|
||||||
```
|
|
||||||
|
|
||||||
The above example we have two <a href='ProtoViewRef-class.html'><code>ProtoViewRef</code></a>s:
|
|
||||||
|
|
||||||
Outter <a href='ProtoViewRef-class.html'><code>ProtoViewRef</code></a>:
|
|
||||||
```
|
|
||||||
Count: {{items.length}}
|
|
||||||
<ul>
|
|
||||||
<template ng-for var-item [ng-for-of]="items"></template>
|
|
||||||
</ul>
|
|
||||||
```
|
|
||||||
|
|
||||||
Inner <a href='ProtoViewRef-class.html'><code>ProtoViewRef</code></a>:
|
|
||||||
```
|
|
||||||
<li>{{item}}</li>
|
|
||||||
```
|
|
||||||
|
|
||||||
Notice that the original template is broken down into two separate <a href='ProtoViewRef-class.html'><code>ProtoViewRef</code></a>s.
|
|
||||||
|
|
||||||
The outter/inner <a href='ProtoViewRef-class.html'><code>ProtoViewRef</code></a>s are then assembled into views like so:
|
|
||||||
|
|
||||||
```
|
|
||||||
<!-- ViewRef: outer-0 -->
|
|
||||||
Count: 2
|
|
||||||
<ul>
|
|
||||||
<template view-container-ref></template>
|
|
||||||
<!-- ViewRef: inner-1 --><li>first</li><!-- /ViewRef: inner-1 -->
|
|
||||||
<!-- ViewRef: inner-2 --><li>second</li><!-- /ViewRef: inner-2 -->
|
|
||||||
</ul>
|
|
||||||
<!-- /ViewRef: outer-0 -->
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -5,90 +5,91 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
"APP_COMPONENT-const" : {
|
"APP_COMPONENT-const" : {
|
||||||
"title" : "APP_COMPONENT Const"
|
"title" : "APP_COMPONENT",
|
||||||
},
|
"varType" : "OpaqueToken"
|
||||||
|
|
||||||
"ApplicationRef-class" : {
|
|
||||||
"title" : "ApplicationRef Class"
|
|
||||||
},
|
},
|
||||||
|
|
||||||
"Type-interface" : {
|
"Type-interface" : {
|
||||||
"title" : "Type Interface"
|
"title" : "Type"
|
||||||
|
},
|
||||||
|
|
||||||
|
"ApplicationRef-class" : {
|
||||||
|
"title" : "ApplicationRef"
|
||||||
},
|
},
|
||||||
|
|
||||||
"AppRootUrl-class" : {
|
"AppRootUrl-class" : {
|
||||||
"title" : "AppRootUrl Class"
|
"title" : "AppRootUrl"
|
||||||
},
|
},
|
||||||
|
|
||||||
"UrlResolver-class" : {
|
"UrlResolver-class" : {
|
||||||
"title" : "UrlResolver Class"
|
"title" : "UrlResolver"
|
||||||
},
|
},
|
||||||
|
|
||||||
"ComponentUrlMapper-class" : {
|
"ComponentUrlMapper-class" : {
|
||||||
"title" : "ComponentUrlMapper Class"
|
"title" : "ComponentUrlMapper"
|
||||||
},
|
},
|
||||||
|
|
||||||
"DirectiveResolver-class" : {
|
"DirectiveResolver-class" : {
|
||||||
"title" : "DirectiveResolver Class"
|
"title" : "DirectiveResolver"
|
||||||
},
|
},
|
||||||
|
|
||||||
"Compiler-class" : {
|
"Compiler-class" : {
|
||||||
"title" : "Compiler Class"
|
"title" : "Compiler"
|
||||||
},
|
},
|
||||||
|
|
||||||
"AppViewManager-class" : {
|
"AppViewManager-class" : {
|
||||||
"title" : "AppViewManager Class"
|
"title" : "AppViewManager"
|
||||||
},
|
},
|
||||||
|
|
||||||
"QueryList-class" : {
|
"QueryList-class" : {
|
||||||
"title" : "QueryList Class"
|
"title" : "QueryList"
|
||||||
},
|
},
|
||||||
|
|
||||||
"DynamicComponentLoader-class" : {
|
"DynamicComponentLoader-class" : {
|
||||||
"title" : "DynamicComponentLoader Class"
|
"title" : "DynamicComponentLoader"
|
||||||
},
|
},
|
||||||
|
|
||||||
"LifeCycle-class" : {
|
"LifeCycle-class" : {
|
||||||
"title" : "LifeCycle Class"
|
"title" : "LifeCycle"
|
||||||
},
|
},
|
||||||
|
|
||||||
"ElementRef-class" : {
|
"ElementRef-class" : {
|
||||||
"title" : "ElementRef Class"
|
"title" : "ElementRef"
|
||||||
},
|
},
|
||||||
|
|
||||||
"TemplateRef-class" : {
|
"TemplateRef-class" : {
|
||||||
"title" : "TemplateRef Class"
|
"title" : "TemplateRef"
|
||||||
},
|
},
|
||||||
|
|
||||||
"ViewRef-class" : {
|
"ViewRef-class" : {
|
||||||
"title" : "ViewRef Class"
|
"title" : "ViewRef"
|
||||||
},
|
},
|
||||||
|
|
||||||
"HostViewRef-interface" : {
|
"HostViewRef-interface" : {
|
||||||
"title" : "HostViewRef Interface"
|
"title" : "HostViewRef"
|
||||||
},
|
},
|
||||||
|
|
||||||
"ProtoViewRef-class" : {
|
"ProtoViewRef-class" : {
|
||||||
"title" : "ProtoViewRef Class"
|
"title" : "ProtoViewRef"
|
||||||
},
|
},
|
||||||
|
|
||||||
"ViewContainerRef-class" : {
|
"ViewContainerRef-class" : {
|
||||||
"title" : "ViewContainerRef Class"
|
"title" : "ViewContainerRef"
|
||||||
},
|
},
|
||||||
|
|
||||||
"ComponentRef-class" : {
|
"ComponentRef-class" : {
|
||||||
"title" : "ComponentRef Class"
|
"title" : "ComponentRef"
|
||||||
},
|
},
|
||||||
|
|
||||||
"NgZone-class" : {
|
"NgZone-class" : {
|
||||||
"title" : "NgZone Class"
|
"title" : "NgZone"
|
||||||
},
|
},
|
||||||
|
|
||||||
"Observable-class" : {
|
"Observable-class" : {
|
||||||
"title" : "Observable Class"
|
"title" : "Observable"
|
||||||
},
|
},
|
||||||
|
|
||||||
"EventEmitter-class" : {
|
"EventEmitter-class" : {
|
||||||
"title" : "EventEmitter Class"
|
"title" : "EventEmitter"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/core.ts#L1-L31">angular2/core.ts (line 1)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/core.ts#L1-L31">angular2/core.ts (line 1)</a>
|
||||||
|
|
||||||
ul
|
ul
|
||||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
||||||
|
|
|
@ -1,12 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/exceptions.ts#L27-L58">angular2/src/di/exceptions.ts (line 27)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/exceptions.ts#L27-L58">angular2/src/core/di/exceptions.ts (line 27)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Base class for all errors arising from misconfigured bindings.
|
The `di` module provides dependency injection container services.
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,24 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/binding.ts#L36-L217">angular2/src/di/binding.ts (line 36)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/binding.ts#L36-L217">angular2/src/core/di/binding.ts (line 36)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Describes how_ the <a href='Injector-class.html'><code>Injector</code></a> should instantiate a given token.
|
The `di` module provides dependency injection container services.
|
||||||
|
|
||||||
See <a href='bind-function.html'><code>bind</code></a>.
|
|
||||||
|
|
||||||
## Example
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var injector = Injector.resolveAndCreate([
|
|
||||||
new Binding(String, { toValue: 'Hello' })
|
|
||||||
]);
|
|
||||||
|
|
||||||
expect(injector.get(String)).toEqual('Hello');
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Annotations
|
h2 Annotations
|
||||||
|
@ -38,7 +24,7 @@ p.location-badge.
|
||||||
pre.prettyprint
|
pre.prettyprint
|
||||||
code.
|
code.
|
||||||
constructor(token: any, {toClass, toValue, toAlias, toFactory, deps}:
|
constructor(token: any, {toClass, toValue, toAlias, toFactory, deps}:
|
||||||
{toClass?: Type, toValue?: any, toAlias?: any, toFactory?: Function, deps?: List<any>})
|
{toClass?: Type, toValue?: any, toAlias?: any, toFactory?: Function, deps?: any[]})
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
|
||||||
|
|
|
@ -1,12 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/binding.ts#L258-L371">angular2/src/di/binding.ts (line 258)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/binding.ts#L258-L371">angular2/src/core/di/binding.ts (line 258)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Helper class for the <a href='bind-function.html'><code>bind</code></a> function.
|
The `di` module provides dependency injection container services.
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
@ -160,7 +158,7 @@ p.location-badge.
|
||||||
|
|
||||||
pre.prettyprint
|
pre.prettyprint
|
||||||
code.
|
code.
|
||||||
toFactory(factoryFunction: Function, dependencies?: List<any>)
|
toFactory(factoryFunction: Function, dependencies?: any[])
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Binds a key to a function which computes the value.
|
Binds a key to a function which computes the value.
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/injector.ts#L360-L366">angular2/src/di/injector.ts (line 360)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/injector.ts#L360-L366">angular2/src/core/di/injector.ts (line 360)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
The `di` module provides dependency injection container services.
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,25 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/exceptions.ts#L71-L95">angular2/src/di/exceptions.ts (line 71)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/exceptions.ts#L71-L95">angular2/src/core/di/exceptions.ts (line 71)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Thrown when dependencies form a cycle.
|
The `di` module provides dependency injection container services.
|
||||||
|
|
||||||
## Example:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
class A {
|
|
||||||
constructor(b:B) {}
|
|
||||||
}
|
|
||||||
class B {
|
|
||||||
constructor(a:A) {}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Retrieving `A` or `B` throws a `CyclicDependencyError` as the graph above cannot be constructed.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/binding.ts#L24-L34">angular2/src/di/binding.ts (line 24)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/binding.ts#L24-L34">angular2/src/core/di/binding.ts (line 24)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
The `di` module provides dependency injection container services.
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
@ -13,7 +13,7 @@ p.location-badge.
|
||||||
|
|
||||||
pre.prettyprint
|
pre.prettyprint
|
||||||
code.
|
code.
|
||||||
constructor(key: Key, optional: boolean, lowerBoundVisibility: any, upperBoundVisibility: any, properties: List<any>)
|
constructor(key: Key, optional: boolean, lowerBoundVisibility: any, upperBoundVisibility: any, properties: any[])
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
|
||||||
|
|
|
@ -1,35 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/metadata.ts#L34-L65">angular2/src/di/metadata.ts (line 34)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/metadata.ts#L34-L65">angular2/src/core/di/metadata.ts (line 34)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
`DependencyMetadata is used by the framework to extend DI.
|
The `di` module provides dependency injection container services.
|
||||||
|
|
||||||
Only metadata implementing `DependencyMetadata` are added to the list of dependency
|
|
||||||
properties.
|
|
||||||
|
|
||||||
For example:
|
|
||||||
|
|
||||||
```
|
|
||||||
class Exclude extends DependencyMetadata {}
|
|
||||||
class NotDependencyProperty {}
|
|
||||||
|
|
||||||
class AComponent {
|
|
||||||
constructor(@Exclude @NotDependencyProperty aService:AService) {}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
will create the following dependency:
|
|
||||||
|
|
||||||
```
|
|
||||||
new Dependency(Key.get(AService), [new Exclude()])
|
|
||||||
```
|
|
||||||
|
|
||||||
The framework can use `new Exclude()` to handle the `aService` dependency
|
|
||||||
in a specific way.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Annotations
|
h2 Annotations
|
||||||
|
|
|
@ -1,12 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/injector.ts#L366-L373">angular2/src/di/injector.ts (line 366)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/injector.ts#L366-L373">angular2/src/core/di/injector.ts (line 366)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Used to provide dependencies that cannot be easily expressed as bindings.
|
The `di` module provides dependency injection container services.
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/forward_ref.ts#L1-L3">angular2/src/di/forward_ref.ts (line 1)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/forward_ref.ts#L1-L3">angular2/src/core/di/forward_ref.ts (line 1)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
The `di` module provides dependency injection container services.
|
||||||
|
|
||||||
|
|
|
@ -1,9 +1,8 @@
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Host <span class="type">variable</span>
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/decorators.ts#L82-L82">angular2/src/di/decorators.ts (line 82)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/decorators.ts#L82-L82">angular2/src/core/di/decorators.ts (line 82)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Factory for creating <a href='HostMetadata-class.html'><code>HostMetadata</code></a>.
|
Factory for creating <a href='HostMetadata-class.html'><code>HostMetadata</code></a>.
|
||||||
|
|
|
@ -1,9 +1,7 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/decorators.ts#L41-L49">angular2/src/di/decorators.ts (line 41)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/decorators.ts#L41-L49">angular2/src/core/di/decorators.ts (line 41)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Factory for creating <a href='HostMetadata-class.html'><code>HostMetadata</code></a>.
|
The `di` module provides dependency injection container services.
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,32 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/metadata.ts#L138-L166">angular2/src/di/metadata.ts (line 138)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/metadata.ts#L138-L166">angular2/src/core/di/metadata.ts (line 138)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Specifies that an injector should retrieve a dependency from any injector until reaching the
|
The `di` module provides dependency injection container services.
|
||||||
closest host.
|
|
||||||
|
|
||||||
## Example
|
|
||||||
|
|
||||||
```
|
|
||||||
class Dependency {
|
|
||||||
}
|
|
||||||
|
|
||||||
class NeedsDependency {
|
|
||||||
constructor(public @Host() dependency:Dependency) {}
|
|
||||||
}
|
|
||||||
|
|
||||||
var parent = Injector.resolveAndCreate([
|
|
||||||
bind(Dependency).toClass(HostDependency)
|
|
||||||
]);
|
|
||||||
var child = parent.resolveAndCreateChild([]);
|
|
||||||
var grandChild = child.resolveAndCreateChild([NeedsDependency, Depedency]);
|
|
||||||
var nd = grandChild.get(NeedsDependency);
|
|
||||||
expect(nd.dependency).toBeAnInstanceOf(HostDependency);
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Annotations
|
h2 Annotations
|
||||||
|
|
|
@ -1,9 +1,8 @@
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Inject <span class="type">variable</span>
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/decorators.ts#L62-L62">angular2/src/di/decorators.ts (line 62)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/decorators.ts#L62-L62">angular2/src/core/di/decorators.ts (line 62)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Factory for creating <a href='InjectMetadata-class.html'><code>InjectMetadata</code></a>.
|
Factory for creating <a href='InjectMetadata-class.html'><code>InjectMetadata</code></a>.
|
||||||
|
|
|
@ -1,9 +1,7 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/decorators.ts#L9-L17">angular2/src/di/decorators.ts (line 9)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/decorators.ts#L9-L17">angular2/src/core/di/decorators.ts (line 9)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Factory for creating <a href='InjectMetadata-class.html'><code>InjectMetadata</code></a>.
|
The `di` module provides dependency injection container services.
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,18 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/metadata.ts#L1-L17">angular2/src/di/metadata.ts (line 1)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/metadata.ts#L1-L17">angular2/src/core/di/metadata.ts (line 1)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
A parameter metadata that specifies a dependency.
|
The `di` module provides dependency injection container services.
|
||||||
|
|
||||||
```
|
|
||||||
class AComponent {
|
|
||||||
constructor(@Inject(MyService) aService:MyService) {}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Annotations
|
h2 Annotations
|
||||||
|
|
|
@ -1,9 +1,8 @@
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Injectable <span class="type">variable</span>
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/decorators.ts#L72-L72">angular2/src/di/decorators.ts (line 72)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/decorators.ts#L72-L72">angular2/src/core/di/decorators.ts (line 72)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Factory for creating <a href='InjectableMetadata-class.html'><code>InjectableMetadata</code></a>.
|
Factory for creating <a href='InjectableMetadata-class.html'><code>InjectableMetadata</code></a>.
|
||||||
|
|
|
@ -1,9 +1,7 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/decorators.ts#L25-L33">angular2/src/di/decorators.ts (line 25)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/decorators.ts#L25-L33">angular2/src/core/di/decorators.ts (line 25)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Factory for creating <a href='InjectableMetadata-class.html'><code>InjectableMetadata</code></a>.
|
The `di` module provides dependency injection container services.
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,22 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/metadata.ts#L65-L83">angular2/src/di/metadata.ts (line 65)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/metadata.ts#L65-L83">angular2/src/core/di/metadata.ts (line 65)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
A marker metadata that marks a class as available to `Injector` for creation. Used by tooling
|
The `di` module provides dependency injection container services.
|
||||||
for generating constructor stubs.
|
|
||||||
|
|
||||||
```
|
|
||||||
class NeedsService {
|
|
||||||
constructor(svc:UsefulService) {}
|
|
||||||
}
|
|
||||||
|
|
||||||
@Injectable
|
|
||||||
class UsefulService {}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Annotations
|
h2 Annotations
|
||||||
|
|
|
@ -1,47 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/injector.ts#L373-L799">angular2/src/di/injector.ts (line 373)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/injector.ts#L373-L799">angular2/src/core/di/injector.ts (line 373)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
A dependency injection container used for resolving dependencies.
|
The `di` module provides dependency injection container services.
|
||||||
|
|
||||||
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
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
@ -160,7 +123,7 @@ p.location-badge.
|
||||||
|
|
||||||
pre.prettyprint
|
pre.prettyprint
|
||||||
code.
|
code.
|
||||||
resolveAndCreateChild(bindings: List<Type | Binding | List<any>>, depProvider?: DependencyProvider)
|
resolveAndCreateChild(bindings: Array<Type | Binding | any[]>, depProvider?: DependencyProvider)
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Creates a child injector and loads a new set of bindings into it.
|
Creates a child injector and loads a new set of bindings into it.
|
||||||
|
@ -180,7 +143,7 @@ p.location-badge.
|
||||||
|
|
||||||
pre.prettyprint
|
pre.prettyprint
|
||||||
code.
|
code.
|
||||||
createChildFromResolved(bindings: List<ResolvedBinding>, depProvider?: DependencyProvider)
|
createChildFromResolved(bindings: ResolvedBinding[], depProvider?: DependencyProvider)
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Creates a child injector and loads a new set of <a href='ResolvedBinding-class.html'><code>ResolvedBinding</code></a>s into it.
|
Creates a child injector and loads a new set of <a href='ResolvedBinding-class.html'><code>ResolvedBinding</code></a>s into it.
|
||||||
|
|
|
@ -1,15 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/exceptions.ts#L95-L113">angular2/src/di/exceptions.ts (line 95)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/exceptions.ts#L95-L113">angular2/src/core/di/exceptions.ts (line 95)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Thrown when a constructing type returns with an Error.
|
The `di` module provides dependency injection container services.
|
||||||
|
|
||||||
The `InstantiationError` class contains the original error plus the dependency graph which caused
|
|
||||||
this object to be instantiated.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,13 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/exceptions.ts#L113-L128">angular2/src/di/exceptions.ts (line 113)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/exceptions.ts#L113-L128">angular2/src/core/di/exceptions.ts (line 113)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Thrown when an object other then <a href='Binding-class.html'><code>Binding</code></a> (or `Type`) is passed to <a href='Injector-class.html'><code>Injector</code></a>
|
The `di` module provides dependency injection container services.
|
||||||
creation.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,19 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/key.ts#L6-L39">angular2/src/di/key.ts (line 6)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/key.ts#L6-L36">angular2/src/core/di/key.ts (line 6)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
A unique object used for retrieving items from the <a href='Injector-class.html'><code>Injector</code></a>.
|
The `di` module provides dependency injection container services.
|
||||||
|
|
||||||
Keys have:
|
|
||||||
- a system-wide unique `id`.
|
|
||||||
- a `token`, usually the `Type` of the instance.
|
|
||||||
|
|
||||||
Keys are used internally by the <a href='Injector-class.html'><code>Injector</code></a> because their system-wide unique `id`s allow the
|
|
||||||
injector to index in arrays rather than looking up items in maps.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
@ -26,6 +17,7 @@ p.location-badge.
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/key.ts#L39-L67">angular2/src/di/key.ts (line 39)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/key.ts#L36-L64">angular2/src/core/di/key.ts (line 36)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
The `di` module provides dependency injection container services.
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,15 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/exceptions.ts#L128-L156">angular2/src/di/exceptions.ts (line 128)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/exceptions.ts#L128-L156">angular2/src/core/di/exceptions.ts (line 128)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Thrown when the class has no annotation information.
|
The `di` module provides dependency injection container services.
|
||||||
|
|
||||||
Lack of annotation information prevents the <a href='Injector-class.html'><code>Injector</code></a> from determining which dependencies
|
|
||||||
need to be injected into the constructor.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
@ -18,7 +13,7 @@ p.location-badge.
|
||||||
|
|
||||||
pre.prettyprint
|
pre.prettyprint
|
||||||
code.
|
code.
|
||||||
constructor(typeOrFunc: any, params: List<List<any>>)
|
constructor(typeOrFunc: any, params: any[][])
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
|
||||||
|
|
|
@ -1,13 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/exceptions.ts#L58-L71">angular2/src/di/exceptions.ts (line 58)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/exceptions.ts#L58-L71">angular2/src/core/di/exceptions.ts (line 58)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Thrown when trying to retrieve a dependency by `Key` from <a href='Injector-class.html'><code>Injector</code></a>, but the
|
The `di` module provides dependency injection container services.
|
||||||
<a href='Injector-class.html'><code>Injector</code></a> does not have a <a href='Binding-class.html'><code>Binding</code></a> for <a href='Key-class.html'><code>Key</code></a>.
|
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Members
|
h2 Members
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
|
|
||||||
p.location-badge.
|
p.location-badge.
|
||||||
exported from <a href='../di'>angular2/di</a>
|
exported from <a href='../di'>angular2/di</a>
|
||||||
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/di/opaque_token.ts#L1-L10">angular2/src/di/opaque_token.ts (line 1)</a>
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/di/opaque_token.ts#L1-L10">angular2/src/core/di/opaque_token.ts (line 1)</a>
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
|
The `di` module provides dependency injection container services.
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Annotations
|
h2 Annotations
|
||||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue