docs(api): add api files for alpha-25

This commit is contained in:
Naomi Black 2015-06-01 22:51:00 -07:00
parent 2f62173bbf
commit d62557ada6
202 changed files with 9656 additions and 1062 deletions

View File

@ -0,0 +1,10 @@
.l-main-section
h2 Ancestor <span class="type">variable</span>
p.location-badge.
exported from <a href='../annotations'>angular2/annotations</a>
:markdown

View File

@ -0,0 +1,10 @@
.l-main-section
h2 Attribute <span class="type">variable</span>
p.location-badge.
exported from <a href='../annotations'>angular2/annotations</a>
:markdown

View File

@ -0,0 +1,10 @@
.l-main-section
h2 Component <span class="type">variable</span>
p.location-badge.
exported from <a href='../annotations'>angular2/annotations</a>
:markdown

View File

@ -0,0 +1,257 @@
p.location-badge.
exported from <a href='../annotations'>angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/annotations.ts#L778-L1011">angular2/src/core/annotations_impl/annotations.ts (line 778)</a>
:markdown
Declare reusable UI building blocks for an application.
Each Angular component requires a single `@Component` and at least one `@View` annotation. The
`@Component`
annotation specifies when a component is instantiated, and which properties and hostListeners it
binds to.
When a component is instantiated, Angular
- creates a shadow DOM for the component.
- loads the selected template into the shadow DOM.
- creates a child <a href='../di/Injector-class.html'><code>Injector</code></a> which is configured with the `appInjector` for the
<a href='Component-var.html'><code>Component</code></a>.
All template expressions and statements are then evaluated against the component instance.
For details on the `@View` annotation, see <a href='View-var.html'><code>View</code></a>.
## Example
```
@Component({
selector: 'greet'
})
@View({
template: 'Hello {{name}}!'
})
class Greet {
name: string;
constructor() {
this.name = 'World';
}
}
```
Dynamically loading a component at runtime:
Regular Angular components are statically resolved. Dynamic components allows to resolve a
component at runtime
instead by providing a placeholder into which a regular Angular component can be dynamically
loaded. Once loaded,
the dynamically-loaded component becomes permanent and cannot be changed.
Dynamic components are declared just like components, but without a `@View` annotation.
## Example
Here we have `DynamicComp` which acts as the placeholder for `HelloCmp`. At runtime, the dynamic
component
`DynamicComp` requests loading of the `HelloCmp` component.
There is nothing special about `HelloCmp`, which is a regular Angular component. It can also be
used in other static
locations.
```
@Component({
selector: 'dynamic-comp'
})
class DynamicComp {
helloCmp:HelloCmp;
constructor(loader:DynamicComponentLoader, location:ElementRef) {
loader.load(HelloCmp, location).then((helloCmp) => {
this.helloCmp = helloCmp;
});
}
}
@Component({
selector: 'hello-cmp'
})
@View({
template: "{{greeting}}"
})
class HelloCmp {
greeting:string;
constructor() {
this.greeting = "hello";
}
}
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor({selector, properties, events, hostListeners, hostProperties, hostAttributes,
hostActions, appInjector, lifecycle, hostInjector, viewInjector,
changeDetection = DEFAULT, compileChildren = true}: {
selector?: string,
properties?: List&lt;string&gt;,
events?: List&lt;string&gt;,
hostListeners?: StringMap&lt;string, string&gt;,
hostProperties?: StringMap&lt;string, string&gt;,
hostAttributes?: StringMap&lt;string, string&gt;,
hostActions?: StringMap&lt;string, string&gt;,
appInjector?: List&lt;any&gt;,
lifecycle?: List&lt;LifecycleEvent&gt;,
hostInjector?: List&lt;any&gt;,
viewInjector?: List&lt;any&gt;,
changeDetection?: string,
compileChildren?: boolean
} = {})
:markdown
.l-sub-section
h3 appInjector
:markdown
Defines the set of injectable objects that are visible to a Component and its children.
The `appInjector` defined in the Component annotation allow you to configure a set of bindings
for the component's
injector.
When a component is instantiated, Angular creates a new child Injector, which is configured
with the bindings in
the Component `appInjector` annotation. The injectable objects then become available for
injection to the component
itself and any of the directives in the component's template, i.e. they are not available to
the directives which
are children in the component's light DOM.
The syntax for configuring the `appInjector` injectable is identical to <a href='../di/Injector-class.html'><code>Injector</code></a>
injectable configuration.
See <a href='../di/Injector-class.html'><code>Injector</code></a> for additional detail.
## Simple Example
Here is an example of a class that can be injected:
```
class Greeter {
greet(name:string) {
return 'Hello ' + name + '!';
}
}
@Component({
selector: 'greet',
appInjector: [
Greeter
]
})
@View({
template: `{{greeter.greet('world')}}!`,
directives: [Child]
})
class HelloWorld {
greeter:Greeter;
constructor(greeter:Greeter) {
this.greeter = greeter;
}
}
```
.l-sub-section
h3 changeDetection
:markdown
Defines the used change detection strategy.
When a component is instantiated, Angular creates a change detector, which is responsible for
propagating
the component's bindings.
The `changeDetection` property defines, whether the change detection will be checked every time
or only when the component
tells it to do so.
.l-sub-section
h3 viewInjector
:markdown
Defines the set of injectable objects that are visible to its view 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: 'needs-greeter'
})
class NeedsGreeter {
greeter:Greeter;
constructor(greeter:Greeter) {
this.greeter = greeter;
}
}
@Component({
selector: 'greet',
viewInjector: [
Greeter
]
})
@View({
template: `<needs-greeter></needs-greeter>`,
directives: [NeedsGreeter]
})
class HelloWorld {
}
```

View File

@ -0,0 +1,10 @@
.l-main-section
h2 Directive <span class="type">variable</span>
p.location-badge.
exported from <a href='../annotations'>angular2/annotations</a>
:markdown

View File

