merge with master
This commit is contained in:
commit
d4086a71bb
|
@ -1,5 +1,11 @@
|
|||
textFormat = ''
|
||||
|
||||
if current.path[4] && current.path[3] == 'api'
|
||||
textFormat = 'is-standard-case'
|
||||
|
||||
|
||||
header(class="hero background-sky")
|
||||
h1.hero-title.text-display-1 #{title}
|
||||
h1(class="hero-title text-display-1 #{textFormat}") #{title}
|
||||
|
||||
if subtitle
|
||||
h2.hero-subtitle.text-subhead #{subtitle}
|
||||
|
|
|
@ -11,9 +11,10 @@
|
|||
.l-main-section
|
||||
h2 <span class="icon-play-circle-outline"></span> Videos
|
||||
|
||||
h4 Intro to building Apps
|
||||
h4 Intro Vidoes
|
||||
ul
|
||||
li <a href="https://www.youtube.com/watch?v=uD6Okha_Yj0">Building a Todo App</a> by David East
|
||||
li <a href="https://www.youtube.com/watch?v=4C4bmDOV5hk">Angular 2 Forms</a> by David East
|
||||
|
||||
h4 ng-conf
|
||||
ul
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
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/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
|
||||
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.
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[dependency]',
|
||||
properties: {
|
||||
'id':'dependency'
|
||||
|
@ -25,7 +25,7 @@ p.location-badge.
|
|||
}
|
||||
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[my-directive]'
|
||||
})
|
||||
class Dependency {
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
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#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
|
||||
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:
|
||||
|
||||
```javascript
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: `input'
|
||||
})
|
||||
class InputDecorator {
|
||||
class InputDirective {
|
||||
constructor(@Attribute('type') type) {
|
||||
// type would be `text` in this example
|
||||
}
|
||||
|
@ -50,6 +50,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -61,6 +62,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
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#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
|
||||
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
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
|
@ -52,7 +97,8 @@ p.location-badge.
|
|||
hostProperties,
|
||||
injectables,
|
||||
lifecycle,
|
||||
changeDetection = DEFAULT
|
||||
changeDetection = DEFAULT,
|
||||
compileChildren = true,
|
||||
}:{
|
||||
selector:string,
|
||||
properties:Object,
|
||||
|
@ -61,7 +107,8 @@ p.location-badge.
|
|||
hostProperties:any,
|
||||
injectables:List,
|
||||
lifecycle:List,
|
||||
changeDetection:string
|
||||
changeDetection:string,
|
||||
compileChildren:boolean
|
||||
}={})
|
||||
|
||||
:markdown
|
||||
|
@ -75,6 +122,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
Defines the used change detection strategy.
|
||||
|
||||
When a component is instantiated, Angular creates a change detector, which is responsible for propagating
|
||||
|
@ -92,6 +140,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
Defines the set of injectable objects that are visible to a Component and its children.
|
||||
|
||||
The `injectables` defined in the Component annotation allow you to configure a set of bindings for the component's
|
||||
|
|
|
@ -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.
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,13 +1,12 @@
|
|||
|
||||
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#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
|
||||
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>
|
||||
or <a href='Viewport-class.html'><code>Viewport</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.
|
||||
|
||||
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:
|
||||
|
@ -52,8 +51,8 @@ p.location-badge.
|
|||
- `@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:
|
||||
- `element: NgElement` to obtain a DOM element (DEPRECATED: replacement coming)
|
||||
- `viewContainer: ViewContainerRef` to control child template instantiation, for <a href='Viewport-class.html'><code>Viewport</code></a> directives only
|
||||
- `element: ElementRef` to obtain a reference to logical element in the view.
|
||||
- `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.
|
||||
|
||||
## Example
|
||||
|
@ -83,7 +82,7 @@ p.location-badge.
|
|||
class SomeService {
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[dependency]',
|
||||
properties: {
|
||||
'id':'dependency'
|
||||
|
@ -102,7 +101,7 @@ p.location-badge.
|
|||
Here the constructor is declared with no arguments, therefore nothing is injected into `MyDirective`.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
@Directive({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor() {
|
||||
}
|
||||
|
@ -119,7 +118,7 @@ p.location-badge.
|
|||
Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type from the parent
|
||||
component's injector.
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
@Directive({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(someService: SomeService) {
|
||||
}
|
||||
|
@ -134,7 +133,7 @@ p.location-badge.
|
|||
Directives can inject other directives declared on the current element.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
@Directive({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(dependency: Dependency) {
|
||||
expect(dependency.id).toEqual(3);
|
||||
|
@ -151,7 +150,7 @@ p.location-badge.
|
|||
the dependency.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
@Directive({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Parent() dependency: Dependency) {
|
||||
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.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
@Directive({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Ancestor() dependency: Dependency) {
|
||||
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
|
||||
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
|
||||
<a href='Viewport-class.html'><code>Viewport</code></a> directive such as a `for`, an `if`, or a `switch`.
|
||||
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
|
||||
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 {
|
||||
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.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
@Directive({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
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.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
@Directive({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
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
|
||||
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
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
|
@ -247,14 +379,16 @@ p.location-badge.
|
|||
events,
|
||||
hostListeners,
|
||||
hostProperties,
|
||||
lifecycle
|
||||
lifecycle,
|
||||
compileChildren = true,
|
||||
}:{
|
||||
selector:string,
|
||||
properties:any,
|
||||
events:List,
|
||||
hostListeners: any,
|
||||
hostProperties: any,
|
||||
lifecycle:List
|
||||
lifecycle:List,
|
||||
compileChildren:boolean
|
||||
}={})
|
||||
|
||||
: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
|
||||
h3 events
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
Enumerates the set of emitted events.
|
||||
|
||||
## Syntax
|
||||
|
@ -302,6 +449,7 @@ p.location-badge.
|
|||
hasLifecycleHook(hook:string)
|
||||
|
||||
:markdown
|
||||
|
||||
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.
|
||||
|
@ -315,6 +463,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
Specifies which DOM hostListeners a directive listens to.
|
||||
|
||||
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:
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: 'input',
|
||||
hostListeners: {
|
||||
'change': 'onChange($event)',
|
||||
'window:resize': 'onResize($event)'
|
||||
}
|
||||
})
|
||||
class InputDecorator {
|
||||
class InputDirective {
|
||||
onChange(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
|
||||
|
||||
Specifies which DOM properties a directives updates.
|
||||
|
||||
## Syntax
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: 'input',
|
||||
hostProperties: {
|
||||
'value': 'value'
|
||||
}
|
||||
})
|
||||
class InputDecorator {
|
||||
class InputDirective {
|
||||
value:string;
|
||||
}
|
||||
|
||||
|
@ -404,6 +554,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
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.
|
||||
|
@ -417,6 +568,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
Enumerates the set of properties that accept data binding for a directive.
|
||||
|
||||
The `properties` property defines a set of `directiveProperty` to `bindingProperty`
|
||||
|
@ -448,7 +600,7 @@ p.location-badge.
|
|||
with standard Angular syntax. For example:
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[tooltip]',
|
||||
properties: {
|
||||
'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.
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[class-set]',
|
||||
properties: {
|
||||
'classChanges': 'classSet | keyValDiff'
|
||||
|
@ -514,6 +666,7 @@ p.location-badge.
|
|||
|
||||
|
||||
: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.
|
||||
|
|
|
@ -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>.
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
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/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
|
||||
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.
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[dependency]',
|
||||
properties: {
|
||||
'id':'dependency'
|
||||
|
@ -22,7 +22,7 @@ p.location-badge.
|
|||
}
|
||||
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[my-directive]'
|
||||
})
|
||||
class Dependency {
|
||||
|
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
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#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
|
||||
Specifies that a <a href='../view/QueryList-class.html'><code>QueryList</code></a> should be injected.
|
||||
|
@ -29,6 +29,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
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/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
|
||||
Declares the available HTML templates for an application.
|
||||
|
@ -64,6 +64,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
Specifies a list of directives that can be used within a template.
|
||||
|
||||
Directives must be listed explicitly to provide proper component encapsulation.
|
||||
|
@ -94,6 +95,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
Specify a custom renderer for this View.
|
||||
If this is set, neither `template`, `templateURL` nor `directives` are used.
|
||||
|
||||
|
@ -106,6 +108,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
Specifies an inline template for an angular component.
|
||||
|
||||
NOTE: either `templateUrl` or `template` should be used, but not both.
|
||||
|
@ -119,6 +122,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
Specifies a template URL for an angular component.
|
||||
|
||||
NOTE: either `templateUrl` or `template` should be used, but not both.
|
||||
|
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"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='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" : {
|
||||
|
@ -12,18 +12,6 @@
|
|||
"title" : "Component Class"
|
||||
},
|
||||
|
||||
"DynamicComponent-class" : {
|
||||
"title" : "DynamicComponent Class"
|
||||
},
|
||||
|
||||
"Decorator-class" : {
|
||||
"title" : "Decorator Class"
|
||||
},
|
||||
|
||||
"Viewport-class" : {
|
||||
"title" : "Viewport Class"
|
||||
},
|
||||
|
||||
"onDestroy-var" : {
|
||||
"title" : "onDestroy Var"
|
||||
},
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
## Example:
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[class-set]',
|
||||
lifecycle: [onAllChangesDone]
|
||||
})
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
## Example:
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[class-set]',
|
||||
properties: {
|
||||
'propA': 'propA'
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
## Example
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
@Directive({
|
||||
...,
|
||||
lifecycle: [onDestroy]
|
||||
})
|
||||
|
|
|
@ -35,6 +35,7 @@ p.location-badge.
|
|||
createProtoChangeDetector(name:string, changeControlStrategy:string=DEFAULT)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -34,6 +34,7 @@ p.location-badge.
|
|||
detach()
|
||||
|
||||
:markdown
|
||||
|
||||
Detaches the change detector from the change detector tree.
|
||||
|
||||
The detached change detector will not be checked until it is reattached.
|
||||
|
@ -51,6 +52,7 @@ p.location-badge.
|
|||
reattach()
|
||||
|
||||
:markdown
|
||||
|
||||
Reattach the change detector to the change detector tree.
|
||||
|
||||
This also requests a check of this change detector. This reattached change detector will be checked during the
|
||||
|
@ -69,6 +71,7 @@ p.location-badge.
|
|||
requestCheck()
|
||||
|
||||
:markdown
|
||||
|
||||
Request to check all ON_PUSH ancestors.
|
||||
|
||||
|
||||
|
|
|
@ -33,6 +33,7 @@ p.location-badge.
|
|||
createProtoChangeDetector(name:string, changeControlStrategy:string = DEFAULT)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -44,6 +45,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -33,6 +33,7 @@ p.location-badge.
|
|||
createProtoChangeDetector(name:string, changeControlStrategy:string = DEFAULT)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -44,6 +45,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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
|
||||
h3 tick
|
||||
|
||||
|
@ -65,6 +50,7 @@ p.location-badge.
|
|||
tick()
|
||||
|
||||
:markdown
|
||||
|
||||
Invoke this method to explicitly process change detection and its side-effects.
|
||||
|
||||
In development mode, `tick()` also performs a second change detection cycle to ensure that no further
|
||||
|
|
|
@ -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/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
|
||||
Provides a hook for centralized exception handling.
|
||||
|
@ -41,6 +41,7 @@ p.location-badge.
|
|||
call(error, stackTrace = null, reason = null)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -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_container_ref.js#L11">angular2/src/core/compiler/view_container_ref.js (line 11)</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#L12">angular2/src/core/compiler/view_container_ref.js (line 12)</a>
|
||||
|
||||
:markdown
|
||||
|
||||
|
@ -13,7 +13,7 @@ p.location-badge.
|
|||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(viewManager: avmModule.AppViewManager, location: eiModule.ElementRef, defaultProtoView: viewModule.AppProtoView)
|
||||
constructor(viewManager: avmModule.AppViewManager, element: ElementRef)
|
||||
|
||||
:markdown
|
||||
|
||||
|
@ -30,6 +30,7 @@ p.location-badge.
|
|||
clear()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -42,9 +43,10 @@ p.location-badge.
|
|||
|
||||
pre.prettyprint
|
||||
code.
|
||||
create(atIndex:number=-1, protoView:viewModule.AppProtoView = null, injector:Injector = null)
|
||||
create(protoViewRef:ProtoViewRef = null, atIndex:number=-1, injector:Injector = null)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -60,6 +62,7 @@ p.location-badge.
|
|||
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.
|
||||
|
||||
|
@ -76,6 +79,7 @@ p.location-badge.
|
|||
get(index: number)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -88,9 +92,10 @@ p.location-badge.
|
|||
|
||||
pre.prettyprint
|
||||
code.
|
||||
indexOf(view:viewModule.AppView)
|
||||
indexOf(viewRef:ViewRef)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -103,9 +108,10 @@ p.location-badge.
|
|||
|
||||
pre.prettyprint
|
||||
code.
|
||||
insert(view:viewModule.AppView, atIndex:number=-1)
|
||||
insert(viewRef:ViewRef, atIndex:number=-1)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -117,6 +123,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -132,6 +139,7 @@ p.location-badge.
|
|||
remove(atIndex:number=-1)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
|
@ -41,6 +41,7 @@ p.location-badge.
|
|||
initCallbacks({onTurnStart, onTurnDone, onScheduleMicrotask, onErrorHandler} = {}, [object Object], [object Object], [object Object], [object Object])
|
||||
|
||||
:markdown
|
||||
|
||||
Initializes the zone hooks.
|
||||
|
||||
|
||||
|
@ -57,6 +58,7 @@ p.location-badge.
|
|||
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
|
||||
|
@ -83,6 +85,7 @@ p.location-badge.
|
|||
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
|
||||
|
|
|
@ -8,8 +8,8 @@
|
|||
"title" : "bootstrap Function"
|
||||
},
|
||||
|
||||
"NgElement-class" : {
|
||||
"title" : "NgElement Class"
|
||||
"ViewContainerRef-class" : {
|
||||
"title" : "ViewContainerRef Class"
|
||||
},
|
||||
|
||||
"ExceptionHandler-class" : {
|
||||
|
|
|
@ -46,6 +46,7 @@ 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.
|
||||
|
||||
|
@ -75,6 +76,7 @@ p.location-badge.
|
|||
resolve()
|
||||
|
||||
:markdown
|
||||
|
||||
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.
|
||||
|
@ -88,6 +90,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
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
|
||||
|
@ -128,6 +131,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
Binds a key to a function which computes the value asynchronously.
|
||||
|
||||
|
||||
|
@ -159,6 +163,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
Binds an interface to an implementation / subclass.
|
||||
|
||||
|
||||
|
@ -196,6 +201,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
Binds a key to a function which computes the value.
|
||||
|
||||
|
||||
|
@ -220,6 +226,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
Binds a key to a value.
|
||||
|
||||
|
||||
|
@ -241,6 +248,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
Token used when retrieving this binding. Usually the `Type`.
|
||||
|
||||
|
||||
|
|
|
@ -31,6 +31,7 @@ p.location-badge.
|
|||
toAlias(aliasToken)
|
||||
|
||||
:markdown
|
||||
|
||||
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
|
||||
|
@ -75,6 +76,7 @@ p.location-badge.
|
|||
toAsyncFactory(factoryFunction:Function, dependencies:List = null)
|
||||
|
||||
:markdown
|
||||
|
||||
Binds a key to a function which computes the value asynchronously.
|
||||
|
||||
|
||||
|
@ -109,6 +111,7 @@ p.location-badge.
|
|||
toClass(type:Type)
|
||||
|
||||
:markdown
|
||||
|
||||
Binds an interface to an implementation / subclass.
|
||||
|
||||
|
||||
|
@ -150,6 +153,7 @@ p.location-badge.
|
|||
toFactory(factoryFunction:Function, dependencies:List = null)
|
||||
|
||||
:markdown
|
||||
|
||||
Binds a key to a function which computes the value.
|
||||
|
||||
|
||||
|
@ -177,6 +181,7 @@ p.location-badge.
|
|||
toValue(value)
|
||||
|
||||
:markdown
|
||||
|
||||
Binds a key to a value.
|
||||
|
||||
|
||||
|
@ -198,6 +203,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -64,6 +64,7 @@ p.location-badge.
|
|||
asyncGet(token, [object Object])
|
||||
|
||||
:markdown
|
||||
|
||||
Retrieves an instance from the injector asynchronously. Used with asynchronous bindings.
|
||||
|
||||
|
||||
|
@ -80,6 +81,7 @@ p.location-badge.
|
|||
createChildFromResolved(bindings:List<ResolvedBinding>, [object Object])
|
||||
|
||||
:markdown
|
||||
|
||||
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<ResolvedBinding>, {defaultBindings=false}={}, [object Object], [object Object])
|
||||
|
||||
:markdown
|
||||
|
||||
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.
|
||||
|
||||
|
@ -113,6 +116,7 @@ p.location-badge.
|
|||
get(token, [object Object])
|
||||
|
||||
:markdown
|
||||
|
||||
Retrieves an instance from the injector.
|
||||
|
||||
|
||||
|
@ -129,6 +133,7 @@ p.location-badge.
|
|||
getOptional(token, [object Object])
|
||||
|
||||
:markdown
|
||||
|
||||
Retrieves an instance from the injector.
|
||||
|
||||
|
||||
|
@ -145,6 +150,7 @@ p.location-badge.
|
|||
resolve(bindings:List, [object Object])
|
||||
|
||||
:markdown
|
||||
|
||||
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
|
||||
|
@ -165,6 +171,7 @@ p.location-badge.
|
|||
resolveAndCreate(bindings:List, {defaultBindings=false}={}, [object Object], [object Object])
|
||||
|
||||
:markdown
|
||||
|
||||
Resolves bindings and creates an injector based on those bindings. This function is slower than the
|
||||
corresponding `fromResolvedBindings` because it needs to resolve bindings first. See `resolve` for the
|
||||
<a href='Injector-class.html'><code>Injector</code></a>.
|
||||
|
@ -185,6 +192,7 @@ p.location-badge.
|
|||
resolveAndCreateChild(bindings:List, [object Object])
|
||||
|
||||
:markdown
|
||||
|
||||
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
|
||||
|
|
|
@ -34,6 +34,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -49,6 +50,7 @@ p.location-badge.
|
|||
get(token)
|
||||
|
||||
:markdown
|
||||
|
||||
Retrieves a `Key` for a token.
|
||||
|
||||
|
||||
|
@ -60,6 +62,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -71,6 +74,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -82,6 +86,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -30,6 +30,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
Arguments (dependencies) to the `factory` function.
|
||||
|
||||
|
||||
|
@ -41,6 +42,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
Factory function which can return an instance of an object represented by a key.
|
||||
|
||||
|
||||
|
@ -52,6 +54,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
A key, usually a `Type`.
|
||||
|
||||
|
||||
|
@ -63,6 +66,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
Specifies whether the `factory` function returns a `Promise`.
|
||||
|
||||
|
||||
|
|
|
@ -49,6 +49,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -33,6 +33,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -35,6 +35,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -35,6 +35,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -31,6 +31,7 @@ p.location-badge.
|
|||
addKey(key)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -42,6 +43,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -53,6 +55,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -64,6 +67,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -79,6 +83,7 @@ p.location-badge.
|
|||
toString()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -30,6 +30,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -41,6 +42,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -27,6 +27,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -42,6 +43,7 @@ p.location-badge.
|
|||
toString()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -30,6 +30,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -45,6 +46,7 @@ p.location-badge.
|
|||
toString()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -21,7 +21,7 @@ p.location-badge.
|
|||
|
||||
```
|
||||
<ul>
|
||||
<li *for="#error in errors; #i = index">
|
||||
<li *for="#error of errors; #i = index">
|
||||
Error {{i}} of {{errors.length}}: {{error.message}}
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -41,7 +41,7 @@ p.location-badge.
|
|||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(viewContainer:ViewContainerRef)
|
||||
constructor(viewContainer:ViewContainerRef, protoViewRef: ProtoViewRef)
|
||||
|
||||
:markdown
|
||||
|
||||
|
@ -55,9 +55,10 @@ p.location-badge.
|
|||
|
||||
pre.prettyprint
|
||||
code.
|
||||
bulkInsert(tuples, viewContainer)
|
||||
bulkInsert(tuples, viewContainer, protoViewRef)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -73,6 +74,7 @@ p.location-badge.
|
|||
bulkRemove(tuples, viewContainer)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -88,6 +90,7 @@ p.location-badge.
|
|||
iterableChanges(changes)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -103,6 +106,19 @@ p.location-badge.
|
|||
perViewChange(view, record)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 protoViewRef
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -114,6 +130,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
Removes or recreates a portion of the DOM tree based on an {expression}.
|
||||
|
@ -32,7 +32,7 @@ p.location-badge.
|
|||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(viewContainer: ViewContainerRef)
|
||||
constructor(viewContainer: ViewContainerRef, protoViewRef:ProtoViewRef)
|
||||
|
||||
:markdown
|
||||
|
||||
|
@ -49,6 +49,7 @@ p.location-badge.
|
|||
condition(newCondition)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -60,6 +61,19 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 protoViewRef
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -71,6 +85,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
The `Switch` directive is used to conditionally swap DOM structure on your template based on a
|
||||
|
@ -53,6 +53,7 @@ p.location-badge.
|
|||
value(value)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
Defines a default case statement.
|
||||
|
@ -22,7 +22,7 @@ p.location-badge.
|
|||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(viewContainer: ViewContainerRef, sswitch: Switch)
|
||||
constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef, sswitch: Switch)
|
||||
|
||||
:markdown
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
Defines a case statement as an expression.
|
||||
|
@ -26,7 +26,7 @@ p.location-badge.
|
|||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(viewContainer: ViewContainerRef, sswitch: Switch)
|
||||
constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef, sswitch: Switch)
|
||||
|
||||
:markdown
|
||||
|
||||
|
@ -34,6 +34,22 @@ p.location-badge.
|
|||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 onDestroy
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
onDestroy()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 when
|
||||
|
||||
|
@ -43,6 +59,7 @@ p.location-badge.
|
|||
when(value)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
The accessor for writing a value and listening to changes on a checkbox input element.
|
||||
|
@ -33,6 +33,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -44,6 +45,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -59,6 +61,7 @@ p.location-badge.
|
|||
writeValue(value)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -34,6 +34,7 @@ p.location-badge.
|
|||
updateValue(value:any)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -39,6 +39,7 @@ p.location-badge.
|
|||
at(index:number)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -50,6 +51,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -65,6 +67,7 @@ p.location-badge.
|
|||
insert(index:number, control:AbstractControl)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -76,6 +79,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -91,6 +95,7 @@ p.location-badge.
|
|||
push(control:AbstractControl)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -106,6 +111,7 @@ p.location-badge.
|
|||
removeAt(index:number)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
Binds a control to a DOM element.
|
||||
|
@ -52,6 +52,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -67,6 +68,7 @@ p.location-badge.
|
|||
onChange(_)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -78,6 +80,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -89,6 +92,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -39,6 +39,7 @@ p.location-badge.
|
|||
contains(controlName:string)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -50,6 +51,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -65,6 +67,7 @@ p.location-badge.
|
|||
exclude(controlName:string)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -80,6 +83,7 @@ p.location-badge.
|
|||
include(controlName:string)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
Binds a control group to a DOM element.
|
||||
|
@ -66,6 +66,7 @@ p.location-badge.
|
|||
addDirective(c:ControlDirective)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -81,6 +82,7 @@ p.location-badge.
|
|||
controlGroup(controlGroup)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -96,6 +98,7 @@ p.location-badge.
|
|||
findControl(name:string)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
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.
|
||||
|
@ -34,6 +34,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -45,6 +46,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -60,6 +62,7 @@ p.location-badge.
|
|||
writeValue(value)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -33,6 +33,7 @@ p.location-badge.
|
|||
array(controlsConfig:List, validator:Function = null)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -48,6 +49,7 @@ p.location-badge.
|
|||
control(value, validator:Function = null)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -63,6 +65,7 @@ p.location-badge.
|
|||
group(controlsConfig, extra = null)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -23,6 +23,7 @@ p.location-badge.
|
|||
array(c:modelModule.ControlArray)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -38,6 +39,7 @@ p.location-badge.
|
|||
compose(validators:List<Function>)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -53,6 +55,7 @@ p.location-badge.
|
|||
group(c:modelModule.ControlGroup)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -68,6 +71,7 @@ p.location-badge.
|
|||
nullValidator(c:any)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -83,6 +87,7 @@ p.location-badge.
|
|||
required(c:modelModule.Control)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -50,6 +50,7 @@ p.location-badge.
|
|||
onDestroy()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -65,6 +66,7 @@ p.location-badge.
|
|||
supports(obs)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -80,6 +82,7 @@ p.location-badge.
|
|||
transform(obs:Observable)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -17,6 +17,7 @@ p.location-badge.
|
|||
create(cdRef)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -32,6 +33,7 @@ p.location-badge.
|
|||
supports(obs)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -26,6 +26,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -37,6 +38,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -48,6 +50,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -63,6 +66,7 @@ p.location-badge.
|
|||
toString()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -30,6 +30,7 @@ p.location-badge.
|
|||
check(collection)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -41,6 +42,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -56,6 +58,7 @@ p.location-badge.
|
|||
forEachAddedItem(fn:Function)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -71,6 +74,7 @@ p.location-badge.
|
|||
forEachItem(fn:Function)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -86,6 +90,7 @@ p.location-badge.
|
|||
forEachMovedItem(fn:Function)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -101,6 +106,7 @@ p.location-badge.
|
|||
forEachPreviousItem(fn:Function)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -116,6 +122,7 @@ p.location-badge.
|
|||
forEachRemovedItem(fn:Function)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -127,6 +134,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -138,6 +146,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -153,6 +162,7 @@ p.location-badge.
|
|||
supports(obj)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -168,6 +178,7 @@ p.location-badge.
|
|||
supportsObj(obj)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -183,6 +194,7 @@ p.location-badge.
|
|||
toString()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -198,6 +210,7 @@ p.location-badge.
|
|||
transform(collection)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -26,6 +26,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -37,6 +38,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -48,6 +50,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -63,6 +66,7 @@ p.location-badge.
|
|||
toString()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -30,6 +30,7 @@ p.location-badge.
|
|||
check(map)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -45,6 +46,7 @@ p.location-badge.
|
|||
forEachAddedItem(fn:Function)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -60,6 +62,7 @@ p.location-badge.
|
|||
forEachChangedItem(fn:Function)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -75,6 +78,7 @@ p.location-badge.
|
|||
forEachItem(fn:Function)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -90,6 +94,7 @@ p.location-badge.
|
|||
forEachPreviousItem(fn:Function)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -105,6 +110,7 @@ p.location-badge.
|
|||
forEachRemovedItem(fn:Function)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -116,6 +122,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -131,6 +138,7 @@ p.location-badge.
|
|||
supports(obj)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -146,6 +154,7 @@ p.location-badge.
|
|||
supportsObj(obj)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -161,6 +170,7 @@ p.location-badge.
|
|||
toString()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -176,6 +186,7 @@ p.location-badge.
|
|||
transform(map)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -16,6 +16,7 @@ p.location-badge.
|
|||
create(cdRef)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -31,6 +32,7 @@ p.location-badge.
|
|||
supports(obj)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -26,6 +26,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -41,6 +42,7 @@ p.location-badge.
|
|||
supports(obj)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -56,6 +58,7 @@ p.location-badge.
|
|||
supportsObj(obj)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -71,6 +74,7 @@ p.location-badge.
|
|||
transform(value)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -16,6 +16,7 @@ p.location-badge.
|
|||
create(cdRef)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -31,6 +32,7 @@ p.location-badge.
|
|||
supports(obj)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
An interface for extending the list of pipes known to Angular.
|
||||
|
@ -33,6 +33,7 @@ p.location-badge.
|
|||
onDestroy()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -48,6 +49,7 @@ p.location-badge.
|
|||
supports(obj)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -63,6 +65,7 @@ p.location-badge.
|
|||
transform(value:any)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
:markdown
|
||||
# Router
|
||||
## Router
|
||||
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`.
|
||||
|
@ -35,6 +35,7 @@ p.location-badge.
|
|||
activateOutlets(instruction:Instruction)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -50,6 +51,7 @@ p.location-badge.
|
|||
childRouter(outletName = 'default')
|
||||
|
||||
:markdown
|
||||
|
||||
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)
|
||||
|
||||
:markdown
|
||||
|
||||
Update the routing configuration and trigger a navigation.
|
||||
|
||||
# Usage
|
||||
### Usage
|
||||
|
||||
```
|
||||
router.config('/', SomeCmp);
|
||||
|
@ -86,6 +89,7 @@ p.location-badge.
|
|||
generate(name:string, params:any)
|
||||
|
||||
:markdown
|
||||
|
||||
Generate a URL from a component name and optional map of parameters. The URL is relative to the app's base href.
|
||||
|
||||
|
||||
|
@ -101,6 +105,7 @@ p.location-badge.
|
|||
getRoot()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -112,6 +117,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -123,6 +129,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -138,6 +145,7 @@ p.location-badge.
|
|||
navigate(url:string)
|
||||
|
||||
:markdown
|
||||
|
||||
Navigate to a URL. Returns a promise that resolves to the canonical URL for the route.
|
||||
|
||||
|
||||
|
@ -149,6 +157,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -160,6 +169,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -171,6 +181,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -186,6 +197,7 @@ p.location-badge.
|
|||
recognize(url:string)
|
||||
|
||||
:markdown
|
||||
|
||||
Given a URL, returns an instruction representing the component graph
|
||||
|
||||
|
||||
|
@ -201,6 +213,7 @@ p.location-badge.
|
|||
registerOutlet(outlet:RouterOutlet, name = 'default')
|
||||
|
||||
:markdown
|
||||
|
||||
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()
|
||||
|
||||
:markdown
|
||||
|
||||
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)
|
||||
|
||||
:markdown
|
||||
|
||||
Subscribe to URL updates from the router
|
||||
|
||||
|
||||
|
@ -246,6 +261,7 @@ p.location-badge.
|
|||
traverseOutlets(fn)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -30,7 +30,7 @@ p.location-badge.
|
|||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(ngEl:NgElement, router:Router)
|
||||
constructor(elementRef:ElementRef, router:Router)
|
||||
|
||||
:markdown
|
||||
|
||||
|
@ -47,6 +47,7 @@ p.location-badge.
|
|||
params(changes)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -62,6 +63,7 @@ p.location-badge.
|
|||
route(changes)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -77,6 +79,7 @@ p.location-badge.
|
|||
updateHref()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
|
||||
|
@ -30,6 +30,7 @@ p.location-badge.
|
|||
createView(component: Type, {context = null, html = null}: {context:any, html: string} = {}, [object Object], [object Object], [object Object])
|
||||
|
||||
:markdown
|
||||
|
||||
Creates an `AppView` for the given component.
|
||||
|
||||
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])
|
||||
|
||||
:markdown
|
||||
|
||||
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])
|
||||
|
||||
: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>.
|
||||
|
||||
|
||||
|
@ -81,6 +84,7 @@ p.location-badge.
|
|||
setInlineTemplate(component: Type, html: string, [object Object], [object Object])
|
||||
|
||||
:markdown
|
||||
|
||||
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.
|
||||
|
||||
|
|
|
@ -35,6 +35,7 @@ p.location-badge.
|
|||
[Symbol.iterator]()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -50,6 +51,7 @@ p.location-badge.
|
|||
add(obj)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -65,6 +67,7 @@ p.location-badge.
|
|||
fireCallbacks()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -80,6 +83,7 @@ p.location-badge.
|
|||
onChange(callback)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -95,6 +99,7 @@ p.location-badge.
|
|||
removeCallback(callback)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -110,6 +115,7 @@ p.location-badge.
|
|||
reset(newList)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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/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
|
||||
|
||||
|
@ -30,6 +30,7 @@ p.location-badge.
|
|||
buildRenderDirective(directiveBinding)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -45,6 +46,7 @@ p.location-badge.
|
|||
compile(component: Type)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -60,6 +62,7 @@ p.location-badge.
|
|||
compileInHost(componentTypeOrBinding:any)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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>
|
||||
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
|
||||
|
||||
|
@ -13,7 +13,7 @@ p.location-badge.
|
|||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(location:ElementRef, instance:any, componentView:AppView, dispose:Function)
|
||||
constructor(location:ElementRef, instance:any, dispose:Function)
|
||||
|
||||
:markdown
|
||||
|
||||
|
@ -21,17 +21,6 @@ p.location-badge.
|
|||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 componentView
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 dispose
|
||||
|
||||
|
@ -41,6 +30,7 @@ p.location-badge.
|
|||
dispose()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -52,17 +42,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 injector
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
@ -74,6 +54,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -85,6 +66,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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#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
|
||||
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)
|
||||
|
||||
: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.
|
||||
|
||||
|
@ -48,6 +49,7 @@ p.location-badge.
|
|||
loadIntoNewLocation(typeOrBinding, parentComponentLocation:ElementRef, elementOrSelector:any, injector:Injector = null)
|
||||
|
||||
:markdown
|
||||
|
||||
Loads a component in the element specified by elementOrSelector. The loaded component receives
|
||||
injection normally as a hosted view.
|
||||
|
||||
|
@ -64,6 +66,7 @@ p.location-badge.
|
|||
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.
|
||||
|
||||
|
|
|
@ -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_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
|
||||
|
||||
|
@ -13,7 +13,7 @@ p.location-badge.
|
|||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(elementInjector, hostView, boundElementIndex, injector, viewManager, defaultProtoView)
|
||||
constructor(parentView:ViewRef, boundElementIndex:number)
|
||||
|
||||
:markdown
|
||||
|
||||
|
@ -26,6 +26,7 @@ p.location-badge.
|
|||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -33,43 +34,41 @@ p.location-badge.
|
|||
|
||||
|
||||
.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 hostView
|
||||
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 injector
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 viewContainer
|
||||
h3 parentView
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
|
|
@ -10,7 +10,7 @@ p.location-badge.
|
|||
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"` 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
|
||||
callbacks.
|
||||
|
@ -78,6 +78,7 @@ p.location-badge.
|
|||
onChange(callback)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -93,6 +94,7 @@ p.location-badge.
|
|||
removeCallback(callback)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -24,8 +24,12 @@
|
|||
"title" : "QueryList Class"
|
||||
},
|
||||
|
||||
"ViewContainerRef-class" : {
|
||||
"title" : "ViewContainerRef Class"
|
||||
"ViewRef-class" : {
|
||||
"title" : "ViewRef Class"
|
||||
},
|
||||
|
||||
"ProtoViewRef-class" : {
|
||||
"title" : "ProtoViewRef Class"
|
||||
},
|
||||
|
||||
"BaseQueryList-class" : {
|
||||
|
|
|
@ -42,8 +42,7 @@
|
|||
know to read this file so we don't need to configure them or add command-line options.
|
||||
|
||||
pre.prettyprint
|
||||
# We need to use an unreleased version of TypeScript
|
||||
$ npm install -g mhegazy/typescript#v1.5-beta
|
||||
$ npm install -g typescript@^1.5.0-beta
|
||||
$ tsc --watch
|
||||
|
||||
// STEP 3 - Import Angular ##########################
|
||||
|
@ -55,8 +54,8 @@
|
|||
<code>app.ts</code>, both at the root of the project:
|
||||
|
||||
pre.prettyprint
|
||||
$ touch index.html
|
||||
$ touch app.ts
|
||||
$ touch index.html
|
||||
$ touch app.ts
|
||||
|
||||
p Inside of <code>app.ts</code>, import the type definitions from Angular:
|
||||
pre.prettyprint
|
||||
|
@ -217,12 +216,16 @@
|
|||
adds ES6 module loading functionality to browsers.
|
||||
|
||||
p.
|
||||
Add the System.js dependency in the <code><head></code> tag:
|
||||
Add the System.js dependency in the <code><head></code> tag, so that
|
||||
it looks like:
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
<head>
|
||||
<title>Angular 2 Quickstart</title>
|
||||
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
|
||||
<script src="https://jspm.io/system@0.16.js"></script>
|
||||
<script src="bundle/angular2.dev.js"></script>
|
||||
</head>
|
||||
|
||||
p.
|
||||
|
@ -230,8 +233,8 @@
|
|||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
<script>System.import('app');</script>
|
||||
<my-app></my-app>
|
||||
<script>System.import('app');</script>
|
||||
|
||||
|
||||
// STEP 8 - Run a local server ##########################
|
||||
|
|
|
@ -11,9 +11,10 @@
|
|||
.l-main-section
|
||||
h2 <span class="icon-play-circle-outline"></span> Videos
|
||||
|
||||
h4 Intro to building Apps
|
||||
h4 Intro Vidoes
|
||||
ul
|
||||
li <a href="https://www.youtube.com/watch?v=uD6Okha_Yj0">Building a Todo App</a> by David East
|
||||
li <a href="https://www.youtube.com/watch?v=4C4bmDOV5hk">Angular 2 Forms</a> by David East
|
||||
|
||||
h4 ng-conf
|
||||
ul
|
||||
|
|
|
@ -22,6 +22,7 @@
|
|||
background: lighten($steel, 3%);
|
||||
color: $tin;
|
||||
font-weight: 500;
|
||||
text-transform: none;
|
||||
|
||||
&.is-selected {
|
||||
background: $blueberry;
|
||||
|
|
|
@ -28,6 +28,10 @@ $hero-padding: $unit * 2;
|
|||
margin: ($unit * 9) 0px 0px ($unit * 10);
|
||||
opacity: .87;
|
||||
|
||||
&.is-standard-case {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
@media handheld and (max-width: $phone-breakpoint),
|
||||
screen and (max-device-width: $phone-breakpoint),
|
||||
screen and (max-width: $tablet-breakpoint) {
|
||||
|
|
|
@ -3,6 +3,18 @@
|
|||
*
|
||||
*/
|
||||
|
||||
var getTabName = function(name) {
|
||||
var prettyName = name;
|
||||
|
||||
switch(name) {
|
||||
case 'es5': prettyName = 'ES5'; break;
|
||||
case 'typescript': prettyName = 'TypeScript'; break;
|
||||
default: prettyName = name;
|
||||
}
|
||||
|
||||
return prettyName;
|
||||
};
|
||||
|
||||
angularIO.directive('code-tabs', function() {
|
||||
return {
|
||||
template: 'Name: {{customer.name}} Address: {{customer.address}}'
|
||||
|
@ -31,8 +43,9 @@ angularIO.directive('code-tabs', function() {
|
|||
$examples.each(function(index, example) {
|
||||
var $example = $(example);
|
||||
var name = $example.data('name');
|
||||
var tabName = getTabName(name);
|
||||
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
|
||||
$button.on('click', function(e) {
|
||||
|
|
Loading…
Reference in New Issue