updated apis docs with proper formatting

This commit is contained in:
Alex Wolfe 2015-05-01 06:37:29 -07:00
parent c11737ff73
commit 5f2fb1b5a4
77 changed files with 632 additions and 785 deletions

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/annotations.html">angular2/annotations</a> exported from <a href="/angular2/annotations.html">angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/visibility.js#L105">angular2/src/core/annotations/visibility.js (line 105)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/visibility.js#L105">angular2/src/core/annotations_impl/visibility.js (line 105)</a>
:markdown :markdown
Specifies that an injector should retrieve a dependency from any ancestor element. Specifies that an injector should retrieve a dependency from any ancestor element.
@ -14,7 +14,7 @@ p.location-badge.
Here is a simple directive that retrieves a dependency from an ancestor element. Here is a simple directive that retrieves a dependency from an ancestor element.
``` ```
@Decorator({ @Directive({
selector: '[dependency]', selector: '[dependency]',
properties: { properties: {
'id':'dependency' 'id':'dependency'
@ -25,7 +25,7 @@ p.location-badge.
} }
@Decorator({ @Directive({
selector: '[my-directive]' selector: '[my-directive]'
}) })
class Dependency { class Dependency {

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/annotations.html">angular2/annotations</a> exported from <a href="/angular2/annotations.html">angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/di.js#L31">angular2/src/core/annotations/di.js (line 31)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/di.js#L31">angular2/src/core/annotations_impl/di.js (line 31)</a>
:markdown :markdown
Specifies that a constant attribute value should be injected. Specifies that a constant attribute value should be injected.
@ -19,10 +19,10 @@ p.location-badge.
A decorator can inject string literal `text` like so: A decorator can inject string literal `text` like so:
```javascript ```javascript
@Decorator({ @Directive({
selector: `input' selector: `input'
}) })
class InputDecorator { class InputDirective {
constructor(@Attribute('type') type) { constructor(@Attribute('type') type) {
// type would be `text` in this example // type would be `text` in this example
} }
@ -56,6 +56,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 token h3 token
@ -66,3 +67,4 @@ p.location-badge.

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/annotations.html">angular2/annotations</a> exported from <a href="/angular2/annotations.html">angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L547">angular2/src/core/annotations/annotations.js (line 547)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/annotations.js#L732">angular2/src/core/annotations_impl/annotations.js (line 732)</a>
:markdown :markdown
Declare reusable UI building blocks for an application. Declare reusable UI building blocks for an application.
@ -36,6 +36,51 @@ p.location-badge.
} }
``` ```
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 .l-main-section
h2 Members h2 Members
.l-sub-section .l-sub-section
@ -52,7 +97,8 @@ p.location-badge.
hostProperties, hostProperties,
injectables, injectables,
lifecycle, lifecycle,
changeDetection = DEFAULT changeDetection = DEFAULT,
compileChildren = true,
}:{ }:{
selector:string, selector:string,
properties:Object, properties:Object,
@ -61,7 +107,8 @@ p.location-badge.
hostProperties:any, hostProperties:any,
injectables:List, injectables:List,
lifecycle:List, lifecycle:List,
changeDetection:string changeDetection:string,
compileChildren:boolean
}={}) }={})
:markdown :markdown
@ -75,6 +122,7 @@ p.location-badge.
:markdown :markdown
Defines the used change detection strategy. Defines the used change detection strategy.
When a component is instantiated, Angular creates a change detector, which is responsible for propagating When a component is instantiated, Angular creates a change detector, which is responsible for propagating
@ -92,6 +140,7 @@ p.location-badge.
:markdown :markdown
Defines the set of injectable objects that are visible to a Component and its children. Defines the set of injectable objects that are visible to a Component and its children.
The `injectables` defined in the Component annotation allow you to configure a set of bindings for the component's The `injectables` defined in the Component annotation allow you to configure a set of bindings for the component's

View File

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

View File

@ -1,13 +1,12 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/annotations.html">angular2/annotations</a> exported from <a href="/angular2/annotations.html">angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L240">angular2/src/core/annotations/annotations.js (line 240)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/annotations.js#L371">angular2/src/core/annotations_impl/annotations.js (line 371)</a>
:markdown :markdown
Directives allow you to attach behavior to elements in the DOM. Directives allow you to attach behavior to elements in the DOM.
Directive is an abstract concept, instead use concrete directives: <a href='Component-class.html'><code>Component</code></a>, <a href='DynamicComponent-class.html'><code>DynamicComponent</code></a>, <a href='Decorator-class.html'><code>Decorator</code></a> <a href='Directive-class.html'><code>Directive</code></a>s with an embedded view are called <a href='Component-class.html'><code>Component</code></a>s.
or <a href='Viewport-class.html'><code>Viewport</code></a>.
A directive consists of a single directive annotation and a controller class. When the directive's `selector` matches 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: elements in the DOM, the following steps occur:
@ -52,8 +51,8 @@ p.location-badge.
- `@Descendants query:Query<DirectiveType>`: A live collection of any child directives (will be implemented in later relaese). - `@Descendants query:Query<DirectiveType>`: A live collection of any child directives (will be implemented in later relaese).
To inject element-specific special objects, declare the constructor parameter as: To inject element-specific special objects, declare the constructor parameter as:
- `element: NgElement` to obtain a DOM element (DEPRECATED: replacement coming) - `element: ElementRef` to obtain a reference to logical element in the view.
- `viewContainer: ViewContainerRef` to control child template instantiation, for <a href='Viewport-class.html'><code>Viewport</code></a> directives only - `viewContainer: ViewContainerRef` to control child template instantiation, for <a href='Directive-class.html'><code>Directive</code></a> directives only
- `bindingPropagation: BindingPropagation` to control change detection in a more granular way. - `bindingPropagation: BindingPropagation` to control change detection in a more granular way.
## Example ## Example
@ -83,7 +82,7 @@ p.location-badge.
class SomeService { class SomeService {
} }
@Decorator({ @Directive({
selector: '[dependency]', selector: '[dependency]',
properties: { properties: {
'id':'dependency' 'id':'dependency'
@ -102,7 +101,7 @@ p.location-badge.
Here the constructor is declared with no arguments, therefore nothing is injected into `MyDirective`. Here the constructor is declared with no arguments, therefore nothing is injected into `MyDirective`.
``` ```
@Decorator({ selector: '[my-directive]' }) @Directive({ selector: '[my-directive]' })
class MyDirective { class MyDirective {
constructor() { constructor() {
} }
@ -119,7 +118,7 @@ p.location-badge.
Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type from the parent Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type from the parent
component's injector. component's injector.
``` ```
@Decorator({ selector: '[my-directive]' }) @Directive({ selector: '[my-directive]' })
class MyDirective { class MyDirective {
constructor(someService: SomeService) { constructor(someService: SomeService) {
} }
@ -134,7 +133,7 @@ p.location-badge.
Directives can inject other directives declared on the current element. Directives can inject other directives declared on the current element.
``` ```
@Decorator({ selector: '[my-directive]' }) @Directive({ selector: '[my-directive]' })
class MyDirective { class MyDirective {
constructor(dependency: Dependency) { constructor(dependency: Dependency) {
expect(dependency.id).toEqual(3); expect(dependency.id).toEqual(3);
@ -151,7 +150,7 @@ p.location-badge.
the dependency. the dependency.
``` ```
@Decorator({ selector: '[my-directive]' }) @Directive({ selector: '[my-directive]' })
class MyDirective { class MyDirective {
constructor(@Parent() dependency: Dependency) { constructor(@Parent() dependency: Dependency) {
expect(dependency.id).toEqual(2); expect(dependency.id).toEqual(2);
@ -168,7 +167,7 @@ p.location-badge.
resolve dependencies for the current element, even if this would satisfy the dependency. resolve dependencies for the current element, even if this would satisfy the dependency.
``` ```
@Decorator({ selector: '[my-directive]' }) @Directive({ selector: '[my-directive]' })
class MyDirective { class MyDirective {
constructor(@Ancestor() dependency: Dependency) { constructor(@Ancestor() dependency: Dependency) {
expect(dependency.id).toEqual(2); expect(dependency.id).toEqual(2);
@ -186,11 +185,11 @@ p.location-badge.
A directive can also query for other child directives. Since parent directives are instantiated before child 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 directives, a directive can't simply inject the list of child directives. Instead, the directive
injects a <a href='../view/QueryList-class.html'><code>QueryList</code></a>, which updates its contents as children are added, removed, or moved by any injects a <a href='../view/QueryList-class.html'><code>QueryList</code></a>, which updates its contents as children are added, removed, or moved by a directive
<a href='Viewport-class.html'><code>Viewport</code></a> directive such as a `for`, an `if`, or a `switch`. that uses a <a href='../core/ViewContainerRef-class.html'><code>ViewContainerRef</code></a> such as a `for`, an `if`, or a `switch`.
``` ```
@Decorator({ selector: '[my-directive]' }) @Directive({ selector: '[my-directive]' })
class MyDirective { class MyDirective {
constructor(@Query(Marker) dependencies:QueryList<Maker>) { constructor(@Query(Marker) dependencies:QueryList<Maker>) {
} }
@ -207,7 +206,7 @@ p.location-badge.
Similar to `@Children` above, but also includes the children of the child elements. Similar to `@Children` above, but also includes the children of the child elements.
``` ```
@Decorator({ selector: '[my-directive]' }) @Directive({ selector: '[my-directive]' })
class MyDirective { class MyDirective {
constructor(@QueryDescendents(Marker) dependencies:QueryList<Maker>) { constructor(@QueryDescendents(Marker) dependencies:QueryList<Maker>) {
} }
@ -223,7 +222,7 @@ p.location-badge.
This explicitly permits the author of a template to treat some of the surrounding directives as optional. This explicitly permits the author of a template to treat some of the surrounding directives as optional.
``` ```
@Decorator({ selector: '[my-directive]' }) @Directive({ selector: '[my-directive]' })
class MyDirective { class MyDirective {
constructor(@Optional() dependency:Dependency) { constructor(@Optional() dependency:Dependency) {
} }
@ -233,6 +232,139 @@ p.location-badge.
This directive would be instantiated with a `Dependency` directive found on the current element. If none can be 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. 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-class.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': '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 .l-main-section
h2 Members h2 Members
.l-sub-section .l-sub-section
@ -247,14 +379,16 @@ p.location-badge.
events, events,
hostListeners, hostListeners,
hostProperties, hostProperties,
lifecycle lifecycle,
compileChildren = true,
}:{ }:{
selector:string, selector:string,
properties:any, properties:any,
events:List, events:List,
hostListeners: any, hostListeners: any,
hostProperties: any, hostProperties: any,
lifecycle:List lifecycle:List,
compileChildren:boolean
}={}) }={})
:markdown :markdown
@ -263,11 +397,24 @@ p.location-badge.
.l-sub-section
h3 compileChildren
:markdown
If set to true the compiler does not compile the children of this directive.
.l-sub-section .l-sub-section
h3 events h3 events
:markdown :markdown
Enumerates the set of emitted events. Enumerates the set of emitted events.
## Syntax ## Syntax
@ -302,6 +449,7 @@ p.location-badge.
hasLifecycleHook(hook:string) hasLifecycleHook(hook:string)
:markdown :markdown
Returns true if a directive participates in a given `LifecycleEvent`. Returns true if a directive participates in a given `LifecycleEvent`.
See <a href='onChange-var.html'><code>onChange</code></a>, <a href='onDestroy-var.html'><code>onDestroy</code></a>, <a href='onAllChangesDone-var.html'><code>onAllChangesDone</code></a> for details. See <a href='onChange-var.html'><code>onChange</code></a>, <a href='onDestroy-var.html'><code>onDestroy</code></a>, <a href='onAllChangesDone-var.html'><code>onAllChangesDone</code></a> for details.
@ -315,6 +463,7 @@ p.location-badge.
:markdown :markdown
Specifies which DOM hostListeners a directive listens to. Specifies which DOM hostListeners a directive listens to.
The `hostListeners` property defines a set of `event` to `method` key-value pairs: The `hostListeners` property defines a set of `event` to `method` key-value pairs:
@ -350,14 +499,14 @@ p.location-badge.
You would define the event binding as follows: You would define the event binding as follows:
``` ```
@Decorator({ @Directive({
selector: 'input', selector: 'input',
hostListeners: { hostListeners: {
'change': 'onChange($event)', 'change': 'onChange($event)',
'window:resize': 'onResize($event)' 'window:resize': 'onResize($event)'
} }
}) })
class InputDecorator { class InputDirective {
onChange(event:Event) { onChange(event:Event) {
} }
onResize(event:Event) { onResize(event:Event) {
@ -365,7 +514,7 @@ p.location-badge.
} }
``` ```
Here the `onChange` method of `InputDecorator` is invoked whenever the DOM element fires the 'change' event. Here the `onChange` method of `InputDirective` is invoked whenever the DOM element fires the 'change' event.
@ -376,18 +525,19 @@ p.location-badge.
:markdown :markdown
Specifies which DOM properties a directives updates. Specifies which DOM properties a directives updates.
## Syntax ## Syntax
``` ```
@Decorator({ @Directive({
selector: 'input', selector: 'input',
hostProperties: { hostProperties: {
'value': 'value' 'value': 'value'
} }
}) })
class InputDecorator { class InputDirective {
value:string; value:string;
} }
@ -404,6 +554,7 @@ p.location-badge.
:markdown :markdown
Specifies a set of lifecycle hostListeners in which the directive participates. Specifies a set of lifecycle hostListeners in which the directive participates.
See <a href='onChange-var.html'><code>onChange</code></a>, <a href='onDestroy-var.html'><code>onDestroy</code></a>, <a href='onAllChangesDone-var.html'><code>onAllChangesDone</code></a> for details. See <a href='onChange-var.html'><code>onChange</code></a>, <a href='onDestroy-var.html'><code>onDestroy</code></a>, <a href='onAllChangesDone-var.html'><code>onAllChangesDone</code></a> for details.
@ -417,6 +568,7 @@ p.location-badge.
:markdown :markdown
Enumerates the set of properties that accept data binding for a directive. Enumerates the set of properties that accept data binding for a directive.
The `properties` property defines a set of `directiveProperty` to `bindingProperty` The `properties` property defines a set of `directiveProperty` to `bindingProperty`
@ -448,7 +600,7 @@ p.location-badge.
with standard Angular syntax. For example: with standard Angular syntax. For example:
``` ```
@Decorator({ @Directive({
selector: '[tooltip]', selector: '[tooltip]',
properties: { properties: {
'text': 'tooltip' 'text': 'tooltip'
@ -484,7 +636,7 @@ p.location-badge.
See <a href='../pipes/Pipe-class.html'><code>Pipe</code></a> and <a href='../pipes/keyValDiff-var.html'><code>keyValDiff</code></a> documentation for more details. See <a href='../pipes/Pipe-class.html'><code>Pipe</code></a> and <a href='../pipes/keyValDiff-var.html'><code>keyValDiff</code></a> documentation for more details.
``` ```
@Decorator({ @Directive({
selector: '[class-set]', selector: '[class-set]',
properties: { properties: {
'classChanges': 'classSet | keyValDiff' 'classChanges': 'classSet | keyValDiff'
@ -514,6 +666,7 @@ p.location-badge.
:markdown :markdown
The CSS selector that triggers the instantiation of a directive. 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. Angular only allows directives to trigger on CSS selectors that do not cross element boundaries.

View File

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

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/annotations.html">angular2/annotations</a> exported from <a href="/angular2/annotations.html">angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/visibility.js#L44">angular2/src/core/annotations/visibility.js (line 44)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/visibility.js#L44">angular2/src/core/annotations_impl/visibility.js (line 44)</a>
:markdown :markdown
Specifies that an injector should retrieve a dependency from the direct parent. Specifies that an injector should retrieve a dependency from the direct parent.
@ -11,7 +11,7 @@ p.location-badge.
Here is a simple directive that retrieves a dependency from its parent element. Here is a simple directive that retrieves a dependency from its parent element.
``` ```
@Decorator({ @Directive({
selector: '[dependency]', selector: '[dependency]',
properties: { properties: {
'id':'dependency' 'id':'dependency'
@ -22,7 +22,7 @@ p.location-badge.
} }
@Decorator({ @Directive({
selector: '[my-directive]' selector: '[my-directive]'
}) })
class Dependency { class Dependency {

View File

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

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/annotations.html">angular2/annotations</a> exported from <a href="/angular2/annotations.html">angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/di.js#L55">angular2/src/core/annotations/di.js (line 55)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/di.js#L55">angular2/src/core/annotations_impl/di.js (line 55)</a>
:markdown :markdown
Specifies that a <a href='../view/QueryList-class.html'><code>QueryList</code></a> should be injected. Specifies that a <a href='../view/QueryList-class.html'><code>QueryList</code></a> should be injected.
@ -34,3 +34,4 @@ p.location-badge.

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/annotations.html">angular2/annotations</a> exported from <a href="/angular2/annotations.html">angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/view.js#L34">angular2/src/core/annotations/view.js (line 34)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/view.js#L34">angular2/src/core/annotations_impl/view.js (line 34)</a>
:markdown :markdown
Declares the available HTML templates for an application. Declares the available HTML templates for an application.
@ -64,6 +64,7 @@ p.location-badge.
:markdown :markdown
Specifies a list of directives that can be used within a template. Specifies a list of directives that can be used within a template.
Directives must be listed explicitly to provide proper component encapsulation. Directives must be listed explicitly to provide proper component encapsulation.
@ -94,6 +95,7 @@ p.location-badge.
:markdown :markdown
Specify a custom renderer for this View. Specify a custom renderer for this View.
If this is set, neither `template`, `templateURL` nor `directives` are used. If this is set, neither `template`, `templateURL` nor `directives` are used.
@ -106,6 +108,7 @@ p.location-badge.
:markdown :markdown
Specifies an inline template for an angular component. Specifies an inline template for an angular component.
NOTE: either `templateUrl` or `template` should be used, but not both. NOTE: either `templateUrl` or `template` should be used, but not both.
@ -119,6 +122,7 @@ p.location-badge.
:markdown :markdown
Specifies a template URL for an angular component. Specifies a template URL for an angular component.
NOTE: either `templateUrl` or `template` should be used, but not both. NOTE: either `templateUrl` or `template` should be used, but not both.

View File

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

View File

@ -1,7 +1,7 @@
{ {
"index" : { "index" : {
"title" : "Annotations", "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='Decorator-class.html'><code>Decorator</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 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."
}, },
"Directive-class" : { "Directive-class" : {
@ -12,18 +12,6 @@
"title" : "Component Class" "title" : "Component Class"
}, },
"DynamicComponent-class" : {
"title" : "DynamicComponent Class"
},
"Decorator-class" : {
"title" : "Decorator Class"
},
"Viewport-class" : {
"title" : "Viewport Class"
},
"onDestroy-var" : { "onDestroy-var" : {
"title" : "onDestroy Var" "title" : "onDestroy Var"
}, },

View File

@ -10,7 +10,7 @@
## Example: ## Example:
``` ```
@Decorator({ @Directive({
selector: '[class-set]', selector: '[class-set]',
lifecycle: [onAllChangesDone] lifecycle: [onAllChangesDone]
}) })

View File

@ -15,7 +15,7 @@
## Example: ## Example:
``` ```
@Decorator({ @Directive({
selector: '[class-set]', selector: '[class-set]',
properties: { properties: {
'propA': 'propA' 'propA': 'propA'

View File

@ -10,7 +10,7 @@
## Example ## Example
``` ```
@Decorator({ @Directive({
..., ...,
lifecycle: [onDestroy] lifecycle: [onDestroy]
}) })

View File

@ -40,3 +40,4 @@ p.location-badge.

View File

@ -34,6 +34,7 @@ p.location-badge.
detach() detach()
:markdown :markdown
Detaches the change detector from the change detector tree. Detaches the change detector from the change detector tree.
The detached change detector will not be checked until it is reattached. The detached change detector will not be checked until it is reattached.
@ -51,6 +52,7 @@ p.location-badge.
reattach() reattach()
:markdown :markdown
Reattach the change detector to the change detector tree. Reattach the change detector to the change detector tree.
This also requests a check of this change detector. This reattached change detector will be checked during the This also requests a check of this change detector. This reattached change detector will be checked during the
@ -69,6 +71,7 @@ p.location-badge.
requestCheck() requestCheck()
:markdown :markdown
Request to check all ON_PUSH ancestors. Request to check all ON_PUSH ancestors.

View File

@ -39,6 +39,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 registry h3 registry
@ -49,3 +50,4 @@ p.location-badge.

View File

@ -39,6 +39,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 registry h3 registry
@ -49,3 +50,4 @@ p.location-badge.

View File

@ -41,21 +41,6 @@ p.location-badge.
.l-sub-section
h3 registerWith
pre.prettyprint
code.
registerWith(zone:VmTurnZone, changeDetector:ChangeDetector = null)
:markdown
.l-sub-section .l-sub-section
h3 tick h3 tick
@ -65,6 +50,7 @@ p.location-badge.
tick() tick()
:markdown :markdown
Invoke this method to explicitly process change detection and its side-effects. Invoke this method to explicitly process change detection and its side-effects.
In development mode, `tick()` also performs a second change detection cycle to ensure that no further In development mode, `tick()` also performs a second change detection cycle to ensure that no further

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/core.html">angular2/core</a> 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/exception_handler.js#L34">angular2/src/core/exception_handler.js (line 34)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/exception_handler.js#L35">angular2/src/core/exception_handler.js (line 35)</a>
:markdown :markdown
Provides a hook for centralized exception handling. Provides a hook for centralized exception handling.
@ -46,3 +46,4 @@ p.location-badge.

View File

@ -1,52 +0,0 @@
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/ng_element.js#L13">angular2/src/core/compiler/ng_element.js (line 13)</a>
:markdown
Allows direct access to the underlying DOM element.
Attention: NgElement will be replaced by a different concept
for accessing an element in a way that is compatible with the render layer.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(view, boundElementIndex)
:markdown
.l-sub-section
h3 domElement
:markdown
.l-sub-section
h3 getAttribute
pre.prettyprint
code.
getAttribute(name:string)
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a> 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> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/view_container_ref.js#L12">angular2/src/core/compiler/view_container_ref.js (line 12)</a>
:markdown :markdown
@ -13,7 +13,7 @@ p.location-badge.
pre.prettyprint pre.prettyprint
code. code.
constructor(viewManager: avmModule.AppViewManager, location: eiModule.ElementRef, defaultProtoView: viewModule.AppProtoView) constructor(viewManager: avmModule.AppViewManager, element: ElementRef)
:markdown :markdown
@ -36,13 +36,14 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 create h3 create
pre.prettyprint pre.prettyprint
code. code.
create(atIndex:number=-1, protoView:viewModule.AppProtoView = null, injector:Injector = null) create(protoViewRef:ProtoViewRef = null, atIndex:number=-1, injector:Injector = null)
:markdown :markdown
@ -51,6 +52,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 detach h3 detach
@ -60,6 +62,7 @@ p.location-badge.
detach(atIndex:number=-1) detach(atIndex:number=-1)
:markdown :markdown
The method can be used together with insert to implement a view move, i.e. 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. moving the dom nodes while the directives in the view stay intact.
@ -82,13 +85,14 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 indexOf h3 indexOf
pre.prettyprint pre.prettyprint
code. code.
indexOf(view:viewModule.AppView) indexOf(viewRef:ViewRef)
:markdown :markdown
@ -97,13 +101,14 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 insert h3 insert
pre.prettyprint pre.prettyprint
code. code.
insert(view:viewModule.AppView, atIndex:number=-1) insert(viewRef:ViewRef, atIndex:number=-1)
:markdown :markdown
@ -112,6 +117,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 length h3 length
@ -123,6 +129,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 remove h3 remove
@ -137,3 +144,4 @@ p.location-badge.

View File

@ -41,6 +41,7 @@ p.location-badge.
initCallbacks({onTurnStart, onTurnDone, onScheduleMicrotask, onErrorHandler} = {}, [object Object], [object Object], [object Object], [object Object]) initCallbacks({onTurnStart, onTurnDone, onScheduleMicrotask, onErrorHandler} = {}, [object Object], [object Object], [object Object], [object Object])
:markdown :markdown
Initializes the zone hooks. Initializes the zone hooks.
@ -57,6 +58,7 @@ p.location-badge.
run(fn) run(fn)
:markdown :markdown
Runs `fn` in the inner zone and returns whatever it returns. 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 In a typical app where the inner zone is the Angular zone, this allows one to make use of the
@ -83,6 +85,7 @@ p.location-badge.
runOutsideAngular(fn) runOutsideAngular(fn)
:markdown :markdown
Runs `fn` in the outer zone and returns whatever it returns. 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 In a typical app where the inner zone is the Angular zone, this allows one to escape Angular's

View File

@ -8,8 +8,8 @@
"title" : "bootstrap Function" "title" : "bootstrap Function"
}, },
"NgElement-class" : { "ViewContainerRef-class" : {
"title" : "NgElement Class" "title" : "ViewContainerRef Class"
}, },
"ExceptionHandler-class" : { "ExceptionHandler-class" : {

View File

@ -46,6 +46,7 @@ p.location-badge.
:markdown :markdown
Used in conjunction with `toFactory` or `toAsyncFactory` and specifies a set of dependencies (as `token`s) which Used in conjunction with `toFactory` or `toAsyncFactory` and specifies a set of dependencies (as `token`s) which
should be injected into the factory function. should be injected into the factory function.
@ -75,6 +76,7 @@ p.location-badge.
resolve() resolve()
:markdown :markdown
Converts the <a href='Binding-class.html'><code>Binding</code></a> into <a href='ResolvedBinding-class.html'><code>ResolvedBinding</code></a>. 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.
@ -88,6 +90,7 @@ p.location-badge.
:markdown :markdown
Binds a key to the alias for an existing key. 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 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
@ -128,6 +131,7 @@ p.location-badge.
:markdown :markdown
Binds a key to a function which computes the value asynchronously. Binds a key to a function which computes the value asynchronously.
@ -159,6 +163,7 @@ p.location-badge.
:markdown :markdown
Binds an interface to an implementation / subclass. Binds an interface to an implementation / subclass.
@ -196,6 +201,7 @@ p.location-badge.
:markdown :markdown
Binds a key to a function which computes the value. Binds a key to a function which computes the value.
@ -220,6 +226,7 @@ p.location-badge.
:markdown :markdown
Binds a key to a value. Binds a key to a value.
@ -241,6 +248,7 @@ p.location-badge.
:markdown :markdown
Token used when retrieving this binding. Usually the `Type`. Token used when retrieving this binding. Usually the `Type`.

View File

@ -31,6 +31,7 @@ p.location-badge.
toAlias(aliasToken) toAlias(aliasToken)
:markdown :markdown
Binds a key to the alias for an existing key. 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 An alias means that we will return the same instance as if the alias token was used. (This is in contrast to
@ -75,6 +76,7 @@ p.location-badge.
toAsyncFactory(factoryFunction:Function, dependencies:List = null) toAsyncFactory(factoryFunction:Function, dependencies:List = null)
:markdown :markdown
Binds a key to a function which computes the value asynchronously. Binds a key to a function which computes the value asynchronously.
@ -109,6 +111,7 @@ p.location-badge.
toClass(type:Type) toClass(type:Type)
:markdown :markdown
Binds an interface to an implementation / subclass. Binds an interface to an implementation / subclass.
@ -150,6 +153,7 @@ p.location-badge.
toFactory(factoryFunction:Function, dependencies:List = null) toFactory(factoryFunction:Function, dependencies:List = null)
:markdown :markdown
Binds a key to a function which computes the value. Binds a key to a function which computes the value.
@ -177,6 +181,7 @@ p.location-badge.
toValue(value) toValue(value)
:markdown :markdown
Binds a key to a value. Binds a key to a value.
@ -203,3 +208,4 @@ p.location-badge.

View File

@ -64,6 +64,7 @@ p.location-badge.
asyncGet(token, [object Object]) asyncGet(token, [object Object])
:markdown :markdown
Retrieves an instance from the injector asynchronously. Used with asynchronous bindings. Retrieves an instance from the injector asynchronously. Used with asynchronous bindings.
@ -80,6 +81,7 @@ p.location-badge.
createChildFromResolved(bindings:List&lt;ResolvedBinding&gt;, [object Object]) createChildFromResolved(bindings:List&lt;ResolvedBinding&gt;, [object Object])
:markdown :markdown
Creates a child injector and loads a new set of <a href='ResolvedBinding-class.html'><code>ResolvedBinding</code></a>s into it. Creates a child injector and loads a new set of <a href='ResolvedBinding-class.html'><code>ResolvedBinding</code></a>s into it.
@ -96,6 +98,7 @@ p.location-badge.
fromResolvedBindings(bindings:List&lt;ResolvedBinding&gt;, {defaultBindings=false}={}, [object Object], [object Object]) fromResolvedBindings(bindings:List&lt;ResolvedBinding&gt;, {defaultBindings=false}={}, [object Object], [object Object])
:markdown :markdown
Creates an injector from previously resolved bindings. This bypasses resolution and flattening. This API is the Creates an injector from previously resolved bindings. This bypasses resolution and flattening. This API is the
recommended way to construct injectors in performance-sensitive parts. recommended way to construct injectors in performance-sensitive parts.
@ -113,6 +116,7 @@ p.location-badge.
get(token, [object Object]) get(token, [object Object])
:markdown :markdown
Retrieves an instance from the injector. Retrieves an instance from the injector.
@ -129,6 +133,7 @@ p.location-badge.
getOptional(token, [object Object]) getOptional(token, [object Object])
:markdown :markdown
Retrieves an instance from the injector. Retrieves an instance from the injector.
@ -145,6 +150,7 @@ p.location-badge.
resolve(bindings:List, [object Object]) resolve(bindings:List, [object Object])
:markdown :markdown
Turns a list of binding definitions into an internal resolved list of resolved bindings. Turns a list of binding definitions into an internal resolved list of resolved bindings.
A resolution is a process of flattening multiple nested lists and converting individual bindings into a A resolution is a process of flattening multiple nested lists and converting individual bindings into a
@ -165,6 +171,7 @@ p.location-badge.
resolveAndCreate(bindings:List, {defaultBindings=false}={}, [object Object], [object Object]) resolveAndCreate(bindings:List, {defaultBindings=false}={}, [object Object], [object Object])
:markdown :markdown
Resolves bindings and creates an injector based on those bindings. This function is slower than the Resolves bindings and creates an injector based on those bindings. This function is slower than the
corresponding `fromResolvedBindings` because it needs to resolve bindings first. See `resolve` for the corresponding `fromResolvedBindings` because it needs to resolve bindings first. See `resolve` for the
<a href='Injector-class.html'><code>Injector</code></a>. <a href='Injector-class.html'><code>Injector</code></a>.
@ -185,6 +192,7 @@ p.location-badge.
resolveAndCreateChild(bindings:List, [object Object]) resolveAndCreateChild(bindings:List, [object Object])
:markdown :markdown
Creates a child injector and loads a new set of bindings into it. Creates a child injector and loads a new set of bindings into it.
A resolution is a process of flattening multiple nested lists and converting individual bindings into a A resolution is a process of flattening multiple nested lists and converting individual bindings into a

View File

@ -40,6 +40,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 get h3 get
@ -49,6 +50,7 @@ p.location-badge.
get(token) get(token)
:markdown :markdown
Retrieves a `Key` for a token. Retrieves a `Key` for a token.
@ -66,6 +68,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 numberOfKeys h3 numberOfKeys
@ -77,6 +80,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 token h3 token
@ -87,3 +91,4 @@ p.location-badge.

View File

@ -30,6 +30,7 @@ p.location-badge.
:markdown :markdown
Arguments (dependencies) to the `factory` function. Arguments (dependencies) to the `factory` function.
@ -41,6 +42,7 @@ p.location-badge.
:markdown :markdown
Factory function which can return an instance of an object represented by a key. Factory function which can return an instance of an object represented by a key.
@ -52,6 +54,7 @@ p.location-badge.
:markdown :markdown
A key, usually a `Type`. A key, usually a `Type`.
@ -63,6 +66,7 @@ p.location-badge.
:markdown :markdown
Specifies whether the `factory` function returns a `Promise`. Specifies whether the `factory` function returns a `Promise`.

View File

@ -54,3 +54,4 @@ p.location-badge.

View File

@ -38,3 +38,4 @@ p.location-badge.

View File

@ -40,3 +40,4 @@ p.location-badge.

View File

@ -40,3 +40,4 @@ p.location-badge.

View File

@ -37,6 +37,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 constructResolvingMessage h3 constructResolvingMessage
@ -48,6 +49,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 keys h3 keys
@ -59,6 +61,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 message h3 message
@ -70,6 +73,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 toString h3 toString
@ -84,3 +88,4 @@ p.location-badge.

View File

@ -36,6 +36,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 causeKey h3 causeKey
@ -46,3 +47,4 @@ p.location-badge.

View File

@ -33,6 +33,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 toString h3 toString
@ -47,3 +48,4 @@ p.location-badge.

View File

@ -36,6 +36,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 toString h3 toString
@ -50,3 +51,4 @@ p.location-badge.

View File

@ -21,7 +21,7 @@ p.location-badge.
``` ```
<ul> <ul>
<li *for="#error in errors; #i = index"> <li *for="#error of errors; #i = index">
Error {{i}} of {{errors.length}}: {{error.message}} Error {{i}} of {{errors.length}}: {{error.message}}
</li> </li>
</ul> </ul>
@ -41,7 +41,7 @@ p.location-badge.
pre.prettyprint pre.prettyprint
code. code.
constructor(viewContainer:ViewContainerRef) constructor(viewContainer:ViewContainerRef, protoViewRef: ProtoViewRef)
:markdown :markdown
@ -55,7 +55,7 @@ p.location-badge.
pre.prettyprint pre.prettyprint
code. code.
bulkInsert(tuples, viewContainer) bulkInsert(tuples, viewContainer, protoViewRef)
:markdown :markdown
@ -64,6 +64,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 bulkRemove h3 bulkRemove
@ -79,6 +80,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 iterableChanges h3 iterableChanges
@ -94,6 +96,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 perViewChange h3 perViewChange
@ -109,6 +112,19 @@ p.location-badge.
.l-sub-section
h3 protoViewRef
:markdown
.l-sub-section .l-sub-section
h3 viewContainer h3 viewContainer
@ -119,3 +135,4 @@ p.location-badge.

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/directives.html">angular2/directives</a> exported from <a href="/angular2/directives.html">angular2/directives</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/if.js#L33">angular2/src/directives/if.js (line 33)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/if.js#L34">angular2/src/directives/if.js (line 34)</a>
:markdown :markdown
Removes or recreates a portion of the DOM tree based on an {expression}. Removes or recreates a portion of the DOM tree based on an {expression}.
@ -32,7 +32,7 @@ p.location-badge.
pre.prettyprint pre.prettyprint
code. code.
constructor(viewContainer: ViewContainerRef) constructor(viewContainer: ViewContainerRef, protoViewRef:ProtoViewRef)
:markdown :markdown
@ -55,6 +55,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 prevCondition h3 prevCondition
@ -66,6 +67,19 @@ p.location-badge.
.l-sub-section
h3 protoViewRef
:markdown
.l-sub-section .l-sub-section
h3 viewContainer h3 viewContainer
@ -76,3 +90,4 @@ p.location-badge.

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/directives.html">angular2/directives</a> exported from <a href="/angular2/directives.html">angular2/directives</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L39">angular2/src/directives/switch.js (line 39)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L58">angular2/src/directives/switch.js (line 58)</a>
:markdown :markdown
The `Switch` directive is used to conditionally swap DOM structure on your template based on a The `Switch` directive is used to conditionally swap DOM structure on your template based on a
@ -58,3 +58,4 @@ p.location-badge.

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/directives.html">angular2/directives</a> exported from <a href="/angular2/directives.html">angular2/directives</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L187">angular2/src/directives/switch.js (line 187)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L211">angular2/src/directives/switch.js (line 211)</a>
:markdown :markdown
Defines a default case statement. Defines a default case statement.
@ -22,7 +22,7 @@ p.location-badge.
pre.prettyprint pre.prettyprint
code. code.
constructor(viewContainer: ViewContainerRef, sswitch: Switch) constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef, sswitch: Switch)
:markdown :markdown

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/directives.html">angular2/directives</a> exported from <a href="/angular2/directives.html">angular2/directives</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L152">angular2/src/directives/switch.js (line 152)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L172">angular2/src/directives/switch.js (line 172)</a>
:markdown :markdown
Defines a case statement as an expression. Defines a case statement as an expression.
@ -26,7 +26,7 @@ p.location-badge.
pre.prettyprint pre.prettyprint
code. code.
constructor(viewContainer: ViewContainerRef, sswitch: Switch) constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef, sswitch: Switch)
:markdown :markdown
@ -34,6 +34,22 @@ p.location-badge.
.l-sub-section
h3 onDestroy
pre.prettyprint
code.
onDestroy()
:markdown
.l-sub-section .l-sub-section
h3 when h3 when
@ -48,3 +64,4 @@ p.location-badge.

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/forms.html">angular2/forms</a> exported from <a href="/angular2/forms.html">angular2/forms</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L68">angular2/src/forms/directives.js (line 68)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L70">angular2/src/forms/directives.js (line 70)</a>
:markdown :markdown
The accessor for writing a value and listening to changes on a checkbox input element. The accessor for writing a value and listening to changes on a checkbox input element.
@ -39,6 +39,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 onChange h3 onChange
@ -50,6 +51,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 writeValue h3 writeValue
@ -64,3 +66,4 @@ p.location-badge.

View File

@ -39,3 +39,4 @@ p.location-badge.

View File

@ -45,6 +45,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 controls h3 controls
@ -56,6 +57,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 insert h3 insert
@ -71,6 +73,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 length h3 length
@ -82,6 +85,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 push h3 push
@ -97,6 +101,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 removeAt h3 removeAt
@ -111,3 +116,4 @@ p.location-badge.

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/forms.html">angular2/forms</a> exported from <a href="/angular2/forms.html">angular2/forms</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L125">angular2/src/forms/directives.js (line 125)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L127">angular2/src/forms/directives.js (line 127)</a>
:markdown :markdown
Binds a control to a DOM element. Binds a control to a DOM element.
@ -58,6 +58,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 onChange h3 onChange
@ -73,6 +74,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 validator h3 validator
@ -84,6 +86,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 valueAccessor h3 valueAccessor
@ -94,3 +97,4 @@ p.location-badge.

View File

@ -45,6 +45,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 controls h3 controls
@ -56,6 +57,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 exclude h3 exclude
@ -71,6 +73,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 include h3 include
@ -85,3 +88,4 @@ p.location-badge.

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/forms.html">angular2/forms</a> exported from <a href="/angular2/forms.html">angular2/forms</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L221">angular2/src/forms/directives.js (line 221)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L223">angular2/src/forms/directives.js (line 223)</a>
:markdown :markdown
Binds a control group to a DOM element. Binds a control group to a DOM element.
@ -72,6 +72,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 controlGroup h3 controlGroup
@ -87,6 +88,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 findControl h3 findControl
@ -101,3 +103,4 @@ p.location-badge.

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/forms.html">angular2/forms</a> exported from <a href="/angular2/forms.html">angular2/forms</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L35">angular2/src/forms/directives.js (line 35)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L37">angular2/src/forms/directives.js (line 37)</a>
:markdown :markdown
The default accessor for writing a value and listening to changes that is used by a <a href='Control-class.html'><code>Control</code></a> directive. The default accessor for writing a value and listening to changes that is used by a <a href='Control-class.html'><code>Control</code></a> directive.
@ -40,6 +40,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 value h3 value
@ -51,6 +52,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 writeValue h3 writeValue
@ -65,3 +67,4 @@ p.location-badge.

View File

@ -39,6 +39,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 control h3 control
@ -54,6 +55,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 group h3 group
@ -68,3 +70,4 @@ p.location-badge.

View File

@ -29,6 +29,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 compose h3 compose
@ -44,6 +45,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 group h3 group
@ -59,6 +61,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 nullValidator h3 nullValidator
@ -74,6 +77,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 required h3 required
@ -88,3 +92,4 @@ p.location-badge.

View File

@ -56,6 +56,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 supports h3 supports
@ -71,6 +72,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 transform h3 transform
@ -85,3 +87,4 @@ p.location-badge.

View File

@ -23,6 +23,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 supports h3 supports
@ -37,3 +38,4 @@ p.location-badge.

View File

@ -32,6 +32,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 item h3 item
@ -43,6 +44,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 previousIndex h3 previousIndex
@ -54,6 +56,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 toString h3 toString
@ -68,3 +71,4 @@ p.location-badge.

View File

@ -36,6 +36,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 collection h3 collection
@ -47,6 +48,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 forEachAddedItem h3 forEachAddedItem
@ -62,6 +64,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 forEachItem h3 forEachItem
@ -77,6 +80,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 forEachMovedItem h3 forEachMovedItem
@ -92,6 +96,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 forEachPreviousItem h3 forEachPreviousItem
@ -107,6 +112,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 forEachRemovedItem h3 forEachRemovedItem
@ -122,6 +128,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 isDirty h3 isDirty
@ -133,6 +140,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 length h3 length
@ -144,6 +152,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 supports h3 supports
@ -159,6 +168,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 supportsObj h3 supportsObj
@ -174,6 +184,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 toString h3 toString
@ -189,6 +200,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 transform h3 transform
@ -203,3 +215,4 @@ p.location-badge.

View File

@ -32,6 +32,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 key h3 key
@ -43,6 +44,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 previousValue h3 previousValue
@ -54,6 +56,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 toString h3 toString
@ -68,3 +71,4 @@ p.location-badge.

View File

@ -36,6 +36,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 forEachAddedItem h3 forEachAddedItem
@ -51,6 +52,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 forEachChangedItem h3 forEachChangedItem
@ -66,6 +68,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 forEachItem h3 forEachItem
@ -81,6 +84,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 forEachPreviousItem h3 forEachPreviousItem
@ -96,6 +100,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 forEachRemovedItem h3 forEachRemovedItem
@ -111,6 +116,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 isDirty h3 isDirty
@ -122,6 +128,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 supports h3 supports
@ -137,6 +144,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 supportsObj h3 supportsObj
@ -152,6 +160,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 toString h3 toString
@ -167,6 +176,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 transform h3 transform
@ -181,3 +191,4 @@ p.location-badge.

View File

@ -22,6 +22,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 supports h3 supports
@ -36,3 +37,4 @@ p.location-badge.

View File

@ -32,6 +32,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 supports h3 supports
@ -47,6 +48,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 supportsObj h3 supportsObj
@ -62,6 +64,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 transform h3 transform
@ -76,3 +79,4 @@ p.location-badge.

View File

@ -22,6 +22,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 supports h3 supports
@ -36,3 +37,4 @@ p.location-badge.

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/pipes.html">angular2/pipes</a> exported from <a href="/angular2/pipes.html">angular2/pipes</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/pipe.js#L32">angular2/src/change_detection/pipes/pipe.js (line 32)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/pipe.js#L52">angular2/src/change_detection/pipes/pipe.js (line 52)</a>
:markdown :markdown
An interface for extending the list of pipes known to Angular. An interface for extending the list of pipes known to Angular.
@ -39,6 +39,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 supports h3 supports
@ -54,6 +55,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 transform h3 transform
@ -68,3 +70,4 @@ p.location-badge.

View File

@ -4,7 +4,7 @@ p.location-badge.
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/router/router.js#L18">angular2/src/router/router.js (line 18)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/router/router.js#L18">angular2/src/router/router.js (line 18)</a>
:markdown :markdown
# Router ## Router
The router is responsible for mapping URLs to components. The router is responsible for mapping URLs to components.
You can see the state of the router by inspecting the read-only field `router.navigating`. You can see the state of the router by inspecting the read-only field `router.navigating`.
@ -41,6 +41,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 childRouter h3 childRouter
@ -50,6 +51,7 @@ p.location-badge.
childRouter(outletName = &#39;default&#39;) childRouter(outletName = &#39;default&#39;)
:markdown :markdown
Constructs a child router. You probably don't need to use this unless you're writing a reusable component. Constructs a child router. You probably don't need to use this unless you're writing a reusable component.
@ -65,9 +67,10 @@ p.location-badge.
config(path:string, component, alias:string=null) config(path:string, component, alias:string=null)
:markdown :markdown
Update the routing configuration and trigger a navigation. Update the routing configuration and trigger a navigation.
# Usage ### Usage
``` ```
router.config('/', SomeCmp); router.config('/', SomeCmp);
@ -86,6 +89,7 @@ p.location-badge.
generate(name:string, params:any) generate(name:string, params:any)
:markdown :markdown
Generate a URL from a component name and optional map of parameters. The URL is relative to the app's base href. Generate a URL from a component name and optional map of parameters. The URL is relative to the app's base href.
@ -107,6 +111,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 lastNavigationAttempt h3 lastNavigationAttempt
@ -118,6 +123,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 name h3 name
@ -129,6 +135,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 navigate h3 navigate
@ -138,6 +145,7 @@ p.location-badge.
navigate(url:string) navigate(url:string)
:markdown :markdown
Navigate to a URL. Returns a promise that resolves to the canonical URL for the route. Navigate to a URL. Returns a promise that resolves to the canonical URL for the route.
@ -155,6 +163,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 parent h3 parent
@ -166,6 +175,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 previousUrl h3 previousUrl
@ -177,6 +187,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 recognize h3 recognize
@ -186,6 +197,7 @@ p.location-badge.
recognize(url:string) recognize(url:string)
:markdown :markdown
Given a URL, returns an instruction representing the component graph Given a URL, returns an instruction representing the component graph
@ -201,6 +213,7 @@ p.location-badge.
registerOutlet(outlet:RouterOutlet, name = &#39;default&#39;) registerOutlet(outlet:RouterOutlet, name = &#39;default&#39;)
:markdown :markdown
Register an object to notify of route changes. You probably don't need to use this unless you're writing a reusable component. Register an object to notify of route changes. You probably don't need to use this unless you're writing a reusable component.
@ -216,6 +229,7 @@ p.location-badge.
renavigate() renavigate()
:markdown :markdown
Navigates to either the last URL successfully navigated to, or the last URL requested if the router has yet to successfully navigate. Navigates to either the last URL successfully navigated to, or the last URL requested if the router has yet to successfully navigate.
@ -231,6 +245,7 @@ p.location-badge.
subscribe(onNext) subscribe(onNext)
:markdown :markdown
Subscribe to URL updates from the router Subscribe to URL updates from the router
@ -251,3 +266,4 @@ p.location-badge.

View File

@ -30,7 +30,7 @@ p.location-badge.
pre.prettyprint pre.prettyprint
code. code.
constructor(ngEl:NgElement, router:Router) constructor(elementRef:ElementRef, router:Router)
:markdown :markdown
@ -53,6 +53,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 route h3 route
@ -68,6 +69,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 updateHref h3 updateHref
@ -82,3 +84,4 @@ p.location-badge.

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/test.html">angular2/test</a> exported from <a href="/angular2/test.html">angular2/test</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/test_lib/test_bed.js#L19">angular2/src/test_lib/test_bed.js (line 19)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/test_lib/test_bed.js#L20">angular2/src/test_lib/test_bed.js (line 20)</a>
:markdown :markdown
@ -30,6 +30,7 @@ p.location-badge.
createView(component: Type, {context = null, html = null}: {context:any, html: string} = {}, [object Object], [object Object], [object Object]) createView(component: Type, {context = null, html = null}: {context:any, html: string} = {}, [object Object], [object Object], [object Object])
:markdown :markdown
Creates an `AppView` for the given component. Creates an `AppView` for the given component.
Only either a component or a context needs to be specified but both can be provided for Only either a component or a context needs to be specified but both can be provided for
@ -49,6 +50,7 @@ p.location-badge.
overrideDirective(component: Type, from: Type, to: Type, [object Object], [object Object], [object Object]) overrideDirective(component: Type, from: Type, to: Type, [object Object], [object Object], [object Object])
:markdown :markdown
Overrides the directives from the component <a href='../annotations/View-class.html'><code>View</code></a>. Overrides the directives from the component <a href='../annotations/View-class.html'><code>View</code></a>.
@ -65,6 +67,7 @@ p.location-badge.
overrideView(component: Type, template: View, [object Object], [object Object]) overrideView(component: Type, template: View, [object Object], [object Object])
:markdown :markdown
Overrides the <a href='../annotations/View-class.html'><code>View</code></a> of a <a href='../annotations/Component-class.html'><code>Component</code></a>. Overrides the <a href='../annotations/View-class.html'><code>View</code></a> of a <a href='../annotations/Component-class.html'><code>Component</code></a>.
@ -81,6 +84,7 @@ p.location-badge.
setInlineTemplate(component: Type, html: string, [object Object], [object Object]) setInlineTemplate(component: Type, html: string, [object Object], [object Object])
:markdown :markdown
Overrides only the html of a <a href='../annotations/Component-class.html'><code>Component</code></a>. Overrides only the html of a <a href='../annotations/Component-class.html'><code>Component</code></a>.
All the other propoerties of the component's <a href='../annotations/View-class.html'><code>View</code></a> are preserved. All the other propoerties of the component's <a href='../annotations/View-class.html'><code>View</code></a> are preserved.

View File

@ -41,6 +41,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 add h3 add
@ -56,6 +57,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 fireCallbacks h3 fireCallbacks
@ -71,6 +73,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 onChange h3 onChange
@ -86,6 +89,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 removeCallback h3 removeCallback
@ -101,6 +105,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 reset h3 reset
@ -115,3 +120,4 @@ p.location-badge.

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a> 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/compiler.js#L46">angular2/src/core/compiler/compiler.js (line 46)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/compiler.js#L47">angular2/src/core/compiler/compiler.js (line 47)</a>
:markdown :markdown
@ -36,6 +36,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 compile h3 compile
@ -51,6 +52,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 compileInHost h3 compileInHost
@ -65,3 +67,4 @@ p.location-badge.

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a> 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> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/dynamic_component_loader.js#L10">angular2/src/core/compiler/dynamic_component_loader.js (line 10)</a>
:markdown :markdown
@ -13,7 +13,7 @@ p.location-badge.
pre.prettyprint pre.prettyprint
code. code.
constructor(location:ElementRef, instance:any, componentView:AppView, dispose:Function) constructor(location:ElementRef, instance:any, dispose:Function)
:markdown :markdown
@ -21,17 +21,6 @@ p.location-badge.
.l-sub-section
h3 componentView
:markdown
.l-sub-section .l-sub-section
h3 dispose h3 dispose
@ -47,6 +36,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 hostView h3 hostView
@ -58,16 +48,6 @@ p.location-badge.
.l-sub-section
h3 injector
:markdown
.l-sub-section .l-sub-section
h3 instance h3 instance
@ -80,6 +60,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 location h3 location
@ -90,3 +71,4 @@ p.location-badge.

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a> 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#L44">angular2/src/core/compiler/dynamic_component_loader.js (line 44)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/dynamic_component_loader.js#L37">angular2/src/core/compiler/dynamic_component_loader.js (line 37)</a>
:markdown :markdown
Service for dynamically loading a Component into an arbitrary position in the internal Angular Service for dynamically loading a Component into an arbitrary position in the internal Angular
@ -32,6 +32,7 @@ p.location-badge.
loadIntoExistingLocation(typeOrBinding, location:ElementRef, injector:Injector = null) loadIntoExistingLocation(typeOrBinding, location:ElementRef, injector:Injector = null)
:markdown :markdown
Loads a component into the location given by the provided ElementRef. The loaded component 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. receives injection as if it in the place of the provided ElementRef.
@ -48,6 +49,7 @@ p.location-badge.
loadIntoNewLocation(typeOrBinding, parentComponentLocation:ElementRef, elementOrSelector:any, injector:Injector = null) loadIntoNewLocation(typeOrBinding, parentComponentLocation:ElementRef, elementOrSelector:any, injector:Injector = null)
:markdown :markdown
Loads a component in the element specified by elementOrSelector. The loaded component receives Loads a component in the element specified by elementOrSelector. The loaded component receives
injection normally as a hosted view. injection normally as a hosted view.
@ -64,6 +66,7 @@ p.location-badge.
loadNextToExistingLocation(typeOrBinding, location:ElementRef, injector:Injector = null) loadNextToExistingLocation(typeOrBinding, location:ElementRef, injector:Injector = null)
:markdown :markdown
Loads a component next to the provided ElementRef. The loaded component receives Loads a component next to the provided ElementRef. The loaded component receives
injection normally as a hosted view. injection normally as a hosted view.

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a> 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_injector.js#L28">angular2/src/core/compiler/element_injector.js (line 28)</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>
:markdown :markdown
@ -13,7 +13,7 @@ p.location-badge.
pre.prettyprint pre.prettyprint
code. code.
constructor(elementInjector, hostView, boundElementIndex, injector, viewManager, defaultProtoView) constructor(parentView:ViewRef, boundElementIndex:number)
:markdown :markdown
@ -32,8 +32,39 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 elementInjector h3 domElement
:markdown
Exposes the underlying DOM element.
(DEPRECATED way of accessing the DOM, replacement coming)
.l-sub-section
h3 getAttribute
pre.prettyprint
code.
getAttribute(name:string)
:markdown
Gets an attribute from the underlying DOM element.
(DEPRECATED way of accessing the DOM, replacement coming)
.l-sub-section
h3 parentView
:markdown :markdown
@ -43,35 +74,3 @@ p.location-badge.
.l-sub-section
h3 hostView
:markdown
.l-sub-section
h3 injector
:markdown
.l-sub-section
h3 viewContainer
:markdown

View File

@ -0,0 +1,22 @@
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>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(protoView)
:markdown

View File

@ -10,7 +10,7 @@ p.location-badge.
The directives are kept in depth-first pre-order traversal of the DOM. 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 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"` viewport. template with `*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. callbacks.
@ -84,6 +84,7 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 removeCallback h3 removeCallback
@ -98,3 +99,4 @@ p.location-badge.

View File

@ -1,217 +0,0 @@
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_container.js#L12">angular2/src/core/compiler/view_container.js (line 12)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(parentView: viewModule.AppView, defaultProtoView: viewModule.AppProtoView, elementInjector: eiModule.ElementInjector)
:markdown
.l-sub-section
h3 clear
pre.prettyprint
code.
clear()
:markdown
.l-sub-section
h3 create
pre.prettyprint
code.
create(atIndex:number=-1, protoView:viewModule.AppProtoView = null, injector:Injector = null)
:markdown
.l-sub-section
h3 defaultProtoView
:markdown
.l-sub-section
h3 detach
pre.prettyprint
code.
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 elementInjector
:markdown
.l-sub-section
h3 get
pre.prettyprint
code.
get(index: number)
:markdown
.l-sub-section
h3 getRender
pre.prettyprint
code.
getRender()
:markdown
.l-sub-section
h3 hydrated
pre.prettyprint
code.
hydrated()
:markdown
.l-sub-section
h3 indexOf
pre.prettyprint
code.
indexOf(view:viewModule.AppView)
:markdown
.l-sub-section
h3 insert
pre.prettyprint
code.
insert(view:viewModule.AppView, atIndex:number=-1)
:markdown
.l-sub-section
h3 internalClearWithoutRender
pre.prettyprint
code.
internalClearWithoutRender()
:markdown
.l-sub-section
h3 length
:markdown
.l-sub-section
h3 parentView
:markdown
.l-sub-section
h3 remove
pre.prettyprint
code.
remove(atIndex:number=-1)
:markdown

View File

@ -0,0 +1,50 @@
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>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(view:viewModule.AppView)
:markdown
.l-sub-section
h3 render
:markdown
.l-sub-section
h3 setLocal
pre.prettyprint
code.
setLocal(contextName: string, value:any)
:markdown

View File

@ -24,8 +24,12 @@
"title" : "QueryList Class" "title" : "QueryList Class"
}, },
"ViewContainerRef-class" : { "ViewRef-class" : {
"title" : "ViewContainerRef Class" "title" : "ViewRef Class"
},
"ProtoViewRef-class" : {
"title" : "ProtoViewRef Class"
}, },
"BaseQueryList-class" : { "BaseQueryList-class" : {

View File

@ -22,6 +22,7 @@
background: lighten($steel, 3%); background: lighten($steel, 3%);
color: $tin; color: $tin;
font-weight: 500; font-weight: 500;
text-transform: none;
&.is-selected { &.is-selected {
background: $blueberry; background: $blueberry;

View File

@ -58,6 +58,18 @@ angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDial
$scope.language = 'es5'; $scope.language = 'es5';
var $codeBoxes = $('.code-box'); var $codeBoxes = $('.code-box');
var getTabName = function(name) {
var prettyName = name;
switch(name) {
case 'es5': prettyName = 'ES5'; break;
case 'typescript': prettyName = 'TypeScript'; break;
default: prettyName = name;
}
return prettyName;
};
if($codeBoxes.length) { if($codeBoxes.length) {
//UPDATE ALL CODE BOXES //UPDATE ALL CODE BOXES
$codeBoxes.each(function(index, codeBox) { $codeBoxes.each(function(index, codeBox) {
@ -77,8 +89,9 @@ angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDial
$examples.each(function(index, example) { $examples.each(function(index, example) {
var $example = $(example); var $example = $(example);
var name = $example.data('name'); var name = $example.data('name');
var tabName = getTabName(name);
var selected = (index === 0) ? 'is-selected' : ''; var selected = (index === 0) ? 'is-selected' : '';
var $button = $("<button class='button " + selected + "' data-name='" + name + "'>" + name+ "</button>"); var $button = $("<button class='button " + selected + "' data-name='" + name + "'>" + tabName + "</button>");
// ADD EVENTS FOR CODE SNIPPETS // ADD EVENTS FOR CODE SNIPPETS
$button.on('click', function(e) { $button.on('click', function(e) {