@ -0,0 +1,858 @@
p.location-badge.
exported from <a href='../annotations'>angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/annotations.ts#L4-L778">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
- `@Ancestor() directive:DirectiveType`: any directive that matches the type between the current
element and the
Shadow DOM root. Current element is not included in the resolution, therefore even if it could
resolve it, it will
be ignored.
- `@Parent() directive:DirectiveType`: any directive that matches the type on a direct parent
element only.
- `@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 a direct parent element
Directives can inject other directives declared on a direct parent element. By definition, a
directive with a
`@Parent` annotation does not attempt to resolve dependencies for the current element, even if
this would satisfy
the dependency.
```
@Directive({ selector: '[my-directive]' })
class MyDirective {
constructor(@Parent() dependency: Dependency) {
expect(dependency.id).toEqual(2);
}
}
```
This directive would be instantiated with `Dependency` declared at the parent element, in this
case `dependency="2"`.
### Injecting a directive from any ancestor elements
Directives can inject other directives declared on any ancestor element (in the current Shadow
DOM), i.e. on the
parent element and its parents. By definition, a directive with an `@Ancestor` annotation does
not attempt to
resolve dependencies for the current element, even if this would satisfy the dependency.
```
@Directive({ selector: '[my-directive]' })
class MyDirective {
constructor(@Ancestor() dependency: Dependency) {
expect(dependency.id).toEqual(2);
}
}
```
Unlike the `@Parent` which only checks the parent, `@Ancestor` checks the parent, as well as its
parents recursively. If `dependency="2"` didn't exist on the direct parent, this injection would
have returned
`dependency="1"`.
### Injecting a live collection of direct child directives
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 `for`, an `if`, or a `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
Note: This is will be implemented in later release. ()
Similar to `@Query` above, but also includes the children of the child elements.
```
@Directive({ selector: '[my-directive]' })
class MyDirective {
constructor(@QueryDescendents(Dependency) 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;
protoViewRef: ProtoViewRef;
prevCondition: boolean;
constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef) {
this.viewContainer = viewContainer;
this.protoViewRef = protoViewRef;
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.protoViewRef);
}
}
}
```
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 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor({
selector, properties, events, hostListeners, hostProperties, hostAttributes,
hostActions, lifecycle, hostInjector, compileChildren = true,
}: {
selector?: string,
properties?: List&lt;string&gt;,
events?: List&lt;string&gt;,
hostListeners?: StringMap&lt;string, string&gt;,
hostProperties?: StringMap&lt;string, string&gt;,
hostAttributes?: StringMap&lt;string, string&gt;,
hostActions?: StringMap&lt;string, string&gt;,
lifecycle?: List&lt;LifecycleEvent&gt;,
hostInjector?: List&lt;any&gt;,
compileChildren?: boolean
} = {})
:markdown
.l-sub-section
h3 compileChildren
:markdown
If set to true the compiler does not compile the children of this directive.
.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');
}
}
```
.l-sub-section
h3 hostActions
:markdown
Specifies which DOM methods a directive can invoke.
## Syntax
```
@Directive({
selector: 'input',
hostActions: {
'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 DOM
element.
```
.l-sub-section
h3 hostAttributes
:markdown
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]',
hostAttributes: {
'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.
```
.l-sub-section
h3 hostInjector
: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',
hostInjector: [
Greeter
]
})
class HelloWorld {
greeter:Greeter;
constructor(greeter:Greeter) {
this.greeter = greeter;
}
}
```
.l-sub-section
h3 hostListeners
:markdown
Specifies which DOM hostListeners a directive listens to.
The `hostListeners` property defines a set of `event` to `method` key-value pairs:
- `event1`: the DOM event that the directive listens to.
- `statement`: the statement to execute when the event occurs.
If the evalutation of the statement returns `false`, then `preventDefault`is applied on the DOM
event.
To listen to global events, a target must be added to the event name.
The target can be `window`, `document` or `body`.
When writing a directive event binding, you can also refer to the following local variables:
- `$event`: Current event object which triggered the event.
- `$target`: The source of the event. This will be either a DOM element or an Angular
directive.
(will be implemented in later release)
## Syntax
```
@Directive({
hostListeners: {
'event1': 'onMethod1(arguments)',
'target:event2': 'onMethod2(arguments)',
...
}
}
```
## Basic Event Binding:
Suppose you want to write a directive that triggers on `change` events in the DOM and on
`resize` events in window.
You would define the event binding as follows:
```
@Directive({
selector: 'input',
hostListeners: {
'change': 'onChange($event)',
'window:resize': 'onResize($event)'
}
})
class InputDirective {
onChange(event:Event) {
}
onResize(event:Event) {
}
}
```
Here the `onChange` method of `InputDirective` is invoked whenever the DOM element fires the
'change' event.
.l-sub-section
h3 hostProperties
:markdown
Specifies which DOM properties a directives updates.
## Syntax
```
@Directive({
selector: 'input',
hostProperties: {
'value': 'value'
}
})
class InputDirective {
value:string;
}
In this example every time the value property of the decorator changes, Angular will update the
value property of
the host element.
```
.l-sub-section
h3 lifecycle
:markdown
Specifies a set of lifecycle hostListeners in which the directive participates.
See <a href='annotations/onChange'>onChange</a>, <a href='annotations/onDestroy'>onDestroy</a>, <a href='annotations/onAllChangesDone'>onAllChangesDone</a> for details.
.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='../change_detection/Pipe-class.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 also use pipes when writing binding definitions for a directive.
For example, we could write a binding that updates the directive on structural changes, rather
than on reference changes, as normally occurs in change detection.
See <a href='../change_detection/Pipe-class.html'><code>Pipe</code></a> and <a href='pipes/keyValDiff'>keyValDiff</a> documentation for more details.
```
@Directive({
selector: '[class-set]',
properties: [
'classChanges: classSet | keyValDiff'
]
})
class ClassSet {
set classChanges(changes: KeyValueChanges) {
// This will get called every time the `class-set` expressions changes its structure.
}
}
```
The template that this directive is used in may also contain its own pipes. For example:
```html
<div [class-set]="someExpression | somePipe">
```
In this case, the two pipes compose as if they were inlined: `someExpression | somePipe |
keyValDiff`.
.l-sub-section
h3 selector
:markdown
The CSS selector that triggers the instantiation of a directive.
Angular only allows directives to trigger on CSS selectors that do not cross element
boundaries.
`selector` may be declared as one of the following:
- `element-name`: select by element name.
- `.class`: select by class name.
- `[attribute]`: select by attribute name.
- `[attribute=value]`: select by attribute name and value.
- `:not(sub_selector)`: select only if the element does not match the `sub_selector`.
- `selector1, selector2`: select if either `selector1` or `selector2` matches.
Suppose we have a directive with an `input[type=text]` selector.
And the following HTML:
```html
<form>
<input type="text">
<input type="radio">
<form>
```
The directive would only be instantiated on the `<input type="text">` element.

View File

@ -0,0 +1,10 @@
.l-main-section
h2 Parent <span class="type">variable</span>
p.location-badge.
exported from <a href='../annotations'>angular2/annotations</a>
:markdown

View File

@ -0,0 +1,10 @@
.l-main-section
h2 Query <span class="type">variable</span>
p.location-badge.
exported from <a href='../annotations'>angular2/annotations</a>
:markdown

View File

@ -0,0 +1,10 @@
.l-main-section
h2 Self <span class="type">variable</span>
p.location-badge.
exported from <a href='../annotations'>angular2/annotations</a>
:markdown

View File

@ -0,0 +1,10 @@
.l-main-section
h2 Unbounded <span class="type">variable</span>
p.location-badge.
exported from <a href='../annotations'>angular2/annotations</a>
:markdown

View File

@ -0,0 +1,10 @@
.l-main-section
h2 View <span class="type">variable</span>
p.location-badge.
exported from <a href='../annotations'>angular2/annotations</a>
:markdown

View File

@ -1,46 +1,70 @@
{
"index" : {
"title" : "Annotations",
"intro" : "Annotations provide the additional information that Angular requires in order to run your application. This modulecontains <a href='Component-class.html'><code>Component</code></a>, <a href='Directive-class.html'><code>Directive</code></a>, and <a href='View-class.html'><code>View</code></a> annotations, as well as <a href='Parent-class.html'><code>Parent</code></a> and <a href='Ancestor-class.html'><code>Ancestor</code></a> annotations that areused by Angular to resolve dependencies."
"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 as<a href='Parent-var.html'><code>Parent</code></a> and <a href='Ancestor-var.html'><code>Ancestor</code></a> annotations that areused by Angular to resolve dependencies."
},
"Directive-class" : {
"title" : "Directive Class"
"ComponentAnnotation-class" : {
"title" : "ComponentAnnotation Class"
},
"Component-class" : {
"title" : "Component Class"
"DirectiveAnnotation-class" : {
"title" : "DirectiveAnnotation Class"
},
"onDestroy-var" : {
"title" : "onDestroy Var"
"onDestroy-const" : {
"title" : "onDestroy Const"
},
"onChange-var" : {
"title" : "onChange Var"
"onChange-const" : {
"title" : "onChange Const"
},
"onAllChangesDone-var" : {
"title" : "onAllChangesDone Var"
"onCheck-const" : {
"title" : "onCheck Const"
},
"Attribute-class" : {
"title" : "Attribute Class"
"onInit-const" : {
"title" : "onInit Const"
},
"Query-class" : {
"title" : "Query Class"
"onAllChangesDone-const" : {
"title" : "onAllChangesDone Const"
},
"View-class" : {
"title" : "View Class"
"Component-var" : {
"title" : "Component Var"
},
"Parent-class" : {
"title" : "Parent Class"
"Directive-var" : {
"title" : "Directive Var"
},
"Ancestor-class" : {
"title" : "Ancestor Class"
"View-var" : {
"title" : "View Var"
},
"Self-var" : {
"title" : "Self Var"
},
"Parent-var" : {
"title" : "Parent Var"
},
"Ancestor-var" : {
"title" : "Ancestor Var"
},
"Unbounded-var" : {
"title" : "Unbounded Var"
},
"Attribute-var" : {
"title" : "Attribute Var"
},
"Query-var" : {
"title" : "Query Var"
}
}

View File

@ -1,3 +1,6 @@
p.location-badge.
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/annotations.ts#L1-L15">angular2/annotations.ts (line 1)</a>
ul
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
if slug != 'index'

View File

@ -0,0 +1,20 @@
<h1>onAllChangesDone</h1>
<h2>(const)</h2>
<div>
<p>Notify a directive when the bindings of all its children have been changed.</p>
.l-main-section
h2 Example:
pre(class="prettyprint linenums")
code.
@Directive({
selector: '[class-set]',
lifecycle: [onAllChangesDone]
})
class ClassSet {
onAllChangesDone() {
}
}
</div>

View File

@ -0,0 +1,34 @@
<h1>onChange</h1>
<h2>(const)</h2>
<div>
<p>Notify a directive when any of its bindings have changed.</p>
<p>This method is called right after the directive&#39;s bindings have been checked,
and before any of its children&#39;s bindings have been checked.</p>
<p>It is invoked only if at least one of the directive&#39;s bindings has changed.</p>
.l-main-section
h2 Example:
pre(class="prettyprint linenums")
code.
@Directive({
selector: '[class-set]',
properties: [
'propA',
'propB'
],
lifecycle: [onChange]
})
class ClassSet {
propA;
propB;
onChange(changes:{[idx: string, PropertyUpdate]}) {
// This will get called after any of the properties have been updated.
if (changes['propA']) {
// if propA was updated
}
if (changes['propA']) {
// if propB was updated
}
}
}
</div>

View File

@ -0,0 +1,21 @@
<h1>onCheck</h1>
<h2>(const)</h2>
<div>
<p>Notify a directive when it has been checked.</p>
<p>This method is called right after the directive&#39;s bindings have been checked,
and before any of its children&#39;s bindings have been checked.</p>
<p>It is invoked every time even when none of the directive&#39;s bindings has changed.</p>
.l-main-section
h2 Example:
pre(class="prettyprint linenums")
code.
@Directive({
selector: '[class-set]',
lifecycle: [onCheck]
})
class ClassSet {
onCheck() {
}
}
</div>

View File

@ -0,0 +1,19 @@
<h1>onDestroy</h1>
<h2>(const)</h2>
<div>
<p>Notify a directive whenever a <a href='View-var.html'><code>View</code></a> that contains it is destroyed.</p>
.l-main-section
h2 Example
pre(class="prettyprint linenums")
code.
@Directive({
...,
lifecycle: [onDestroy]
})
class ClassSet {
onDestroy() {
// invoked to notify directive of the containing view destruction.
}
}
</div>

View File

@ -0,0 +1,21 @@
<h1>onInit</h1>
<h2>(const)</h2>
<div>
<p>Notify a directive when it has been checked the first itme.</p>
<p>This method is called right after the directive&#39;s bindings have been checked,
and before any of its children&#39;s bindings have been checked.</p>
<p>It is invoked only once.</p>
.l-main-section
h2 Example:
pre(class="prettyprint linenums")
code.
@Directive({
selector: '[class-set]',
lifecycle: [onInit]
})
class ClassSet {
onInit() {
}
}
</div>

View File

@ -0,0 +1,90 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/parser/ast.ts#L2-L14">angular2/src/change_detection/parser/ast.ts (line 2)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 assign
pre.prettyprint
code.
assign(context, locals, value)
:markdown
.l-sub-section
h3 eval
pre.prettyprint
code.
eval(context, locals)
:markdown
.l-sub-section
h3 isAssignable
:markdown
.l-sub-section
h3 toString
pre.prettyprint
code.
toString()
:markdown
.l-sub-section
h3 visit
pre.prettyprint
code.
visit(visitor)
:markdown

View File

@ -0,0 +1,144 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/parser/ast.ts#L296-L310">angular2/src/change_detection/parser/ast.ts (line 296)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(public ast: AST, public source: string, public location: string)
:markdown
.l-sub-section
h3 assign
pre.prettyprint
code.
assign(context, locals, value)
:markdown
.l-sub-section
h3 ast
:markdown
.l-sub-section
h3 eval
pre.prettyprint
code.
eval(context, locals)
:markdown
.l-sub-section
h3 isAssignable
:markdown
.l-sub-section
h3 location
:markdown
.l-sub-section
h3 source
:markdown
.l-sub-section
h3 toString
pre.prettyprint
code.
toString()
:markdown
.l-sub-section
h3 visit
pre.prettyprint
code.
visit(visitor)
:markdown

View File

@ -0,0 +1,140 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/parser/ast.ts#L60-L92">angular2/src/change_detection/parser/ast.ts (line 60)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(public receiver: AST, public name: string, public getter: Function, public setter: Function)
:markdown
.l-sub-section
h3 assign
pre.prettyprint
code.
assign(context, locals, value)
:markdown
.l-sub-section
h3 eval
pre.prettyprint
code.
eval(context, locals)
:markdown
.l-sub-section
h3 getter
:markdown
.l-sub-section
h3 isAssignable
:markdown
.l-sub-section
h3 name
:markdown
.l-sub-section
h3 receiver
:markdown
.l-sub-section
h3 setter
:markdown
.l-sub-section
h3 visit
pre.prettyprint
code.
visit(visitor)
:markdown

View File

@ -0,0 +1,281 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/parser/ast.ts#L335-L396">angular2/src/change_detection/parser/ast.ts (line 335)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 visitAccessMember
pre.prettyprint
code.
visitAccessMember(ast: AccessMember)
:markdown
.l-sub-section
h3 visitAll
pre.prettyprint
code.
visitAll(asts: List&lt;any&gt;)
:markdown
.l-sub-section
h3 visitBinary
pre.prettyprint
code.
visitBinary(ast: Binary)
:markdown
.l-sub-section
h3 visitConditional
pre.prettyprint
code.
visitConditional(ast: Conditional)
:markdown
.l-sub-section
h3 visitFunctionCall
pre.prettyprint
code.
visitFunctionCall(ast: FunctionCall)
:markdown
.l-sub-section
h3 visitImplicitReceiver
pre.prettyprint
code.
visitImplicitReceiver(ast: ImplicitReceiver)
:markdown
.l-sub-section
h3 visitInterpolation
pre.prettyprint
code.
visitInterpolation(ast: Interpolation)
:markdown
.l-sub-section
h3 visitKeyedAccess
pre.prettyprint
code.
visitKeyedAccess(ast: KeyedAccess)
:markdown
.l-sub-section
h3 visitLiteralArray
pre.prettyprint
code.
visitLiteralArray(ast: LiteralArray)
:markdown
.l-sub-section
h3 visitLiteralMap
pre.prettyprint
code.
visitLiteralMap(ast: LiteralMap)
:markdown
.l-sub-section
h3 visitLiteralPrimitive
pre.prettyprint
code.
visitLiteralPrimitive(ast: LiteralPrimitive)
:markdown
.l-sub-section
h3 visitMethodCall
pre.prettyprint
code.
visitMethodCall(ast: MethodCall)
:markdown
.l-sub-section
h3 visitPipe
pre.prettyprint
code.
visitPipe(ast: Pipe)
:markdown
.l-sub-section
h3 visitPrefixNot
pre.prettyprint
code.
visitPrefixNot(ast: PrefixNot)
:markdown
.l-sub-section
h3 visitSafeAccessMember
pre.prettyprint
code.
visitSafeAccessMember(ast: SafeAccessMember)
:markdown
.l-sub-section
h3 visitSafeMethodCall
pre.prettyprint
code.
visitSafeMethodCall(ast: SafeMethodCall)
:markdown

View File

@ -0,0 +1,230 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/binding_record.ts#L9-L62">angular2/src/change_detection/binding_record.ts (line 9)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(public mode: string, public implicitReceiver: any, public ast: AST, public elementIndex: number, public propertyName: string, public setter: SetterFn, public lifecycleEvent: string, public directiveRecord: DirectiveRecord)
:markdown
.l-sub-section
h3 ast
:markdown
.l-sub-section
h3 callOnChange
pre.prettyprint
code.
callOnChange()
:markdown
.l-sub-section
h3 directiveRecord
:markdown
.l-sub-section
h3 elementIndex
:markdown
.l-sub-section
h3 implicitReceiver
:markdown
.l-sub-section
h3 isDirective
pre.prettyprint
code.
isDirective()
:markdown
.l-sub-section
h3 isDirectiveLifecycle
pre.prettyprint
code.
isDirectiveLifecycle()
:markdown
.l-sub-section
h3 isElement
pre.prettyprint
code.
isElement()
:markdown
.l-sub-section
h3 isOnPushChangeDetection
pre.prettyprint
code.
isOnPushChangeDetection()
:markdown
.l-sub-section
h3 isTextNode
pre.prettyprint
code.
isTextNode()
:markdown
.l-sub-section
h3 lifecycleEvent
:markdown
.l-sub-section
h3 mode
:markdown
.l-sub-section
h3 propertyName
:markdown
.l-sub-section
h3 setter
:markdown

View File

@ -0,0 +1,8 @@
<h1>CHECKED</h1>
<h2>(const)</h2>
<div>
<p>CHECKED means that the change detector should be skipped until its mode changes to
CHECK_ONCE or CHECK_ALWAYS.</p>
</div>

View File

@ -0,0 +1,8 @@
<h1>CHECK_ALWAYS</h1>
<h2>(const)</h2>
<div>
<p>CHECK_ALWAYS means that after calling detectChanges the mode of the change detector
will remain CHECK_ALWAYS.</p>
</div>

View File

@ -0,0 +1,8 @@
<h1>CHECK_ONCE</h1>
<h2>(const)</h2>
<div>
<p>CHECK_ONCE means that after calling detectChanges the mode of the change detector
will become CHECKED.</p>
</div>

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/change_detection.html">angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/interfaces.js#L34">angular2/src/change_detection/interfaces.js (line 34)</a>
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/interfaces.ts#L8-L39">angular2/src/change_detection/interfaces.ts (line 8)</a>
:markdown
Interface used by Angular to control the change detection strategy for an application.
@ -11,10 +11,12 @@ p.location-badge.
- <a href='DynamicChangeDetection-class.html'><code>DynamicChangeDetection</code></a>: slower, but does not require `eval()`.
- <a href='JitChangeDetection-class.html'><code>JitChangeDetection</code></a>: faster, but requires `eval()`.
In JavaScript, you should always use `JitChangeDetection`, unless you are in an environment that has
In JavaScript, you should always use `JitChangeDetection`, unless you are in an environment that
has
[CSP](https://developer.mozilla.org/en-US/docs/Web/Security/CSP), such as a Chrome Extension.
In Dart, use `DynamicChangeDetection` during development. The Angular transformer generates an analog to the
In Dart, use `DynamicChangeDetection` during development. The Angular transformer generates an
analog to the
`JitChangeDetection` strategy at compile time.
@ -32,11 +34,12 @@ p.location-badge.
pre.prettyprint
code.
createProtoChangeDetector(name:string, bindingRecords:List, variableBindings:List, directiveRecords:List, changeControlStrategy:string=DEFAULT)
createProtoChangeDetector(definition: ChangeDetectorDefinition)
:markdown

View File

@ -0,0 +1,80 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/exceptions.ts#L15-L30">angular2/src/change_detection/exceptions.ts (line 15)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(proto: ProtoRecord, originalException: any)
:markdown
.l-sub-section
h3 location
:markdown
.l-sub-section
h3 message
:markdown
.l-sub-section
h3 originalException
:markdown
.l-sub-section
h3 toString
pre.prettyprint
code.
toString()
:markdown

View File

@ -0,0 +1,205 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/interfaces.ts#L43-L60">angular2/src/change_detection/interfaces.ts (line 43)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 addChild
pre.prettyprint
code.
addChild(cd: ChangeDetector)
:markdown
.l-sub-section
h3 addShadowDomChild
pre.prettyprint
code.
addShadowDomChild(cd: ChangeDetector)
:markdown
.l-sub-section
h3 checkNoChanges
pre.prettyprint
code.
checkNoChanges()
:markdown
.l-sub-section
h3 dehydrate
pre.prettyprint
code.
dehydrate()
:markdown
.l-sub-section
h3 detectChanges
pre.prettyprint
code.
detectChanges()
:markdown
.l-sub-section
h3 hydrate
pre.prettyprint
code.
hydrate(context: any, locals: Locals, directives: any)
:markdown
.l-sub-section
h3 markPathToRootAsCheckOnce
pre.prettyprint
code.
markPathToRootAsCheckOnce()
:markdown
.l-sub-section
h3 mode
:markdown
.l-sub-section
h3 parent
:markdown
.l-sub-section
h3 remove
pre.prettyprint
code.
remove()
:markdown
.l-sub-section
h3 removeChild
pre.prettyprint
code.
removeChild(cd: ChangeDetector)
:markdown
.l-sub-section
h3 removeShadowDomChild
pre.prettyprint
code.
removeShadowDomChild(cd: ChangeDetector)
:markdown

View File

@ -0,0 +1,89 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/interfaces.ts#L60-L66">angular2/src/change_detection/interfaces.ts (line 60)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(public id: string, public strategy: string, public variableNames: List&lt;string&gt;, public bindingRecords: List&lt;BindingRecord&gt;, public directiveRecords: List&lt;DirectiveRecord&gt;)
:markdown
.l-sub-section
h3 bindingRecords
:markdown
.l-sub-section
h3 directiveRecords
:markdown
.l-sub-section
h3 id
:markdown
.l-sub-section
h3 strategy
:markdown
.l-sub-section
h3 variableNames
:markdown

View File

@ -1,12 +1,13 @@
p.location-badge.
exported from <a href="/angular2/change_detection.html">angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detector_ref.js#L11">angular2/src/change_detection/change_detector_ref.js (line 11)</a>
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detector_ref.ts#L2-L39">angular2/src/change_detection/change_detector_ref.ts (line 2)</a>
:markdown
Controls change detection.
<a href='ChangeDetectorRef-class.html'><code>ChangeDetectorRef</code></a> allows requesting checks for detectors that rely on observables. It also allows detaching and
<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
@ -17,10 +18,11 @@ p.location-badge.
pre.prettyprint
code.
constructor(cd:ChangeDetector)
constructor(private _cd: ChangeDetector)
:markdown
@ -38,6 +40,8 @@ p.location-badge.
Detaches the change detector from the change detector tree.
The detached change detector will not be checked until it is reattached.
@ -55,8 +59,11 @@ p.location-badge.
Reattach the change detector to the change detector tree.
This also requests a check of this change detector. This reattached change detector will be checked during the
This also requests a check of this change detector. This reattached change detector will be
checked during the
next change detection run.
@ -73,6 +80,8 @@ p.location-badge.
:markdown
Request to check all ON_PUSH ancestors.

View File

@ -0,0 +1,26 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/interfaces.ts#L39-L43">angular2/src/change_detection/interfaces.ts (line 39)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 notifyOnBinding
pre.prettyprint
code.
notifyOnBinding(bindingRecord: BindingRecord, value: any)
:markdown

View File

@ -0,0 +1,7 @@
<h1>DEFAULT</h1>
<h2>(const)</h2>
<div>
<p>DEFAULT means that the change detector&#39;s mode will be set to CHECK_ALWAYS during hydration.</p>
</div>

View File

@ -0,0 +1,8 @@
<h1>DETACHED</h1>
<h2>(const)</h2>
<div>
<p>DETACHED means that the change detector sub tree is not a part of the main tree and
should be skipped.</p>
</div>

View File

@ -0,0 +1,63 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/directive_record.ts#L2-L8">angular2/src/change_detection/directive_record.ts (line 2)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(public elementIndex: number, public directiveIndex: number)
:markdown
.l-sub-section
h3 directiveIndex
:markdown
.l-sub-section
h3 elementIndex
:markdown
.l-sub-section
h3 name
:markdown

View File

@ -0,0 +1,127 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/directive_record.ts#L8-L36">angular2/src/change_detection/directive_record.ts (line 8)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor({directiveIndex, callOnAllChangesDone, callOnChange, callOnCheck, callOnInit,
changeDetection}: {
directiveIndex?: DirectiveIndex,
callOnAllChangesDone?: boolean,
callOnChange?: boolean,
callOnCheck?: boolean,
callOnInit?: boolean,
changeDetection?: string
} = {})
:markdown
.l-sub-section
h3 callOnAllChangesDone
:markdown
.l-sub-section
h3 callOnChange
:markdown
.l-sub-section
h3 callOnCheck
:markdown
.l-sub-section
h3 callOnInit
:markdown
.l-sub-section
h3 changeDetection
:markdown
.l-sub-section
h3 directiveIndex
:markdown
.l-sub-section
h3 isOnPushChangeDetection
pre.prettyprint
code.
isOnPushChangeDetection()
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/change_detection.html">angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detection.js#L59">angular2/src/change_detection/change_detection.js (line 59)</a>
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detection.ts#L95-L112">angular2/src/change_detection/change_detection.ts (line 95)</a>
:markdown
Implements change detection that does not require `eval()`.
@ -16,10 +16,11 @@ p.location-badge.
pre.prettyprint
code.
constructor(registry:PipeRegistry)
constructor(private registry: PipeRegistry)
:markdown
@ -30,11 +31,12 @@ p.location-badge.
pre.prettyprint
code.
createProtoChangeDetector(name:string, bindingRecords:List&lt;BindingRecord&gt;, variableBindings:List&lt;string&gt;, directiveRecords:List&lt;DirectiveRecord&gt;, changeControlStrategy:string = DEFAULT)
createProtoChangeDetector(definition: ChangeDetectorDefinition)
:markdown
@ -47,6 +49,7 @@ p.location-badge.
:markdown

View File

@ -0,0 +1,265 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/dynamic_change_detector.ts#L27-L334">angular2/src/change_detection/dynamic_change_detector.ts (line 27)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(private changeControlStrategy: string, private dispatcher: any, private pipeRegistry: PipeRegistry, private protos: List&lt;ProtoRecord&gt;, private directiveRecords: List&lt;any&gt;)
:markdown
.l-sub-section
h3 alreadyChecked
:markdown
.l-sub-section
h3 callOnAllChangesDone
pre.prettyprint
code.
callOnAllChangesDone()
:markdown
.l-sub-section
h3 changeControlStrategy
:markdown
.l-sub-section
h3 changes
:markdown
.l-sub-section
h3 dehydrate
pre.prettyprint
code.
dehydrate()
:markdown
.l-sub-section
h3 detectChangesInRecords
pre.prettyprint
code.
detectChangesInRecords(throwOnChange: boolean)
:markdown
.l-sub-section
h3 directiveRecords
:markdown
.l-sub-section
h3 directives
:markdown
.l-sub-section
h3 dispatcher
:markdown
.l-sub-section
h3 hydrate
pre.prettyprint
code.
hydrate(context: any, locals: any, directives: any)
:markdown
.l-sub-section
h3 hydrated
pre.prettyprint
code.
hydrated()
:markdown
.l-sub-section
h3 locals
:markdown
.l-sub-section
h3 pipeRegistry
:markdown
.l-sub-section
h3 pipes
:markdown
.l-sub-section
h3 prevContexts
:markdown
.l-sub-section
h3 protos
:markdown
.l-sub-section
h3 values
:markdown

View File

@ -0,0 +1,54 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/proto_change_detector.ts#L58-L79">angular2/src/change_detection/proto_change_detector.ts (line 58)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(private _pipeRegistry: PipeRegistry, private definition: ChangeDetectorDefinition)
:markdown
.l-sub-section
h3 definition
:markdown
.l-sub-section
h3 instantiate
pre.prettyprint
code.
instantiate(dispatcher: any)
:markdown

View File

@ -0,0 +1,54 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/exceptions.ts#L2-L15">angular2/src/change_detection/exceptions.ts (line 2)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(proto: ProtoRecord, change: any)
:markdown
.l-sub-section
h3 message
:markdown
.l-sub-section
h3 toString
pre.prettyprint
code.
toString()
:markdown

View File

@ -0,0 +1,43 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/parser/ast.ts#L22-L28">angular2/src/change_detection/parser/ast.ts (line 22)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 eval
pre.prettyprint
code.
eval(context, locals)
:markdown
.l-sub-section
h3 visit
pre.prettyprint
code.
visit(visitor)
:markdown

View File

@ -1,12 +1,13 @@
p.location-badge.
exported from <a href="/angular2/change_detection.html">angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detection.js#L81">angular2/src/change_detection/change_detection.js (line 81)</a>
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detection.ts#L112-L129">angular2/src/change_detection/change_detection.ts (line 112)</a>
:markdown
Implements faster change detection, by generating source code.
This requires `eval()`. For change detection that does not require `eval()`, see <a href='DynamicChangeDetection-class.html'><code>DynamicChangeDetection</code></a>.
This requires `eval()`. For change detection that does not require `eval()`, see
<a href='DynamicChangeDetection-class.html'><code>DynamicChangeDetection</code></a>.
.l-main-section
h2 Members
@ -16,10 +17,11 @@ p.location-badge.
pre.prettyprint
code.
constructor(registry:PipeRegistry)
constructor(public registry: PipeRegistry)
:markdown
@ -30,11 +32,12 @@ p.location-badge.
pre.prettyprint
code.
createProtoChangeDetector(name:string, bindingRecords:List&lt;BindingRecord&gt;, variableBindings:List&lt;string&gt;, directiveRecords:List&lt;DirectiveRecord&gt;, changeControlStrategy:string = DEFAULT)
createProtoChangeDetector(definition: ChangeDetectorDefinition)
:markdown
@ -47,6 +50,7 @@ p.location-badge.
:markdown

View File

@ -0,0 +1,54 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/proto_change_detector.ts#L81-L103">angular2/src/change_detection/proto_change_detector.ts (line 81)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(private _pipeRegistry, private definition: ChangeDetectorDefinition)
:markdown
.l-sub-section
h3 definition
:markdown
.l-sub-section
h3 instantiate
pre.prettyprint
code.
instantiate(dispatcher: any)
:markdown

View File

@ -0,0 +1,26 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/parser/lexer.ts#L10-L24">angular2/src/change_detection/parser/lexer.ts (line 10)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 tokenize
pre.prettyprint
code.
tokenize(text: string)
:markdown

View File

@ -0,0 +1,71 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/parser/ast.ts#L144-L154">angular2/src/change_detection/parser/ast.ts (line 144)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(public expressions: List&lt;any&gt;)
:markdown
.l-sub-section
h3 eval
pre.prettyprint
code.
eval(context, locals)
:markdown
.l-sub-section
h3 expressions
:markdown
.l-sub-section
h3 visit
pre.prettyprint
code.
visit(visitor)
:markdown

View File

@ -0,0 +1,118 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/parser/locals.ts#L2-L43">angular2/src/change_detection/parser/locals.ts (line 2)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(public parent: Locals, public current: Map&lt;any, any&gt;)
:markdown
.l-sub-section
h3 clearValues
pre.prettyprint
code.
clearValues()
:markdown
.l-sub-section
h3 contains
pre.prettyprint
code.
contains(name: string)
:markdown
.l-sub-section
h3 current
:markdown
.l-sub-section
h3 get
pre.prettyprint
code.
get(name: string)
:markdown
.l-sub-section
h3 parent
:markdown
.l-sub-section
h3 set
pre.prettyprint
code.
set(name: string, value)
:markdown

View File

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

View File

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

View File

@ -0,0 +1,7 @@
<h1>ON_PUSH</h1>
<h2>(const)</h2>
<div>
<p>ON_PUSH means that the change detector&#39;s mode will be set to CHECK_ONCE during hydration.</p>
</div>

View File

@ -0,0 +1,126 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/parser/parser.ts#L53-L115">angular2/src/change_detection/parser/parser.ts (line 53)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(lexer: Lexer, providedReflector: Reflector = null)
:markdown
.l-sub-section
h3 addPipes
pre.prettyprint
code.
addPipes(bindingAst: ASTWithSource, pipes: List&lt;string&gt;)
:markdown
.l-sub-section
h3 parseAction
pre.prettyprint
code.
parseAction(input: string, location: any)
:markdown
.l-sub-section
h3 parseBinding
pre.prettyprint
code.
parseBinding(input: string, location: any)
:markdown
.l-sub-section
h3 parseInterpolation
pre.prettyprint
code.
parseInterpolation(input: string, location: any)
:markdown
.l-sub-section
h3 parseTemplateBindings
pre.prettyprint
code.
parseTemplateBindings(input: string, location: any)
:markdown
.l-sub-section
h3 wrapLiteralPrimitive
pre.prettyprint
code.
wrapLiteralPrimitive(input: string, location: any)
:markdown

View File

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

View File

@ -0,0 +1,43 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/pipe.ts#L56-L70">angular2/src/change_detection/pipes/pipe.ts (line 56)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 create
pre.prettyprint
code.
create(cdRef)
:markdown
.l-sub-section
h3 supports
pre.prettyprint
code.
supports(obs)
:markdown

View File

@ -0,0 +1,54 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/pipe_registry.ts#L5-L25">angular2/src/change_detection/pipes/pipe_registry.ts (line 5)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(public config)
:markdown
.l-sub-section
h3 config
:markdown
.l-sub-section
h3 get
pre.prettyprint
code.
get(type: string, obj, cdRef: ChangeDetectorRef)
:markdown

View File

@ -0,0 +1,54 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detection.ts#L69-L95">angular2/src/change_detection/change_detection.ts (line 69)</a>
:markdown
Implements change detection using a map of pregenerated proto detectors.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(private registry: PipeRegistry, protoChangeDetectors?)
:markdown
.l-sub-section
h3 createProtoChangeDetector
pre.prettyprint
code.
createProtoChangeDetector(definition: ChangeDetectorDefinition)
:markdown
.l-sub-section
h3 registry
:markdown

View File

@ -0,0 +1,26 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/interfaces.ts#L4-L8">angular2/src/change_detection/interfaces.ts (line 4)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 instantiate
pre.prettyprint
code.
instantiate(dispatcher: any)
:markdown

View File

@ -0,0 +1,40 @@
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/pipe.ts#L1-L19">angular2/src/change_detection/pipes/pipe.ts (line 1)</a>
:markdown
Indicates that the result of a <a href='Pipe-class.html'><code>Pipe</code></a> transformation has changed even though the reference
has not changed.
The wrapped value will be unwrapped by change detection, and the unwrapped value will be stored.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(public wrapped: any)
:markdown
.l-sub-section
h3 wrapped
:markdown

View File

@ -4,6 +4,154 @@
"intro" : "Change detection enables data binding in Angular."
},
"ASTWithSource-class" : {
"title" : "ASTWithSource Class"
},
"AST-class" : {
"title" : "AST Class"
},
"AstTransformer-class" : {
"title" : "AstTransformer Class"
},
"AccessMember-class" : {
"title" : "AccessMember Class"
},
"LiteralArray-class" : {
"title" : "LiteralArray Class"
},
"ImplicitReceiver-class" : {
"title" : "ImplicitReceiver Class"
},
"Lexer-class" : {
"title" : "Lexer Class"
},
"Parser-class" : {
"title" : "Parser Class"
},
"Locals-class" : {
"title" : "Locals Class"
},
"ExpressionChangedAfterItHasBeenChecked-class" : {
"title" : "ExpressionChangedAfterItHasBeenChecked Class"
},
"ChangeDetectionError-class" : {
"title" : "ChangeDetectionError Class"
},
"ProtoChangeDetector-class" : {
"title" : "ProtoChangeDetector Class"
},
"ChangeDispatcher-class" : {
"title" : "ChangeDispatcher Class"
},
"ChangeDetector-class" : {
"title" : "ChangeDetector Class"
},
"ChangeDetection-class" : {
"title" : "ChangeDetection Class"
},
"ChangeDetectorDefinition-class" : {
"title" : "ChangeDetectorDefinition Class"
},
"CHECK_ONCE-const" : {
"title" : "CHECK_ONCE Const"
},
"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"
},
"DynamicProtoChangeDetector-class" : {
"title" : "DynamicProtoChangeDetector Class"
},
"JitProtoChangeDetector-class" : {
"title" : "JitProtoChangeDetector Class"
},
"BindingRecord-class" : {
"title" : "BindingRecord Class"
},
"DirectiveIndex-class" : {
"title" : "DirectiveIndex Class"
},
"DirectiveRecord-class" : {
"title" : "DirectiveRecord Class"
},
"DynamicChangeDetector-class" : {
"title" : "DynamicChangeDetector Class"
},
"ChangeDetectorRef-class" : {
"title" : "ChangeDetectorRef Class"
},
"PipeRegistry-class" : {
"title" : "PipeRegistry Class"
},
"uninitialized-var" : {
"title" : "uninitialized Var"
},
"WrappedValue-class" : {
"title" : "WrappedValue Class"
},
"Pipe-class" : {
"title" : "Pipe Class"
},
"PipeFactory-class" : {
"title" : "PipeFactory Class"
},
"NullPipe-class" : {
"title" : "NullPipe Class"
},
"NullPipeFactory-class" : {
"title" : "NullPipeFactory Class"
},
"defaultPipes-var" : {
"title" : "defaultPipes Var"
},
"DynamicChangeDetection-class" : {
"title" : "DynamicChangeDetection Class"
},
@ -12,15 +160,15 @@
"title" : "JitChangeDetection Class"
},
"ChangeDetectorRef-class" : {
"title" : "ChangeDetectorRef Class"
"PreGeneratedChangeDetection-class" : {
"title" : "PreGeneratedChangeDetection Class"
},
"ChangeDetection-class" : {
"title" : "ChangeDetection Class"
"preGeneratedProtoDetectors-var" : {
"title" : "preGeneratedProtoDetectors Var"
},
"LifeCycle-class" : {
"title" : "LifeCycle Class"
"defaultPipeRegistry-var" : {
"title" : "defaultPipeRegistry Var"
}
}

View File

@ -0,0 +1,10 @@
.l-main-section
h2 defaultPipeRegistry <span class="type">variable</span>
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
:markdown

View File

@ -0,0 +1,10 @@
.l-main-section
h2 defaultPipes <span class="type">variable</span>
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
:markdown

View File

@ -1,3 +1,6 @@
p.location-badge.
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/change_detection.ts#L1-L60">angular2/change_detection.ts (line 1)</a>
ul
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
if slug != 'index'

View File

@ -0,0 +1,10 @@
.l-main-section
h2 preGeneratedProtoDetectors <span class="type">variable</span>
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
:markdown

View File

@ -0,0 +1,10 @@
.l-main-section
h2 uninitialized <span class="type">variable</span>
p.location-badge.
exported from <a href='../change_detection'>angular2/change_detection</a>
:markdown

View File

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

View File

@ -0,0 +1,80 @@
p.location-badge.
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/application.ts#L311-L333">angular2/src/core/application.ts (line 311)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(hostComponent: ComponentRef, hostComponentType: Type, injector: Injector)
:markdown
.l-sub-section
h3 dispose
pre.prettyprint
code.
dispose()
:markdown
.l-sub-section
h3 hostComponent
:markdown
.l-sub-section
h3 hostComponentType
:markdown
.l-sub-section
h3 injector
:markdown

View File

@ -0,0 +1,73 @@
p.location-badge.
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/di.ts#L2-L44">angular2/src/core/annotations_impl/di.ts (line 2)</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 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(public attributeName: string)
:markdown
.l-sub-section
h3 attributeName
:markdown
.l-sub-section
h3 token
:markdown

View File

@ -0,0 +1,57 @@
p.location-badge.
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/compiler.ts#L46-L257">angular2/src/core/compiler/compiler.ts (line 46)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(reader: DirectiveResolver, cache: CompilerCache, templateResolver: TemplateResolver, componentUrlMapper: ComponentUrlMapper, urlResolver: UrlResolver, render: renderApi.RenderCompiler, protoViewFactory: ProtoViewFactory)
:markdown
.l-sub-section
h3 compile
pre.prettyprint
code.
compile(component: Type)
:markdown
.l-sub-section
h3 compileInHost
pre.prettyprint
code.
compileInHost(componentTypeOrBinding: Type | Binding)
:markdown

View File

@ -0,0 +1,77 @@
p.location-badge.
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/compiler.ts#L25-L46">angular2/src/core/compiler/compiler.ts (line 25)</a>
:markdown
Cache that stores the AppProtoView of the template of a component.
Used to prevent duplicate work and resolve cyclic dependencies.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor()
:markdown
.l-sub-section
h3 clear
pre.prettyprint
code.
clear()
:markdown
.l-sub-section
h3 get
pre.prettyprint
code.
get(component: Type)
:markdown
.l-sub-section
h3 set
pre.prettyprint
code.
set(component: Type, protoView: AppProtoView)
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/dynamic_component_loader.js#L11">angular2/src/core/compiler/dynamic_component_loader.js (line 11)</a>
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/dynamic_component_loader.ts#L7-L16">angular2/src/core/compiler/dynamic_component_loader.ts (line 7)</a>
:markdown
@ -13,10 +13,11 @@ p.location-badge.
pre.prettyprint
code.
constructor(location:ElementRef, instance:any, dispose:Function)
constructor(public location: ElementRef, public instance: any, public dispose: Function)
:markdown
@ -25,13 +26,10 @@ p.location-badge.
h3 dispose
pre.prettyprint
code.
dispose()
:markdown
@ -44,6 +42,7 @@ p.location-badge.
:markdown
@ -56,6 +55,7 @@ p.location-badge.
:markdown
@ -68,6 +68,7 @@ p.location-badge.
:markdown

View File

@ -0,0 +1,26 @@
p.location-badge.
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/directive_resolver.ts#L4-L20">angular2/src/core/compiler/directive_resolver.ts (line 4)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 resolve
pre.prettyprint
code.
resolve(type: Type)
:markdown

View File

@ -0,0 +1,103 @@
p.location-badge.
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/dynamic_component_loader.ts#L16-L122">angular2/src/core/compiler/dynamic_component_loader.ts (line 16)</a>
:markdown
Service for dynamically loading a Component into an arbitrary position in the internal Angular
application tree.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(compiler: Compiler, viewManager: AppViewManager)
:markdown
.l-sub-section
h3 loadAsRoot
pre.prettyprint
code.
loadAsRoot(typeOrBinding, overrideSelector = null, injector: Injector = null)
:markdown
Loads a root component that is placed at the first element that matches the
component's selector.
The loaded component receives injection normally as a hosted view.
.l-sub-section
h3 loadIntoExistingLocation
pre.prettyprint
code.
loadIntoExistingLocation(typeOrBinding, location: ElementRef, injector: Injector = null)
:markdown
Loads a component into the location given by the provided ElementRef. The loaded component
receives injection as if it in the place of the provided ElementRef.
.l-sub-section
h3 loadIntoNewLocation
pre.prettyprint
code.
loadIntoNewLocation(typeOrBinding, parentComponentLocation: ElementRef, injector: Injector = null)
:markdown
Loads a component into a free host view that is not yet attached to
a parent on the render side, although it is attached to a parent in the injector hierarchy.
The loaded component receives injection normally as a hosted view.
.l-sub-section
h3 loadNextToExistingLocation
pre.prettyprint
code.
loadNextToExistingLocation(typeOrBinding, location: ElementRef, injector: Injector = null)
:markdown
Loads a component next to the provided ElementRef. The loaded component receives
injection normally as a hosted view.

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/element_ref.js#L8">angular2/src/core/compiler/element_ref.js (line 8)</a>
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/element_ref.ts#L4-L39">angular2/src/core/compiler/element_ref.ts (line 4)</a>
:markdown
@ -13,10 +13,11 @@ p.location-badge.
pre.prettyprint
code.
constructor(parentView:ViewRef, boundElementIndex:number)
constructor(parentView: ViewRef, boundElementIndex: number)
:markdown
@ -28,6 +29,7 @@ p.location-badge.
:markdown
@ -41,6 +43,8 @@ p.location-badge.
Exposes the underlying DOM element.
(DEPRECATED way of accessing the DOM, replacement coming)
@ -52,12 +56,14 @@ p.location-badge.
pre.prettyprint
code.
getAttribute(name:string)
getAttribute(name: string)
:markdown
Gets an attribute from the underlying DOM element.
(DEPRECATED way of accessing the DOM, replacement coming)
@ -70,6 +76,7 @@ p.location-badge.
:markdown

View File

@ -0,0 +1,126 @@
p.location-badge.
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/zone/ng_zone.ts#L4-L213">angular2/src/core/zone/ng_zone.ts (line 4)</a>
:markdown
A wrapper around zones that lets you schedule tasks after it has executed a task.
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
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor({enableLongStackTrace})
:markdown
Associates with this
- a "root" zone, which the one that instantiated this.
- an "inner" zone, which is a child of the root zone.
@param {bool} enableLongStackTrace whether to enable long stack trace. They should only be
enabled in development mode as they significantly impact perf.
.l-sub-section
h3 initCallbacks
pre.prettyprint
code.
initCallbacks({onTurnStart, onTurnDone, onErrorHandler}: {
onTurnStart?: /*() =&gt; void*/ Function,
onTurnDone?: /*() =&gt; void*/ Function,
onErrorHandler?: /*(error, stack) =&gt; void*/ Function
} = {})
:markdown
Initializes the zone hooks.
@param {() => void} onTurnStart called before code executes in the inner zone for each VM turn
@param {() => void} onTurnDone called at the end of a VM turn if code has executed in the inner
zone
@param {(error, stack) => void} onErrorHandler called when an exception is thrown by a macro or
micro task
.l-sub-section
h3 run
pre.prettyprint
code.
run(fn)
:markdown
Runs `fn` in the inner zone and returns whatever it returns.
In a typical app where the inner zone is the Angular zone, this allows one to make use of the
Angular's auto digest mechanism.
```
var zone: NgZone = [ref to the application zone];
zone.run(() => {
// the change detection will run after this function and the microtasks it enqueues have
executed.
});
```
.l-sub-section
h3 runOutsideAngular
pre.prettyprint
code.
runOutsideAngular(fn)
:markdown
Runs `fn` in the outer zone and returns whatever it returns.
In a typical app where the inner zone is the Angular zone, this allows one to escape Angular's
auto-digest mechanism.
```
var zone: NgZone = [ref to the application zone];
zone.runOusideAngular(() => {
element.onClick(() => {
// Clicking on the element would not trigger the change detection
});
});
```

View File

@ -0,0 +1,28 @@
p.location-badge.
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/interfaces.ts#L22-L28">angular2/src/core/compiler/interfaces.ts (line 22)</a>
:markdown
Defines lifecycle method [onAllChangesDone ] 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

View File

@ -0,0 +1,28 @@
p.location-badge.
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/interfaces.ts#L1-L7">angular2/src/core/compiler/interfaces.ts (line 1)</a>
:markdown
Defines lifecycle method [onChange] 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&lt;string, any&gt;)
:markdown

View File

@ -0,0 +1,27 @@
p.location-badge.
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/interfaces.ts#L12-L17">angular2/src/core/compiler/interfaces.ts (line 12)</a>
:markdown
Defines lifecycle method [onCheck] called when a directive is being checked.
.l-main-section
h2 Members
.l-sub-section
h3 onCheck
pre.prettyprint
code.
onCheck()
:markdown

View File

@ -0,0 +1,27 @@
p.location-badge.
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/interfaces.ts#L7-L12">angular2/src/core/compiler/interfaces.ts (line 7)</a>
:markdown
Defines lifecycle method [onDestroy] called when a directive is being destroyed.
.l-main-section
h2 Members
.l-sub-section
h3 onDestroy
pre.prettyprint
code.
onDestroy()
:markdown

View File

@ -0,0 +1,27 @@
p.location-badge.
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/interfaces.ts#L17-L22">angular2/src/core/compiler/interfaces.ts (line 17)</a>
:markdown
Defines lifecycle method [onInit] 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

View File

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

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/view_ref.js#L36">angular2/src/core/compiler/view_ref.js (line 36)</a>
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/view_ref.ts#L26-L35">angular2/src/core/compiler/view_ref.ts (line 26)</a>
:markdown
@ -17,6 +17,7 @@ p.location-badge.
:markdown

View File

@ -0,0 +1,39 @@
p.location-badge.
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/di.ts#L44-L56">angular2/src/core/annotations_impl/di.ts (line 44)</a>
:markdown
Specifies that a <a href='QueryList-class.html'><code>QueryList</code></a> should be injected.
See <a href='QueryList-class.html'><code>QueryList</code></a> for usage and example.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(public directive: any)
:markdown
.l-sub-section
h3 directive
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/query_list.js#L68">angular2/src/core/compiler/query_list.js (line 68)</a>
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/query_list.ts#L1-L86">angular2/src/core/compiler/query_list.ts (line 1)</a>
:markdown
An iterable live list of components in the Light DOM.
@ -9,33 +9,42 @@ p.location-badge.
Injectable Objects that contains a live list of child directives in the light 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 `*for="of"` directive.
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.
NOTE: In the future this class will implement an `Observable` interface. For now it uses a plain list of observable
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
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 *for="#o of objects" [title]="o.title">{{o.text}}</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
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 `*for` could rearange the list of `<pane>` components which would not be reported to `<tabs>`
component and thus the list of `<pane>` componets would be out of sync with respect to the list of `<pane>` elements.
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 rearange the list of `<pane>` components which would not be
reported to `<tabs>`
component and thus the list of `<pane>` componets 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.
A preferred solution is to inject a `QueryList` which is a live list of directives in the
component`s light DOM.
```javascript
@Component({
@ -44,7 +53,7 @@ p.location-badge.
@View({
template: `
<ul>
<li *for="#pane of panes">{{pane.title}}</li>
<li *ng-for="#pane of panes">{{pane.title}}</li>
</ul>
<content></content>
`
@ -80,6 +89,8 @@ p.location-badge.
:markdown
@ -96,6 +107,8 @@ p.location-badge.
:markdown

View File

@ -0,0 +1,56 @@
p.location-badge.
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/visibility.ts#L12-L54">angular2/src/core/annotations_impl/visibility.ts (line 12)</a>
:markdown
Specifies that an injector should retrieve a dependency from its element.
## Example
Here is a simple directive that retrieves a dependency from its element.
```
@Directive({
selector: '[dependency]',
properties: [
'id: dependency'
]
})
class Dependency {
id:string;
}
@Directive({
selector: '[my-directive]'
})
class Dependency {
constructor(@Self() dependency:Dependency) {
expect(dependency.id).toEqual(1);
};
}
```
We use this with the following HTML template:
```
<div dependency="1" my-directive></div>
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor()
:markdown

View File

@ -0,0 +1,53 @@
p.location-badge.
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/visibility.ts#L166-L205">angular2/src/core/annotations_impl/visibility.ts (line 166)</a>
:markdown
Specifies that an injector should retrieve a dependency from any ancestor element.
An ancestor is any element between the parent element and shadow root.
## Example
Here is a simple directive that retrieves a dependency from an ancestor element.
```
@Directive({
selector: '[dependency]',
properties: [
'id: dependency'
]
})
class Dependency {
id:string;
}
@Directive({
selector: '[my-directive]'
})
class Dependency {
constructor(@Unbounded() dependency:Dependency) {
expect(dependency.id).toEqual(2);
};
}
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor({self}: {self?: boolean} = {})
:markdown

View File

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

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/core.html">angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/view_container_ref.js#L11">angular2/src/core/compiler/view_container_ref.js (line 11)</a>
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/view_container_ref.ts#L9-L61">angular2/src/core/compiler/view_container_ref.ts (line 9)</a>
:markdown
@ -13,10 +13,11 @@ p.location-badge.
pre.prettyprint
code.
constructor(viewManager: avmModule.AppViewManager, element: ElementRef)
constructor(public viewManager: avmModule.AppViewManager, public element: ElementRef)
:markdown
@ -32,6 +33,7 @@ p.location-badge.
:markdown
@ -43,11 +45,12 @@ p.location-badge.
pre.prettyprint
code.
create(protoViewRef:ProtoViewRef = null, atIndex:number=-1, injector:Injector = null)
create(protoViewRef: ProtoViewRef = null, atIndex: number = -1, context: ElementRef = null, injector: Injector = null)
:markdown
@ -59,12 +62,27 @@ p.location-badge.
pre.prettyprint
code.
detach(atIndex:number=-1)
detach(atIndex: number = -1)
:markdown
The method can be used together with insert to implement a view move, i.e.
moving the dom nodes while the directives in the view stay intact.
.l-sub-section
h3 element
:markdown
@ -81,6 +99,7 @@ p.location-badge.
:markdown
@ -92,11 +111,12 @@ p.location-badge.
pre.prettyprint
code.
indexOf(viewRef:ViewRef)
indexOf(viewRef: ViewRef)
:markdown
@ -108,11 +128,12 @@ p.location-badge.
pre.prettyprint
code.
insert(viewRef:ViewRef, atIndex:number=-1)
insert(viewRef: ViewRef, atIndex: number = -1)
:markdown
@ -125,6 +146,7 @@ p.location-badge.
:markdown
@ -136,11 +158,25 @@ p.location-badge.
pre.prettyprint
code.
remove(atIndex:number=-1)
remove(atIndex: number = -1)
:markdown
.l-sub-section
h3 viewManager
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/view_ref.js#L17">angular2/src/core/compiler/view_ref.js (line 17)</a>
exported from <a href='../core'>angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/view_ref.ts#L13-L26">angular2/src/core/compiler/view_ref.ts (line 13)</a>
:markdown
@ -13,10 +13,11 @@ p.location-badge.
pre.prettyprint
code.
constructor(view:viewModule.AppView)
constructor(view: viewModule.AppView)
:markdown
@ -28,6 +29,7 @@ p.location-badge.
:markdown
@ -39,11 +41,12 @@ p.location-badge.
pre.prettyprint
code.
setLocal(contextName: string, value:any)
setLocal(contextName: string, value: any)
:markdown

View File

@ -4,19 +4,111 @@
"intro" : "Define angular core API here."
},
"bootstrap-function" : {
"title" : "bootstrap Function"
"ViewRef-class" : {
"title" : "ViewRef Class"
},
"ProtoViewRef-class" : {
"title" : "ProtoViewRef Class"
},
"ViewContainerRef-class" : {
"title" : "ViewContainerRef Class"
},
"ExceptionHandler-class" : {
"title" : "ExceptionHandler Class"
"ElementRef-class" : {
"title" : "ElementRef Class"
},
"VmTurnZone-class" : {
"title" : "VmTurnZone Class"
"NgZone-class" : {
"title" : "NgZone Class"
},
"SelfAnnotation-class" : {
"title" : "SelfAnnotation Class"
},
"AncestorAnnotation-class" : {
"title" : "AncestorAnnotation Class"
},
"ParentAnnotation-class" : {
"title" : "ParentAnnotation Class"
},
"UnboundedAnnotation-class" : {
"title" : "UnboundedAnnotation Class"
},
"ViewAnnotation-class" : {
"title" : "ViewAnnotation Class"
},
"bootstrap-function" : {
"title" : "bootstrap Function"
},
"ApplicationRef-class" : {
"title" : "ApplicationRef Class"
},
"appComponentRefToken-var" : {
"title" : "appComponentRefToken Var"
},
"appComponentTypeToken-var" : {
"title" : "appComponentTypeToken Var"
},
"QueryAnnotation-class" : {
"title" : "QueryAnnotation Class"
},
"AttributeAnnotation-class" : {
"title" : "AttributeAnnotation Class"
},
"CompilerCache-class" : {
"title" : "CompilerCache Class"
},
"Compiler-class" : {
"title" : "Compiler Class"
},
"OnChange-interface" : {
"title" : "OnChange Interface"
},
"OnDestroy-interface" : {
"title" : "OnDestroy Interface"
},
"OnCheck-interface" : {
"title" : "OnCheck Interface"
},
"OnInit-interface" : {
"title" : "OnInit Interface"
},
"OnAllChangesDone-interface" : {
"title" : "OnAllChangesDone Interface"
},
"QueryList-class" : {
"title" : "QueryList Class"
},
"DirectiveResolver-class" : {
"title" : "DirectiveResolver Class"
},
"ComponentRef-class" : {
"title" : "ComponentRef Class"
},
"DynamicComponentLoader-class" : {
"title" : "DynamicComponentLoader Class"
}
}

View File

@ -0,0 +1,10 @@
.l-main-section
h2 appComponentRefToken <span class="type">variable</span>
p.location-badge.
exported from <a href='../core'>angular2/core</a>
:markdown

View File

@ -0,0 +1,10 @@
.l-main-section
h2 appComponentTypeToken <span class="type">variable</span>
p.location-badge.
exported from <a href='../core'>angular2/core</a>
:markdown

View File

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

View File

@ -1,3 +1,6 @@
p.location-badge.
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/core.ts#L1-L23">angular2/core.ts (line 1)</a>
ul
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
if slug != 'index'

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/di_errors.html">angular2/di_errors</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L32">angular2/src/di/exceptions.js (line 32)</a>
exported from <a href='../di'>angular2/di</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.ts#L25-L53">angular2/src/di/exceptions.ts (line 25)</a>
:markdown
Base class for all errors arising from misconfigured bindings.
@ -14,10 +14,11 @@ p.location-badge.
pre.prettyprint
code.
constructor(key, constructResolvingMessage:Function)
constructor(key, constructResolvingMessage: Function)
:markdown
@ -33,6 +34,7 @@ p.location-badge.
:markdown
@ -45,6 +47,7 @@ p.location-badge.
:markdown
@ -57,6 +60,7 @@ p.location-badge.
:markdown
@ -69,6 +73,20 @@ p.location-badge.
:markdown
.l-sub-section
h3 name
:markdown
@ -85,6 +103,7 @@ p.location-badge.
:markdown

View File

@ -1,10 +1,10 @@
p.location-badge.
exported from <a href="/angular2/di_errors.html">angular2/di_errors</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L95">angular2/src/di/exceptions.js (line 95)</a>
exported from <a href='../di'>angular2/di</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.ts#L69-L103">angular2/src/di/exceptions.ts (line 69)</a>
:markdown
Thrown when trying to retrieve an async <a href='../di/Binding-class.html'><code>Binding</code></a> using the sync API.
Thrown when trying to retrieve an async <a href='Binding-class.html'><code>Binding</code></a> using the sync API.
## Example
@ -22,8 +22,8 @@ p.location-badge.
}).toThrowError(AsycBindingError);
```
The above example throws because `String` depends on `Number` which is async. If any binding in the dependency
graph is async then the graph can only be retrieved using the `asyncGet` API.
The above example throws because `String` depends on `Number` which is async. If any binding in
the dependency graph is async then the graph can only be retrieved using the `asyncGet` API.
.l-main-section
h2 Members
@ -37,6 +37,7 @@ p.location-badge.
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/di.html">angular2/di</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/binding.js#L49">angular2/src/di/binding.js (line 49)</a>
exported from <a href='../di'>angular2/di</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/binding.ts#L25-L246">angular2/src/di/binding.ts (line 25)</a>
:markdown
Describes how the <a href='Injector-class.html'><code>Injector</code></a> should instantiate a given token.
@ -26,17 +26,18 @@ p.location-badge.
pre.prettyprint
code.
constructor(token, {
toClass,
toValue,
toAlias,
toFactory,
toAsyncFactory,
deps
})
constructor(token, {toClass, toValue, toAlias, toFactory, toAsyncFactory, deps}: {
toClass?: Type,
toValue?: any,
toAlias?: any,
toFactory?: Function,
toAsyncFactory?: Function,
deps?: List&lt;any&gt;
})
:markdown
@ -47,8 +48,8 @@ p.location-badge.
:markdown
Used in conjunction with `toFactory` or `toAsyncFactory` and specifies a set of dependencies (as `token`s) which
should be injected into the factory function.
Used in conjunction with `toFactory` or `toAsyncFactory` and specifies a set of dependencies
(as `token`s) which should be injected into the factory function.
@ -56,12 +57,14 @@ p.location-badge.
var injector = Injector.resolveAndCreate([
new Binding(Number, { toFactory: () => { return 1+2; }}),
new Binding(String, { toFactory: (value) => { return "Value: " + value; },
dependencies: [String] })
dependencies: [Number] })
]);
expect(injector.get(Number)).toEqual(3);
expect(injector.get(String)).toEqual('Value: 3');
```
@ -79,7 +82,10 @@ p.location-badge.
Converts the <a href='Binding-class.html'><code>Binding</code></a> into <a href='ResolvedBinding-class.html'><code>ResolvedBinding</code></a>.
<a href='Injector-class.html'><code>Injector</code></a> internally only uses <a href='ResolvedBinding-class.html'><code>ResolvedBinding</code></a>, <a href='Binding-class.html'><code>Binding</code></a> contains convenience binding syntax.
<a href='Injector-class.html'><code>Injector</code></a> internally only uses <a href='ResolvedBinding-class.html'><code>ResolvedBinding</code></a>, <a href='Binding-class.html'><code>Binding</code></a> contains
convenience binding syntax.
@ -93,12 +99,13 @@ p.location-badge.
Binds a key to the alias for an existing key.
An alias means that <a href='Injector-class.html'><code>Injector</code></a> returns the same instance as if the alias token was used. This is in contrast to
`toClass` where a separate instance of `toClass` is returned.
An alias means that <a href='Injector-class.html'><code>Injector</code></a> returns the same instance as if the alias token was used.
This is in contrast to `toClass` where a separate instance of `toClass` is returned.
Becuse `toAlias` and `toClass` are often confused the example contains both use cases for easy comparison.
Becuse `toAlias` and `toClass` are often confused the example contains both use cases for easy
comparison.
```javascript
@ -121,6 +128,8 @@ p.location-badge.
expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
```
@ -142,17 +151,21 @@ p.location-badge.
return new Promise((resolve) => resolve(1 + 2));
}}),
new Binding(String, { toFactory: (value) => { return "Value: " + value; },
dependencies: [String]})
dependencies: [Number]})
]);
injector.asyncGet(Number).then((v) => expect(v).toBe(3));
injector.asyncGet(String).then((v) => expect(v).toBe('Value: 3'));
```
The interesting thing to note is that event though `Number` has an async factory, the `String` factory
function takes the resolved value. This shows that the <a href='Injector-class.html'><code>Injector</code></a> delays executing the `String` factory
until after the `Number` is resolved. This can only be done if the `token` is retrieved using the
`asyncGet` API in the <a href='Injector-class.html'><code>Injector</code></a>.
The interesting thing to note is that event though `Number` has an async factory, the `String`
factory function takes the resolved value. This shows that the <a href='Injector-class.html'><code>Injector</code></a> delays
executing the
`String` factory
until after the `Number` is resolved. This can only be done if the `token` is retrieved using
the `asyncGet` API in the <a href='Injector-class.html'><code>Injector</code></a>.
@ -168,7 +181,8 @@ p.location-badge.
Becuse `toAlias` and `toClass` are often confused, the example contains both use cases for easy comparison.
Becuse `toAlias` and `toClass` are often confused, the example contains both use cases for easy
comparison.
```javascript
@ -191,6 +205,8 @@ p.location-badge.
expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
```
@ -210,12 +226,14 @@ p.location-badge.
var injector = Injector.resolveAndCreate([
new Binding(Number, { toFactory: () => { return 1+2; }}),
new Binding(String, { toFactory: (value) => { return "Value: " + value; },
dependencies: [String] })
dependencies: [Number] })
]);
expect(injector.get(Number)).toEqual(3);
expect(injector.get(String)).toEqual('Value: 3');
```
@ -238,6 +256,8 @@ p.location-badge.
expect(injector.get(String)).toEqual('Hello');
```
@ -250,6 +270,8 @@ p.location-badge.
:markdown
Token used when retrieving this binding. Usually the `Type`.

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/di.html">angular2/di</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/binding.js#L315">angular2/src/di/binding.js (line 315)</a>
exported from <a href='../di'>angular2/di</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/binding.ts#L296-L438">angular2/src/di/binding.ts (line 296)</a>
:markdown
Helper class for the <a href='bind-function.html'><code>bind</code></a> function.
@ -14,10 +14,11 @@ p.location-badge.
pre.prettyprint
code.
constructor(token)
constructor(public token)
:markdown
@ -34,12 +35,13 @@ p.location-badge.
Binds a key to the alias for an existing key.
An alias means that we will return the same instance as if the alias token was used. (This is in contrast to
`toClass` where a separet instance of `toClass` will be returned.)
An alias means that we will return the same instance as if the alias token was used. (This is
in contrast to `toClass` where a separet instance of `toClass` will be returned.)
Becuse `toAlias` and `toClass` are often confused, the example contains both use cases for easy comparison.
Becuse `toAlias` and `toClass` are often confused, the example contains both use cases for easy
comparison.
```javascript
@ -62,6 +64,8 @@ p.location-badge.
expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
```
@ -73,7 +77,7 @@ p.location-badge.
pre.prettyprint
code.
toAsyncFactory(factoryFunction:Function, dependencies:List = null)
toAsyncFactory(factoryFunction: Function, dependencies?: List&lt;any&gt;)
:markdown
@ -86,17 +90,20 @@ p.location-badge.
bind(Number).toAsyncFactory(() => {
return new Promise((resolve) => resolve(1 + 2));
}),
bind(String).toFactory((v) => { return "Value: " + v; }, [String])
bind(String).toFactory((v) => { return "Value: " + v; }, [Number])
]);
injector.asyncGet(Number).then((v) => expect(v).toBe(3));
injector.asyncGet(String).then((v) => expect(v).toBe('Value: 3'));
```
The interesting thing to note is that event though `Number` has an async factory, the `String` factory
function takes the resolved value. This shows that the <a href='Injector-class.html'><code>Injector</code></a> delays executing of the `String` factory
until after the `Number` is resolved. This can only be done if the `token` is retrieved using the
The interesting thing to note is that event though `Number` has an async factory, the `String`
factory function takes the resolved value. This shows that the <a href='Injector-class.html'><code>Injector</code></a> delays
executing of the `String` factory
until after the `Number` is resolved. This can only be done if the `token` is retrieved using
the `asyncGet` API in the <a href='Injector-class.html'><code>Injector</code></a>.
@ -108,7 +115,7 @@ p.location-badge.
pre.prettyprint
code.
toClass(type:Type)
toClass(type: Type)
:markdown
@ -116,7 +123,8 @@ p.location-badge.
Because `toAlias` and `toClass` are often confused, the example contains both use cases for easy comparison.
Because `toAlias` and `toClass` are often confused, the example contains both use cases for
easy comparison.
```javascript
@ -139,6 +147,8 @@ p.location-badge.
expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
```
@ -150,7 +160,7 @@ p.location-badge.
pre.prettyprint
code.
toFactory(factoryFunction:Function, dependencies:List = null)
toFactory(factoryFunction: Function, dependencies?: List&lt;any&gt;)
:markdown
@ -160,13 +170,15 @@ p.location-badge.
```javascript
var injector = Injector.resolveAndCreate([
bind(Number).toFactory(() => { return 1+2; }}),
bind(String).toFactory((v) => { return "Value: " + v; }, [String] })
bind(Number).toFactory(() => { return 1+2; }),
bind(String).toFactory((v) => { return "Value: " + v; }, [Number])
]);
expect(injector.get(Number)).toEqual(3);
expect(injector.get(String)).toEqual('Value: 3');
```
@ -193,6 +205,8 @@ p.location-badge.
expect(injector.get(String)).toEqual('Hello');
```
@ -205,6 +219,7 @@ p.location-badge.
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/di_errors.html">angular2/di_errors</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L124">angular2/src/di/exceptions.js (line 124)</a>
exported from <a href='../di'>angular2/di</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.ts#L103-L130">angular2/src/di/exceptions.ts (line 103)</a>
:markdown
Thrown when dependencies form a cycle.
@ -31,6 +31,7 @@ p.location-badge.
:markdown

View File

@ -0,0 +1,88 @@
p.location-badge.
exported from <a href='../di'>angular2/di</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/binding.ts#L13-L23">angular2/src/di/binding.ts (line 13)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(public key: Key, public asPromise: boolean, public lazy: boolean, public optional: boolean, public properties: List&lt;any&gt;)
:markdown
.l-sub-section
h3 asPromise
:markdown
.l-sub-section
h3 key
:markdown
.l-sub-section
h3 lazy
:markdown
.l-sub-section
h3 optional
:markdown
.l-sub-section
h3 properties
:markdown

View File

@ -1,12 +1,13 @@
p.location-badge.
exported from <a href="/angular2/di_annotations.html">angular2/di_annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations_impl.js#L110">angular2/src/di/annotations_impl.js (line 110)</a>
exported from <a href='../di'>angular2/di</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations_impl.ts#L72-L105">angular2/src/di/annotations_impl.ts (line 72)</a>
:markdown
`DependencyAnnotation` is used by the framework to extend DI.
Only annotations implementing `DependencyAnnotation` are added to the list of dependency properties.
Only annotations implementing `DependencyAnnotation` are added to the list of dependency
properties.
For example:
@ -30,20 +31,6 @@ p.location-badge.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor()
:markdown
.l-sub-section
h3 token
@ -51,6 +38,7 @@ p.location-badge.
:markdown

View File

@ -0,0 +1,10 @@
.l-main-section
h2 FORWARD_REF <span class="type">variable</span>
p.location-badge.
exported from <a href='../di'>angular2/di</a>
:markdown

View File

@ -0,0 +1,8 @@
p.location-badge.
exported from <a href='../di'>angular2/di</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/forward_ref.ts#L1-L3">angular2/src/di/forward_ref.ts (line 1)</a>
:markdown

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