First round of api docs
This commit is contained in:
Alex Wolfe
parent
3b72b71570
commit
94cc8e9005
|
|
@ -1,13 +1,16 @@
|
|||
<!-- VENDORS -->
|
||||
script(src="/resources/js/vendor/prettify.js")
|
||||
script(src="/resources/js/vendor/lang-basic.js")
|
||||
script(src="/resources/js/vendor/lang-dart.js")
|
||||
script(src="/resources/js/vendor/jquery.js")
|
||||
|
||||
|
||||
<!-- Angular Material Dependencies -->
|
||||
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js")
|
||||
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js")
|
||||
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.js")
|
||||
script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.js")
|
||||
|
||||
<!-- VENDORS -->
|
||||
script(src="/resources/js/vendor/prettify.js")
|
||||
script(src="/resources/js/vendor/lang-basic.js")
|
||||
script(src="/resources/js/vendor/lang-dart.js")
|
||||
|
||||
|
||||
script(src="/resources/js/site.js")
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"annotations": {
|
||||
"title": "Annotations"
|
||||
},
|
||||
|
||||
"change-detection": {
|
||||
"title": "Change Detection"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/visibility.js#L105">angular2/src/core/annotations/visibility.js (line 105)</a>
|
||||
|
||||
:markdown
|
||||
Specifies that an injector should retrieve a dependency from any ancestor element.
|
||||
|
||||
An ancestor is any element between the parent element and shadow root.
|
||||
|
||||
|
||||
## Example
|
||||
|
||||
Here is a simple directive that retrieves a dependency from an ancestor element.
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
selector: '[dependency]',
|
||||
properties: {
|
||||
'id':'dependency'
|
||||
}
|
||||
})
|
||||
class Dependency {
|
||||
id:string;
|
||||
}
|
||||
|
||||
|
||||
@Decorator({
|
||||
selector: '[my-directive]'
|
||||
})
|
||||
class Dependency {
|
||||
constructor(@Ancestor() dependency:Dependency) {
|
||||
expect(dependency.id).toEqual(2);
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
We use this with the following HTML template:
|
||||
|
||||
```
|
||||
<div dependency="1">
|
||||
<div dependency="2">
|
||||
<div>
|
||||
<div dependency="3" my-directive></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
The `@Ancestor()` annotation in our constructor forces the injector to retrieve the dependency from the
|
||||
nearest ancestor element:
|
||||
- The current element `dependency="3"` is skipped because it is not an ancestor.
|
||||
- Next parent has no directives `<div>`
|
||||
- Next parent has the `Dependency` directive and so the dependency is satisfied.
|
||||
|
||||
Angular injects `dependency=2`.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/di.js#L53">angular2/src/core/annotations/di.js (line 53)</a>
|
||||
|
||||
:markdown
|
||||
Specifies that a constant attribute value should be injected.
|
||||
|
||||
The directive can inject constant string literals of host element attributes.
|
||||
|
||||
## Example
|
||||
|
||||
Suppose we have an `<input>` element and want to know its `type`.
|
||||
|
||||
```html
|
||||
<input type="text">
|
||||
```
|
||||
|
||||
A decorator can inject string literal `text` like so:
|
||||
|
||||
```javascript
|
||||
@Decorator({
|
||||
selector: `input'
|
||||
})
|
||||
class InputDecorator {
|
||||
constructor(@Attribute('type') type) {
|
||||
// type would be `text` in this example
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(attributeName)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 attributeName
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 token
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L750">angular2/src/core/annotations/annotations.js (line 750)</a>
|
||||
|
||||
:markdown
|
||||
Directive that attaches behavior to DOM elements.
|
||||
|
||||
A decorator directive attaches behavior to a DOM element in a composable manner.
|
||||
(see: http://en.wikipedia.org/wiki/Composition_over_inheritance)
|
||||
|
||||
Decorators:
|
||||
- are simplest form of [Directive]s.
|
||||
- are best used as a composition pattern ()
|
||||
|
||||
Decorators differ from [Component]s in that they:
|
||||
- can have multiple decorators per element
|
||||
- do not create their own evaluation context
|
||||
- do not have a template (and therefor do not create Shadow DOM)
|
||||
|
||||
|
||||
## Example
|
||||
|
||||
Here we use a decorator directive to simply define basic tool-tip behavior.
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
selector: '[tooltip]',
|
||||
properties: {
|
||||
'text': 'tooltip'
|
||||
},
|
||||
hostListeners: {
|
||||
'onmouseenter': 'onMouseEnter()',
|
||||
'onmouseleave': 'onMouseLeave()'
|
||||
}
|
||||
})
|
||||
class Tooltip{
|
||||
text:string;
|
||||
overlay:Overlay; // NOT YET IMPLEMENTED
|
||||
overlayManager:OverlayManager; // NOT YET IMPLEMENTED
|
||||
|
||||
constructor(overlayManager:OverlayManager) {
|
||||
this.overlay = overlay;
|
||||
}
|
||||
|
||||
onMouseEnter() {
|
||||
// exact signature to be determined
|
||||
this.overlay = this.overlayManager.open(text, ...);
|
||||
}
|
||||
|
||||
onMouseLeave() {
|
||||
this.overlay.close();
|
||||
this.overlay = null;
|
||||
}
|
||||
}
|
||||
```
|
||||
In our HTML template, we can then add this behavior to a `<div>` or any other element with the `tooltip` selector,
|
||||
like so:
|
||||
|
||||
```
|
||||
<div tooltip="some text here"></div>
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
({
|
||||
selector,
|
||||
properties,
|
||||
events,
|
||||
hostListeners,
|
||||
lifecycle,
|
||||
compileChildren = true,
|
||||
}:{
|
||||
selector:string,
|
||||
properties:any,
|
||||
events:List,
|
||||
hostListeners:any,
|
||||
lifecycle:List,
|
||||
compileChildren:boolean
|
||||
}={})
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 compileChildren
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
If set to true the compiler does not compile the children of this directive.
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L655">angular2/src/core/annotations/annotations.js (line 655)</a>
|
||||
|
||||
:markdown
|
||||
Directive used for dynamically loading components.
|
||||
|
||||
Regular Angular components are statically resolved. DynamicComponent allows to you resolve a component at runtime
|
||||
instead by providing a placeholder into which a regular Angular component can be dynamically loaded. Once loaded,
|
||||
the dynamically-loaded component becomes permanent and cannot be changed.
|
||||
|
||||
|
||||
## Example
|
||||
|
||||
Here we have `DynamicComp` which acts as the placeholder for `HelloCmp`. At runtime, the dynamic component
|
||||
`DynamicComp` requests loading of the `HelloCmp` component.
|
||||
|
||||
There is nothing special about `HelloCmp`, which is a regular Angular component. It can also be used in other static
|
||||
locations.
|
||||
|
||||
```
|
||||
@DynamicComponent({
|
||||
selector: 'dynamic-comp'
|
||||
})
|
||||
class DynamicComp {
|
||||
helloCmp:HelloCmp;
|
||||
constructor(loader:DynamicComponentLoader, location:PrivateComponentLocation) {
|
||||
loader.load(HelloCmp, location).then((helloCmp) => {
|
||||
this.helloCmp = helloCmp;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'hello-cmp'
|
||||
})
|
||||
@View({
|
||||
template: "{{greeting}}"
|
||||
})
|
||||
class HelloCmp {
|
||||
greeting:string;
|
||||
constructor() {
|
||||
this.greeting = "hello";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
({
|
||||
selector,
|
||||
properties,
|
||||
events,
|
||||
hostListeners,
|
||||
injectables,
|
||||
lifecycle
|
||||
}:{
|
||||
selector:string,
|
||||
properties:Object,
|
||||
events:List,
|
||||
hostListeners:Object,
|
||||
injectables:List,
|
||||
lifecycle:List
|
||||
}={})
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 injectables
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Same as [Component.injectables].
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/visibility.js#L44">angular2/src/core/annotations/visibility.js (line 44)</a>
|
||||
|
||||
:markdown
|
||||
Specifies that an injector should retrieve a dependency from the direct parent.
|
||||
|
||||
## Example
|
||||
|
||||
Here is a simple directive that retrieves a dependency from its parent element.
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
selector: '[dependency]',
|
||||
properties: {
|
||||
'id':'dependency'
|
||||
}
|
||||
})
|
||||
class Dependency {
|
||||
id:string;
|
||||
}
|
||||
|
||||
|
||||
@Decorator({
|
||||
selector: '[my-directive]'
|
||||
})
|
||||
class Dependency {
|
||||
constructor(@Parent() dependency:Dependency) {
|
||||
expect(dependency.id).toEqual(1);
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
We use this with the following HTML template:
|
||||
|
||||
```
|
||||
<div dependency="1">
|
||||
<div dependency="2" my-directive></div>
|
||||
</div>
|
||||
```
|
||||
The `@Parent()` annotation in our constructor forces the injector to retrieve the dependency from the
|
||||
parent element (even thought the current element could resolve it): Angular injects `dependency=1`.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/di.js#L12">angular2/src/core/annotations/di.js (line 12)</a>
|
||||
|
||||
:markdown
|
||||
Specifies that a function for setting host properties should be injected.
|
||||
|
||||
NOTE: This is changing pre 1.0.
|
||||
|
||||
The directive can inject a property setter that would allow setting this property on the host element.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(propName)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 propName
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 token
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/di.js#L77">angular2/src/core/annotations/di.js (line 77)</a>
|
||||
|
||||
:markdown
|
||||
Specifies that a [QueryList] should be injected.
|
||||
|
||||
See: [QueryList] for usage and example.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(directive)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 directive
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/view.js#L34">angular2/src/core/annotations/view.js (line 34)</a>
|
||||
|
||||
:markdown
|
||||
Declare the available HTML templates for an application.
|
||||
|
||||
Each angular component requires a single `@Component` and at least one `@View` annotation. The @View
|
||||
annotation specifies the HTML template to use, and lists the directives that are active within the template.
|
||||
|
||||
When a component is instantiated, the template is loaded into the component's shadow root, and the
|
||||
expressions and statements in the template are evaluated against the component.
|
||||
|
||||
For details on the `@Component` annotation, see [Component].
|
||||
|
||||
## Example
|
||||
|
||||
```
|
||||
@Component({
|
||||
selector: 'greet'
|
||||
})
|
||||
@View({
|
||||
template: 'Hello {{name}}!',
|
||||
directives: [GreetUser, Bold]
|
||||
})
|
||||
class Greet {
|
||||
name: string;
|
||||
|
||||
constructor() {
|
||||
this.name = 'World';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
({
|
||||
templateUrl,
|
||||
template,
|
||||
directives
|
||||
}: {
|
||||
templateUrl: string,
|
||||
template: string,
|
||||
directives: List<Type>
|
||||
})
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 directives
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Specify a list of directives that are active within a template. [TODO: true?]
|
||||
|
||||
Directives must be listed explicitly to provide proper component encapsulation.
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
@Component({
|
||||
selector: 'my-component'
|
||||
})
|
||||
@View({
|
||||
directives: [For]
|
||||
template: '
|
||||
<ul>
|
||||
<li *for="item in items">{{item}}</li>
|
||||
</ul>'
|
||||
})
|
||||
class MyComponent {
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 template
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Specify an inline template for an angular component.
|
||||
|
||||
NOTE: either `templateURL` or `template` should be used, but not both.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 templateUrl
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Specify a template URL for an angular component.
|
||||
|
||||
NOTE: either `templateURL` or `template` should be used, but not both.
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L879">angular2/src/core/annotations/annotations.js (line 879)</a>
|
||||
|
||||
:markdown
|
||||
Directive that controls the instantiation, destruction, and positioning of inline template elements.
|
||||
|
||||
A viewport directive uses a [ViewContainer] to instantiate, insert, move, and destroy views at runtime.
|
||||
The [ViewContainer] is created as a result of `<template>` element, and represents a location in the current view
|
||||
where these actions are performed.
|
||||
|
||||
Views are always created as children of the current [View], and as siblings of the `<template>` element. Thus a
|
||||
directive in a child view cannot inject the viewport directive that created it.
|
||||
|
||||
Since viewport directives are common in Angular, and using the full `<template>` element syntax is wordy, Angular
|
||||
also supports a shorthand notation: `<li *foo="bar">` and `<li template="foo: bar">` are equivalent.
|
||||
|
||||
Thus,
|
||||
|
||||
```
|
||||
<ul>
|
||||
<li *foo="bar" title="text"></li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Expands in use to:
|
||||
|
||||
```
|
||||
<ul>
|
||||
<template [foo]="bar">
|
||||
<li title="text"></li>
|
||||
</template>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Notice that although the shorthand places `*foo="bar"` within the `<li>` element, the binding for the `Viewport`
|
||||
controller is correctly instantiated on the `<template>` element rather than the `<li>` element.
|
||||
|
||||
|
||||
## Example
|
||||
|
||||
Let's suppose we want to implement the `unless` behavior, to conditionally include a template.
|
||||
|
||||
Here is a simple viewport directive that triggers on an `unless` selector:
|
||||
|
||||
```
|
||||
@Viewport({
|
||||
selector: '[unless]',
|
||||
properties: {
|
||||
'condition': 'unless'
|
||||
}
|
||||
})
|
||||
export class Unless {
|
||||
viewContainer: ViewContainer;
|
||||
prevCondition: boolean;
|
||||
|
||||
constructor(viewContainer: ViewContainer) {
|
||||
this.viewContainer = viewContainer;
|
||||
this.prevCondition = null;
|
||||
}
|
||||
|
||||
set condition(newCondition) {
|
||||
if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) {
|
||||
this.prevCondition = true;
|
||||
this.viewContainer.clear();
|
||||
} else if (!newCondition && (isBlank(this.prevCondition) || this.prevCondition)) {
|
||||
this.prevCondition = false;
|
||||
this.viewContainer.create();
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
We can then use this `unless` selector in a template:
|
||||
```
|
||||
<ul>
|
||||
<li *unless="expr"></li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Once the viewport instantiates the child view, the shorthand notation for the template expands and the result is:
|
||||
|
||||
```
|
||||
<ul>
|
||||
<template [unless]="exp">
|
||||
<li></li>
|
||||
</template>
|
||||
<li></li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Note also that although the `<li></li>` template still exists inside the `<template></template>`, the instantiated
|
||||
view occurs on the second `<li></li>` which is a sibling to the `<template>` element.
|
||||
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
({
|
||||
selector,
|
||||
properties,
|
||||
events,
|
||||
hostListeners,
|
||||
lifecycle
|
||||
}:{
|
||||
selector:string,
|
||||
properties:any,
|
||||
events:List,
|
||||
lifecycle:List
|
||||
}={})
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,9 +1,57 @@
|
|||
{
|
||||
"directive-class": {
|
||||
"title": "Directive Class"
|
||||
"Directive-class" : {
|
||||
"title" : "Directive Class"
|
||||
},
|
||||
|
||||
"component-class": {
|
||||
"title": "Component Class"
|
||||
"Component-class" : {
|
||||
"title" : "Component Class"
|
||||
},
|
||||
|
||||
"DynamicComponent-class" : {
|
||||
"title" : "DynamicComponent Class"
|
||||
},
|
||||
|
||||
"Decorator-class" : {
|
||||
"title" : "Decorator Class"
|
||||
},
|
||||
|
||||
"Viewport-class" : {
|
||||
"title" : "Viewport Class"
|
||||
},
|
||||
|
||||
"onDestroy-var" : {
|
||||
"title" : "onDestroy Var"
|
||||
},
|
||||
|
||||
"onChange-var" : {
|
||||
"title" : "onChange Var"
|
||||
},
|
||||
|
||||
"onAllChangesDone-var" : {
|
||||
"title" : "onAllChangesDone Var"
|
||||
},
|
||||
|
||||
"PropertySetter-class" : {
|
||||
"title" : "PropertySetter Class"
|
||||
},
|
||||
|
||||
"Attribute-class" : {
|
||||
"title" : "Attribute Class"
|
||||
},
|
||||
|
||||
"Query-class" : {
|
||||
"title" : "Query Class"
|
||||
},
|
||||
|
||||
"View-class" : {
|
||||
"title" : "View Class"
|
||||
},
|
||||
|
||||
"Parent-class" : {
|
||||
"title" : "Parent Class"
|
||||
},
|
||||
|
||||
"Ancestor-class" : {
|
||||
"title" : "Ancestor Class"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,312 +1,144 @@
|
|||
p.
|
||||
Directives allow you to attach behavior to elements in the DOM.
|
||||
Directive is an abstract concept, instead use concrete directives: [Component], [DynamicComponent], [Decorator] or [Viewport].
|
||||
A directive consists of a single directive annotation and a controller class. When the directive's [selector] matches elements in the DOM, the following steps occur:
|
||||
|
||||
p.
|
||||
For each directive, the [ElementInjector] attempts to resolve the directive's constructor arguments.
|
||||
Angular instantiates directives for each matched element using [ElementInjector] in a depth-first order, as declared in the HTML.
|
||||
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L516">angular2/src/core/annotations/annotations.js (line 516)</a>
|
||||
|
||||
:markdown
|
||||
Declare reusable UI building blocks for an application.
|
||||
|
||||
Each Angular component requires a single `@Component` and at least one `@View` annotation. The `@Component`
|
||||
annotation specifies when a component is instantiated, and which properties and hostListeners it binds to.
|
||||
|
||||
When a component is instantiated, Angular
|
||||
- creates a shadow DOM for the component.
|
||||
- loads the selected template into the shadow DOM.
|
||||
- creates a child [Injector] which is configured with the [Component.injectables].
|
||||
|
||||
All template expressions and statements are then evaluated against the component instance.
|
||||
|
||||
For details on the `@View` annotation, see [View].
|
||||
|
||||
## Example
|
||||
|
||||
```
|
||||
@Component({
|
||||
selector: 'greet'
|
||||
})
|
||||
@View({
|
||||
template: 'Hello {{name}}!'
|
||||
})
|
||||
class Greet {
|
||||
name: string;
|
||||
|
||||
constructor() {
|
||||
this.name = 'World';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
|
||||
h2 Understanding How Injection Works
|
||||
|
||||
p There are three stages of injection resolution.
|
||||
|
||||
ol
|
||||
li <strong>Pre-existing Injectors:</strong>
|
||||
ul
|
||||
li The terminal [Injector] cannot resolve dependencies. It either throws an error or, if the dependency was specified as @Optional, returns null.
|
||||
li The primordial injector resolves browser singleton resources, such as: cookies, title, location, and others.
|
||||
|
||||
li <strong>Component Injectors:</strong> Each @Component has its own [Injector], and they follow the same parent-child hierarchy as the components in the DOM.
|
||||
|
||||
li <strong>Element Injectors:</strong> Each component has a Shadow DOM. Within the Shadow DOM each element has an [ElementInjector] which follow the same parent-child hierarchy as the DOM elements themselves.
|
||||
|
||||
|
||||
p When a template is instantiated, it also must instantiate the corresponding directives in a depth-first order. The current [ElementInjector] resolves the constructor dependencies for each directive.
|
||||
|
||||
p Angular then resolves dependencies as follows, according to the order in which they appear in the [View]:
|
||||
|
||||
ol
|
||||
li Dependencies on the current element
|
||||
li Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
|
||||
li Dependencies on component injectors and their parents until it encounters the root component
|
||||
li Dependencies on pre-existing injectors
|
||||
|
||||
p The [ElementInjector] can inject other directives, element-specific special objects, or it can delegate to the parent injector.
|
||||
|
||||
p To inject other directives, declare the constructor parameter as:
|
||||
|
||||
ul
|
||||
li directive:DirectiveType: a directive on the current element only
|
||||
li @Ancestor() directive:DirectiveType: any directive that matches the type between the current element and the Shadow DOM root. Current element is not included in the resolution, therefor even if it could resolve it, it will be ignored.
|
||||
li @Parent() directive:DirectiveType: any directive that matches the type on a direct parent element only.
|
||||
li @Children query:Query<DirectiveType>: A live collection of direct child directives [TO BE IMPLEMENTED].
|
||||
li @Descendants query:Query<DirectiveType>: A live collection of any child directives [TO BE IMPLEMENTED].
|
||||
|
||||
p To inject element-specific special objects, declare the constructor parameter as:
|
||||
|
||||
ul
|
||||
li element: NgElement to obtain a DOM element (DEPRECATED: replacement coming)
|
||||
li viewContainer: ViewContainer to control child template instantiation, for [Viewport] directives only
|
||||
li bindingPropagation: BindingPropagation to control change detection in a more granular way.
|
||||
|
||||
.l-main-section
|
||||
h2 Example of Injection
|
||||
|
||||
p The following example demonstrates how dependency injection resolves constructor arguments in practice.
|
||||
|
||||
p Assume this HTML template:
|
||||
|
||||
pre.prettyprint.linenums.lang-html
|
||||
code.
|
||||
<div dependency="1">
|
||||
<div dependency="2">
|
||||
<div dependency="3" my-directive>
|
||||
<div dependency="4">
|
||||
<div dependency="5"></div>
|
||||
</div>
|
||||
<div dependency="6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
p With the following dependency decorator and SomeService injectable class.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Injectable()
|
||||
class SomeService {
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
selector: '[dependency]',
|
||||
bind: {
|
||||
'id':'dependency'
|
||||
}
|
||||
})
|
||||
class Dependency {
|
||||
id:string;
|
||||
}
|
||||
|
||||
p Let's step through the different ways in which MyDirective could be declared...
|
||||
|
||||
.l-sub-section
|
||||
h3 No injection
|
||||
|
||||
p Here the constructor is declared with no arguments, therefore nothing is injected into MyDirective.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with no dependencies.
|
||||
|
||||
.l-sub-section
|
||||
h3 Component-level injection
|
||||
|
||||
p Directives can inject any injectable instance from the closest component injector or any of its parents.
|
||||
|
||||
p Here, the constructor declares a parameter, someService, and injects the SomeService type from the parent component's injector.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(someService: SomeService) {
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with a dependency on SomeService.
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a directive from the current element
|
||||
|
||||
p Directives can inject other directives declared on the current element.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(dependency: Dependency) {
|
||||
expect(dependency.id).toEqual(3);
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with Dependency declared at the same element, in this case dependency="3".
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a directive from a direct parent element
|
||||
|
||||
p Directives can inject other directives declared on a direct parent element. By definition, a directive with a @Parent annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Parent() dependency: Dependency) {
|
||||
expect(dependency.id).toEqual(2);
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with Dependency declared at the parent element, in this case dependency="2".
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a directive from any ancestor elements
|
||||
|
||||
p Directives can inject other directives declared on any ancestor element (in the current Shadow DOM), i.e. on the parent element and its parents. By definition, a directive with an @Ancestor annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Ancestor() dependency: Dependency) {
|
||||
expect(dependency.id).toEqual(2);
|
||||
}
|
||||
}
|
||||
|
||||
p Unlike the @Parent which only checks the parent, @Ancestor checks the parent, as well as its parents recursively. If dependency="2" didn't exist on the direct parent, this injection would have returned dependency="1".
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a live collection of direct child directives [PENDING IMPLEMENTATION]
|
||||
p A directive can also query for other child directives. Since parent directives are instantiated before child directives, a directive can't simply inject the list of child directives. Instead, the directive asynchronously injects a [Query], which updates as children are added, removed, or moved by any [ViewPort] directive such as a for, an if, or a switch.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Children() dependencies:Query<Maker>) {
|
||||
}
|
||||
}
|
||||
|
||||
p. This directive would be instantiated with a [Query] which contains Dependency 4 and 6. Here, Dependency 5 would not be included, because it is not a direct child.
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a live collection of direct descendant directives [PENDING IMPLEMENTATION]
|
||||
|
||||
p Similar to @Children above, but also includes the children of the child elements.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Children() dependencies:Query<Maker>) {
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with a Query which would contain Dependency 4, 5 and 6.
|
||||
|
||||
.l-sub-section
|
||||
h3 Optional injection
|
||||
|
||||
p The normal behavior of directives is to return an error when a specified dependency cannot be resolved. If you would like to inject null on unresolved dependency instead, you can annotate that dependency with @Optional(). This explicitly permits the author of a template to treat some of the surrounding directives as optional.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Optional() dependency:Dependency) {
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with a Dependency directive found on the current element. If none can be found, the injector supplies null instead of throwing an error.
|
||||
|
||||
.l-main-section
|
||||
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
({
|
||||
selector,
|
||||
properties,
|
||||
events,
|
||||
hostListeners,
|
||||
injectables,
|
||||
lifecycle,
|
||||
changeDetection = DEFAULT
|
||||
}:{
|
||||
selector:string,
|
||||
properties:Object,
|
||||
events:List,
|
||||
hostListeners:Object,
|
||||
injectables:List,
|
||||
lifecycle:List,
|
||||
changeDetection:string
|
||||
}={})
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
p
|
||||
strong constructor({ selector, bind, events, lifecycle }:{ selector:string, bind:any, events: any, lifecycle:List }={})
|
||||
|
||||
.l-sub-section
|
||||
h3 bind
|
||||
h3 changeDetection
|
||||
|
||||
p Enumerates the set of properties that accept data binding for a directive.
|
||||
|
||||
|
||||
p The bind property defines a set of directiveProperty to bindingProperty key-value pairs:
|
||||
|
||||
ul
|
||||
li directiveProperty specifies the component property where the value is written.
|
||||
li bindingProperty specifies the DOM property where the value is read from.
|
||||
|
||||
p You can include [Pipes] when specifying a bindingProperty to allow for data transformation and structural change detection of the value. These pipes will be evaluated in the context of this component.
|
||||
:markdown
|
||||
Defines the used change detection strategy.
|
||||
|
||||
When a component is instantiated, Angular creates a change detector, which is responsible for propagating
|
||||
the component's bindings.
|
||||
|
||||
The `changeDetection` property defines, whether the change detection will be checked every time or only when the component
|
||||
tells it to do so.
|
||||
|
||||
|
||||
.l-main-section
|
||||
h2 Syntax
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Directive({
|
||||
bind: {
|
||||
'directiveProperty1': 'bindingProperty1',
|
||||
'directiveProperty2': 'bindingProperty2 | pipe1 | ...',
|
||||
...
|
||||
}
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 injectables
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Defines the set of injectable objects that are visible to a Component and its children.
|
||||
|
||||
The [injectables] defined in the Component annotation allow you to configure a set of bindings for the component's
|
||||
injector.
|
||||
|
||||
When a component is instantiated, Angular creates a new child Injector, which is configured with the bindings in
|
||||
the Component [injectables] annotation. The injectable objects then become available for injection to the component
|
||||
itself and any of the directives in the component's template, i.e. they are not available to the directives which
|
||||
are children in the component's light DOM.
|
||||
|
||||
|
||||
The syntax for configuring the [injectables] injectable is identical to [Injector] injectable configuration. See
|
||||
[Injector] for additional detail.
|
||||
|
||||
|
||||
## Simple Example
|
||||
|
||||
Here is an example of a class that can be injected:
|
||||
|
||||
```
|
||||
class Greeter {
|
||||
greet(name:string) {
|
||||
return 'Hello ' + name + '!';
|
||||
}
|
||||
}
|
||||
|
||||
.l-main-section
|
||||
h2 Basic Property Binding
|
||||
|
||||
p We can easily build a simple Tooltip directive that exposes a tooltip property, which can be used in templates with standard Angular syntax. For example:
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({
|
||||
selector: '[tooltip]',
|
||||
bind: {
|
||||
'text': 'tooltip'
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'greet',
|
||||
injectables: [
|
||||
Greeter
|
||||
]
|
||||
})
|
||||
class Tooltip {
|
||||
set text(text) {
|
||||
// This will get called every time the 'tooltip' binding changes with the new value.
|
||||
}
|
||||
}
|
||||
|
||||
p We can then bind to the tooltip' property as either an expression (someExpression`) or as a string literal, as shown in the HTML template below:
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
<div [tooltip]="someExpression">...</div>
|
||||
<div tooltip="Some Text">...</div>
|
||||
|
||||
p Whenever the someExpression expression changes, the bind declaration instructs Angular to update the Tooltip's text property.
|
||||
|
||||
.l-main-section
|
||||
h2 Bindings With Pipes
|
||||
|
||||
p You can also use pipes when writing binding definitions for a directive.
|
||||
|
||||
p For example, we could write a binding that updates the directive on structural changes, rather than on reference changes, as normally occurs in change detection. (See: [Pipe] and [keyValueDiff] documentation for more details.)
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({
|
||||
selector: '[class-set]',
|
||||
bind: {
|
||||
'classChanges': 'classSet | keyValDiff'
|
||||
}
|
||||
@View({
|
||||
template: `{{greeter.greet('world')}}!`,
|
||||
directives: Child
|
||||
})
|
||||
class ClassSet {
|
||||
set classChanges(changes:KeyValueChanges) {
|
||||
// This will get called every time the `class-set` expressions changes its structure.
|
||||
class HelloWorld {
|
||||
greeter:Greeter;
|
||||
|
||||
constructor(greeter:Greeter) {
|
||||
this.greeter = greeter;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
p The template that this directive is used in may also contain its own pipes. For example:
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
<div [class-set]="someExpression | somePipe">
|
||||
|
||||
p In this case, the two pipes compose as if they were inlined: someExpression | somePipe | keyValDiff.
|
||||
|
||||
.location-badge exported from angular2/annotations
|
||||
|
|
@ -1,267 +1,431 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L238">angular2/src/core/annotations/annotations.js (line 238)</a>
|
||||
|
||||
:markdown
|
||||
Directives allow you to attach behavior to elements in the DOM.
|
||||
Directive is an abstract concept, instead use concrete directives: [Component], [DynamicComponent], [Decorator] or [Viewport].
|
||||
A directive consists of a single directive annotation and a controller class. When the directive's [selector] matches elements in the DOM, the following steps occur:
|
||||
|
||||
p.
|
||||
For each directive, the [ElementInjector] attempts to resolve the directive's constructor arguments.
|
||||
Angular instantiates directives for each matched element using [ElementInjector] in a depth-first order, as declared in the HTML.
|
||||
|
||||
|
||||
Directive is an abstract concept, instead use concrete directives: [Component], [DynamicComponent], [Decorator]
|
||||
or [Viewport].
|
||||
|
||||
A directive consists of a single directive annotation and a controller class. When the directive's [selector] matches
|
||||
elements in the DOM, the following steps occur:
|
||||
|
||||
1. For each directive, the [ElementInjector] attempts to resolve the directive's constructor arguments.
|
||||
2. Angular instantiates directives for each matched element using [ElementInjector] in a depth-first order,
|
||||
as declared in the HTML.
|
||||
|
||||
## Understanding How Injection Works
|
||||
|
||||
There are three stages of injection resolution.
|
||||
- *Pre-existing Injectors*:
|
||||
- The terminal [Injector] cannot resolve dependencies. It either throws an error or, if the dependency was
|
||||
specified as `@Optional`, returns `null`.
|
||||
- The primordial injector resolves browser singleton resources, such as: cookies, title, location, and others.
|
||||
- *Component Injectors*: Each `@Component` has its own [Injector], and they follow the same parent-child hierarchy
|
||||
as the components in the DOM.
|
||||
- *Element Injectors*: Each component has a Shadow DOM. Within the Shadow DOM each element has an [ElementInjector]
|
||||
which follow the same parent-child hierarchy as the DOM elements themselves.
|
||||
|
||||
When a template is instantiated, it also must instantiate the corresponding directives in a depth-first order. The
|
||||
current [ElementInjector] resolves the constructor dependencies for each directive.
|
||||
|
||||
Angular then resolves dependencies as follows, according to the order in which they appear in the [View]:
|
||||
|
||||
1. Dependencies on the current element
|
||||
2. Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
|
||||
3. Dependencies on component injectors and their parents until it encounters the root component
|
||||
4. Dependencies on pre-existing injectors
|
||||
|
||||
|
||||
The [ElementInjector] can inject other directives, element-specific special objects, or it can delegate to the parent
|
||||
injector.
|
||||
|
||||
To inject other directives, declare the constructor parameter as:
|
||||
- `directive:DirectiveType`: a directive on the current element only
|
||||
- `@Ancestor() directive:DirectiveType`: any directive that matches the type between the current element and the
|
||||
Shadow DOM root. Current element is not included in the resolution, therefor even if it could resolve it, it will
|
||||
be ignored.
|
||||
- `@Parent() directive:DirectiveType`: any directive that matches the type on a direct parent element only.
|
||||
- `@Children query:Query<DirectiveType>`: A live collection of direct child directives [TO BE IMPLEMENTED].
|
||||
- `@Descendants query:Query<DirectiveType>`: A live collection of any child directives [TO BE IMPLEMENTED].
|
||||
|
||||
To inject element-specific special objects, declare the constructor parameter as:
|
||||
- `element: NgElement` to obtain a DOM element (DEPRECATED: replacement coming)
|
||||
- `viewContainer: ViewContainer` to control child template instantiation, for [Viewport] directives only
|
||||
- `bindingPropagation: BindingPropagation` to control change detection in a more granular way.
|
||||
|
||||
## Example
|
||||
|
||||
The following example demonstrates how dependency injection resolves constructor arguments in practice.
|
||||
|
||||
|
||||
Assume this HTML template:
|
||||
|
||||
```
|
||||
<div dependency="1">
|
||||
<div dependency="2">
|
||||
<div dependency="3" my-directive>
|
||||
<div dependency="4">
|
||||
<div dependency="5"></div>
|
||||
</div>
|
||||
<div dependency="6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
With the following `dependency` decorator and `SomeService` injectable class.
|
||||
|
||||
```
|
||||
@Injectable()
|
||||
class SomeService {
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
selector: '[dependency]',
|
||||
properties: {
|
||||
'id':'dependency'
|
||||
}
|
||||
})
|
||||
class Dependency {
|
||||
id:string;
|
||||
}
|
||||
```
|
||||
|
||||
Let's step through the different ways in which `MyDirective` could be declared...
|
||||
|
||||
|
||||
### No injection
|
||||
|
||||
Here the constructor is declared with no arguments, therefore nothing is injected into `MyDirective`.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This directive would be instantiated with no dependencies.
|
||||
|
||||
|
||||
### Component-level injection
|
||||
|
||||
Directives can inject any injectable instance from the closest component injector or any of its parents.
|
||||
|
||||
Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type from the parent
|
||||
component's injector.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(someService: SomeService) {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This directive would be instantiated with a dependency on `SomeService`.
|
||||
|
||||
|
||||
### Injecting a directive from the current element
|
||||
|
||||
Directives can inject other directives declared on the current element.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(dependency: Dependency) {
|
||||
expect(dependency.id).toEqual(3);
|
||||
}
|
||||
}
|
||||
```
|
||||
This directive would be instantiated with `Dependency` declared at the same element, in this case `dependency="3"`.
|
||||
|
||||
|
||||
### Injecting a directive from a direct parent element
|
||||
|
||||
Directives can inject other directives declared on a direct parent element. By definition, a directive with a
|
||||
`@Parent` annotation does not attempt to resolve dependencies for the current element, even if this would satisfy
|
||||
the dependency.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Parent() dependency: Dependency) {
|
||||
expect(dependency.id).toEqual(2);
|
||||
}
|
||||
}
|
||||
```
|
||||
This directive would be instantiated with `Dependency` declared at the parent element, in this case `dependency="2"`.
|
||||
|
||||
|
||||
### Injecting a directive from any ancestor elements
|
||||
|
||||
Directives can inject other directives declared on any ancestor element (in the current Shadow DOM), i.e. on the
|
||||
parent element and its parents. By definition, a directive with an `@Ancestor` annotation does not attempt to
|
||||
resolve dependencies for the current element, even if this would satisfy the dependency.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Ancestor() dependency: Dependency) {
|
||||
expect(dependency.id).toEqual(2);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Unlike the `@Parent` which only checks the parent, `@Ancestor` checks the parent, as well as its
|
||||
parents recursively. If `dependency="2"` didn't exist on the direct parent, this injection would have returned
|
||||
`dependency="1"`.
|
||||
|
||||
|
||||
### Injecting a live collection of direct child directives [PENDING IMPLEMENTATION]
|
||||
|
||||
A directive can also query for other child directives. Since parent directives are instantiated before child
|
||||
directives, a directive can't simply inject the list of child directives. Instead, the directive asynchronously
|
||||
injects a [Query], which updates as children are added, removed, or moved by any [ViewPort] directive such as a
|
||||
`for`, an `if`, or a `switch`.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Children() dependencies:Query<Maker>) {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This directive would be instantiated with a [Query] which contains `Dependency` 4 and 6. Here, `Dependency` 5 would
|
||||
not be included, because it is not a direct child.
|
||||
|
||||
### Injecting a live collection of direct descendant directives [PENDING IMPLEMENTATION]
|
||||
|
||||
Similar to `@Children` above, but also includes the children of the child elements.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Children() dependencies:Query<Maker>) {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This directive would be instantiated with a Query which would contain `Dependency` 4, 5 and 6.
|
||||
|
||||
### Optional injection
|
||||
|
||||
The normal behavior of directives is to return an error when a specified dependency cannot be resolved. If you
|
||||
would like to inject `null` on unresolved dependency instead, you can annotate that dependency with `@Optional()`.
|
||||
This explicitly permits the author of a template to treat some of the surrounding directives as optional.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Optional() dependency:Dependency) {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This directive would be instantiated with a `Dependency` directive found on the current element. If none can be
|
||||
found, the injector supplies `null` instead of throwing an error.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
h2 Understanding How Injection Works
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
({
|
||||
selector,
|
||||
properties,
|
||||
events,
|
||||
hostListeners,
|
||||
lifecycle
|
||||
}:{
|
||||
selector:string,
|
||||
properties:any,
|
||||
events:List,
|
||||
hostListeners: any,
|
||||
lifecycle:List
|
||||
}={})
|
||||
|
||||
p There are three stages of injection resolution.
|
||||
|
||||
|
||||
ol
|
||||
li <strong>Pre-existing Injectors:</strong>
|
||||
ul
|
||||
li The terminal [Injector] cannot resolve dependencies. It either throws an error or, if the dependency was specified as @Optional, returns null.
|
||||
li The primordial injector resolves browser singleton resources, such as: cookies, title, location, and others.
|
||||
|
||||
li <strong>Component Injectors:</strong> Each @Component has its own [Injector], and they follow the same parent-child hierarchy as the components in the DOM.
|
||||
|
||||
li <strong>Element Injectors:</strong> Each component has a Shadow DOM. Within the Shadow DOM each element has an [ElementInjector] which follow the same parent-child hierarchy as the DOM elements themselves.
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
p When a template is instantiated, it also must instantiate the corresponding directives in a depth-first order. The current [ElementInjector] resolves the constructor dependencies for each directive.
|
||||
|
||||
p Angular then resolves dependencies as follows, according to the order in which they appear in the [View]:
|
||||
|
||||
ol
|
||||
li Dependencies on the current element
|
||||
li Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
|
||||
li Dependencies on component injectors and their parents until it encounters the root component
|
||||
li Dependencies on pre-existing injectors
|
||||
.l-sub-section
|
||||
h3 events
|
||||
|
||||
p The [ElementInjector] can inject other directives, element-specific special objects, or it can delegate to the parent injector.
|
||||
|
||||
|
||||
p To inject other directives, declare the constructor parameter as:
|
||||
|
||||
ul
|
||||
li directive:DirectiveType: a directive on the current element only
|
||||
li @Ancestor() directive:DirectiveType: any directive that matches the type between the current element and the Shadow DOM root. Current element is not included in the resolution, therefor even if it could resolve it, it will be ignored.
|
||||
li @Parent() directive:DirectiveType: any directive that matches the type on a direct parent element only.
|
||||
li @Children query:Query<DirectiveType>: A live collection of direct child directives [TO BE IMPLEMENTED].
|
||||
li @Descendants query:Query<DirectiveType>: A live collection of any child directives [TO BE IMPLEMENTED].
|
||||
|
||||
p To inject element-specific special objects, declare the constructor parameter as:
|
||||
|
||||
ul
|
||||
li element: NgElement to obtain a DOM element (DEPRECATED: replacement coming)
|
||||
li viewContainer: ViewContainer to control child template instantiation, for [Viewport] directives only
|
||||
li bindingPropagation: BindingPropagation to control change detection in a more granular way.
|
||||
|
||||
.l-main-section
|
||||
h2 Example of Injection
|
||||
|
||||
p The following example demonstrates how dependency injection resolves constructor arguments in practice.
|
||||
|
||||
p Assume this HTML template:
|
||||
|
||||
pre.prettyprint.linenums.lang-html
|
||||
code.
|
||||
<div dependency="1">
|
||||
<div dependency="2">
|
||||
<div dependency="3" my-directive>
|
||||
<div dependency="4">
|
||||
<div dependency="5"></div>
|
||||
</div>
|
||||
<div dependency="6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
p With the following dependency decorator and SomeService injectable class.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Injectable()
|
||||
class SomeService {
|
||||
:markdown
|
||||
Enumerates the set of emitted events.
|
||||
|
||||
## Syntax
|
||||
|
||||
```
|
||||
@Component({
|
||||
events: ['status-change']
|
||||
})
|
||||
class TaskComponent {
|
||||
statusChange:EventEmitter;
|
||||
|
||||
constructor() {
|
||||
this.complete = new EventEmitter();
|
||||
}
|
||||
|
||||
onComplete() {
|
||||
this.statusChange.next("completed");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 hasLifecycleHook
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(hook:string)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Returns true if a directive participates in a given [LifecycleEvent].
|
||||
|
||||
See: [onChange], [onDestroy], [onAllChangesDone] for details.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 hostListeners
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Specifies which DOM hostListeners a directive listens to.
|
||||
|
||||
The `hostListeners` property defines a set of `event` to `method` key-value pairs:
|
||||
|
||||
- `event1`: the DOM event that the directive listens to.
|
||||
- `statement`: the statement to execute when the event occurs.
|
||||
|
||||
To listen to global events, a target must be added to the event name.
|
||||
The target can be `window`, `document` or `body`.
|
||||
|
||||
When writing a directive event binding, you can also refer to the following local variables:
|
||||
- `$event`: Current event object which triggered the event.
|
||||
- `$target`: The source of the event. This will be either a DOM element or an Angular directive.
|
||||
[TO BE IMPLEMENTED]
|
||||
|
||||
|
||||
## Syntax
|
||||
|
||||
```
|
||||
@Directive({
|
||||
hostListeners: {
|
||||
'event1': 'onMethod1(arguments)',
|
||||
'target:event2': 'onMethod2(arguments)',
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Basic Event Binding:
|
||||
|
||||
Suppose you want to write a directive that triggers on `change` events in the DOM and on `resize` events in window.
|
||||
You would define the event binding as follows:
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
selector: '[dependency]',
|
||||
bind: {
|
||||
'id':'dependency'
|
||||
selector: 'input',
|
||||
hostListeners: {
|
||||
'change': 'onChange($event)',
|
||||
'window:resize': 'onResize($event)'
|
||||
}
|
||||
})
|
||||
class Dependency {
|
||||
id:string;
|
||||
class InputDecorator {
|
||||
onChange(event:Event) {
|
||||
}
|
||||
onResize(event:Event) {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Here the `onChange` method of `InputDecorator` is invoked whenever the DOM element fires the 'change' event.
|
||||
|
||||
p Let's step through the different ways in which MyDirective could be declared...
|
||||
|
||||
.l-sub-section
|
||||
h3 No injection
|
||||
|
||||
p Here the constructor is declared with no arguments, therefore nothing is injected into MyDirective.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with no dependencies.
|
||||
|
||||
.l-sub-section
|
||||
h3 Component-level injection
|
||||
|
||||
p Directives can inject any injectable instance from the closest component injector or any of its parents.
|
||||
|
||||
p Here, the constructor declares a parameter, someService, and injects the SomeService type from the parent component's injector.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(someService: SomeService) {
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with a dependency on SomeService.
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a directive from the current element
|
||||
h3 lifecycle
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Specifies a set of lifecycle hostListeners in which the directive participates.
|
||||
|
||||
See: [onChange], [onDestroy], [onAllChangesDone] for details.
|
||||
|
||||
p Directives can inject other directives declared on the current element.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(dependency: Dependency) {
|
||||
expect(dependency.id).toEqual(3);
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with Dependency declared at the same element, in this case dependency="3".
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a directive from a direct parent element
|
||||
h3 properties
|
||||
|
||||
p Directives can inject other directives declared on a direct parent element. By definition, a directive with a @Parent annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
|
||||
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Parent() dependency: Dependency) {
|
||||
expect(dependency.id).toEqual(2);
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with Dependency declared at the parent element, in this case dependency="2".
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a directive from any ancestor elements
|
||||
|
||||
p Directives can inject other directives declared on any ancestor element (in the current Shadow DOM), i.e. on the parent element and its parents. By definition, a directive with an @Ancestor annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Ancestor() dependency: Dependency) {
|
||||
expect(dependency.id).toEqual(2);
|
||||
}
|
||||
}
|
||||
|
||||
p Unlike the @Parent which only checks the parent, @Ancestor checks the parent, as well as its parents recursively. If dependency="2" didn't exist on the direct parent, this injection would have returned dependency="1".
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a live collection of direct child directives [PENDING IMPLEMENTATION]
|
||||
p A directive can also query for other child directives. Since parent directives are instantiated before child directives, a directive can't simply inject the list of child directives. Instead, the directive asynchronously injects a [Query], which updates as children are added, removed, or moved by any [ViewPort] directive such as a for, an if, or a switch.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Children() dependencies:Query<Maker>) {
|
||||
}
|
||||
}
|
||||
|
||||
p. This directive would be instantiated with a [Query] which contains Dependency 4 and 6. Here, Dependency 5 would not be included, because it is not a direct child.
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a live collection of direct descendant directives [PENDING IMPLEMENTATION]
|
||||
|
||||
p Similar to @Children above, but also includes the children of the child elements.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Children() dependencies:Query<Maker>) {
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with a Query which would contain Dependency 4, 5 and 6.
|
||||
|
||||
.l-sub-section
|
||||
h3 Optional injection
|
||||
|
||||
p The normal behavior of directives is to return an error when a specified dependency cannot be resolved. If you would like to inject null on unresolved dependency instead, you can annotate that dependency with @Optional(). This explicitly permits the author of a template to treat some of the surrounding directives as optional.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Optional() dependency:Dependency) {
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with a Dependency directive found on the current element. If none can be found, the injector supplies null instead of throwing an error.
|
||||
|
||||
.l-main-section
|
||||
|
||||
h2 Members
|
||||
|
||||
p
|
||||
strong constructor({ selector, bind, events, lifecycle }:{ selector:string, bind:any, events: any, lifecycle:List }={})
|
||||
|
||||
.l-sub-section
|
||||
h3 bind
|
||||
|
||||
p Enumerates the set of properties that accept data binding for a directive.
|
||||
|
||||
p The bind property defines a set of directiveProperty to bindingProperty key-value pairs:
|
||||
|
||||
ul
|
||||
li directiveProperty specifies the component property where the value is written.
|
||||
li bindingProperty specifies the DOM property where the value is read from.
|
||||
|
||||
p You can include [Pipes] when specifying a bindingProperty to allow for data transformation and structural change detection of the value. These pipes will be evaluated in the context of this component.
|
||||
|
||||
|
||||
.l-main-section
|
||||
h2 Syntax
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
:markdown
|
||||
Enumerates the set of properties that accept data binding for a directive.
|
||||
|
||||
The `properties` property defines a set of `directiveProperty` to `bindingProperty`
|
||||
key-value pairs:
|
||||
|
||||
- `directiveProperty` specifies the component property where the value is written.
|
||||
- `bindingProperty` specifies the DOM property where the value is read from.
|
||||
|
||||
You can include [Pipes] when specifying a `bindingProperty` to allow for data transformation and structural
|
||||
change detection of the value. These pipes will be evaluated in the context of this component.
|
||||
|
||||
|
||||
## Syntax
|
||||
|
||||
```
|
||||
@Directive({
|
||||
bind: {
|
||||
properties: {
|
||||
'directiveProperty1': 'bindingProperty1',
|
||||
'directiveProperty2': 'bindingProperty2 | pipe1 | ...',
|
||||
...
|
||||
}
|
||||
}
|
||||
|
||||
.l-main-section
|
||||
h2 Basic Property Binding
|
||||
|
||||
p We can easily build a simple Tooltip directive that exposes a tooltip property, which can be used in templates with standard Angular syntax. For example:
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
```
|
||||
|
||||
|
||||
## Basic Property Binding
|
||||
|
||||
We can easily build a simple `Tooltip` directive that exposes a `tooltip` property, which can be used in templates
|
||||
with standard Angular syntax. For example:
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
selector: '[tooltip]',
|
||||
bind: {
|
||||
properties: {
|
||||
'text': 'tooltip'
|
||||
}
|
||||
})
|
||||
|
|
@ -270,28 +434,32 @@ p.
|
|||
// This will get called every time the 'tooltip' binding changes with the new value.
|
||||
}
|
||||
}
|
||||
|
||||
p We can then bind to the tooltip' property as either an expression (someExpression`) or as a string literal, as shown in the HTML template below:
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
<div [tooltip]="someExpression">...</div>
|
||||
<div tooltip="Some Text">...</div>
|
||||
|
||||
p Whenever the someExpression expression changes, the bind declaration instructs Angular to update the Tooltip's text property.
|
||||
|
||||
.l-main-section
|
||||
h2 Bindings With Pipes
|
||||
|
||||
p You can also use pipes when writing binding definitions for a directive.
|
||||
|
||||
p For example, we could write a binding that updates the directive on structural changes, rather than on reference changes, as normally occurs in change detection. (See: [Pipe] and [keyValueDiff] documentation for more details.)
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
```
|
||||
|
||||
We can then bind to the `tooltip' property as either an expression (`someExpression`) or as a string literal, as
|
||||
shown in the HTML template below:
|
||||
|
||||
```html
|
||||
<div [tooltip]="someExpression">...</div>
|
||||
<div tooltip="Some Text">...</div>
|
||||
```
|
||||
|
||||
Whenever the `someExpression` expression changes, the `properties` declaration instructs
|
||||
Angular to update the `Tooltip`'s `text` property.
|
||||
|
||||
|
||||
|
||||
## Bindings With Pipes
|
||||
|
||||
You can also use pipes when writing binding definitions for a directive.
|
||||
|
||||
For example, we could write a binding that updates the directive on structural changes, rather than on reference
|
||||
changes, as normally occurs in change detection. (See: [Pipe] and [keyValueDiff] documentation for more details.)
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
selector: '[class-set]',
|
||||
bind: {
|
||||
properties: {
|
||||
'classChanges': 'classSet | keyValDiff'
|
||||
}
|
||||
})
|
||||
|
|
@ -300,13 +468,55 @@ p.
|
|||
// This will get called every time the `class-set` expressions changes its structure.
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The template that this directive is used in may also contain its own pipes. For example:
|
||||
|
||||
```html
|
||||
<div [class-set]="someExpression | somePipe">
|
||||
```
|
||||
|
||||
In this case, the two pipes compose as if they were inlined: `someExpression | somePipe | keyValDiff`.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 selector
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
The CSS selector that triggers the instantiation of a directive.
|
||||
|
||||
Angular only allows directives to trigger on CSS selectors that do not cross element boundaries.
|
||||
|
||||
`selector` may be declared as one of the following:
|
||||
|
||||
- `element-name`: select by element name.
|
||||
- `.class`: select by class name.
|
||||
- `[attribute]`: select by attribute name.
|
||||
- `[attribute=value]`: select by attribute name and value.
|
||||
- `:not(sub_selector)`: select only if the element does not match the `sub_selector`.
|
||||
- `selector1, selector2`: select if either `selector1` or `selector2` matches.
|
||||
|
||||
|
||||
|
||||
|
||||
Suppose we have a directive with an `input[type=text]` selector.
|
||||
|
||||
And the following HTML:
|
||||
|
||||
```html
|
||||
<form>
|
||||
<input type="text">
|
||||
<input type="radio">
|
||||
<form>
|
||||
```
|
||||
|
||||
The directive would only be instantiated on the `<input type="text">` element.
|
||||
|
||||
p The template that this directive is used in may also contain its own pipes. For example:
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
<div [class-set]="someExpression | somePipe">
|
||||
|
||||
p In this case, the two pipes compose as if they were inlined: someExpression | somePipe | keyValDiff.
|
||||
|
||||
.location-badge exported from angular2/annotations
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
|
||||
.l-main-section
|
||||
h2 onAllChangesDone <span class="type">variable</span>
|
||||
p(class="module") exported from <a href="/angular2/annotations">angular2/annotations</a>
|
||||
|
||||
:markdown
|
||||
Notify a directive when the bindings of all its children have been changed.
|
||||
|
||||
## Example:
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
selector: '[class-set]',
|
||||
lifecycle: [onAllChangesDone]
|
||||
})
|
||||
class ClassSet {
|
||||
|
||||
onAllChangesDone() {
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
.l-main-section
|
||||
h2 onChange <span class="type">variable</span>
|
||||
p(class="module") exported from <a href="/angular2/annotations">angular2/annotations</a>
|
||||
|
||||
:markdown
|
||||
Notify a directive when any of its bindings have changed.
|
||||
|
||||
This method is called right after the directive's bindings have been checked,
|
||||
and before any of its children's bindings have been checked.
|
||||
|
||||
It is invoked only if at least one of the directive's bindings has changed.
|
||||
|
||||
## Example:
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
selector: '[class-set]',
|
||||
properties: {
|
||||
'propA': 'propA'
|
||||
'propB': 'propB'
|
||||
},
|
||||
lifecycle: [onChange]
|
||||
})
|
||||
class ClassSet {
|
||||
propA;
|
||||
propB;
|
||||
onChange(changes:{[idx: string, PropertyUpdate]}) {
|
||||
// This will get called after any of the properties have been updated.
|
||||
if (changes['propA']) {
|
||||
// if propA was updated
|
||||
}
|
||||
if (changes['propA']) {
|
||||
// if propB was updated
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
|
||||
.l-main-section
|
||||
h2 onDestroy <span class="type">variable</span>
|
||||
p(class="module") exported from <a href="/angular2/annotations">angular2/annotations</a>
|
||||
|
||||
:markdown
|
||||
Notify a directive whenever a [View] that contains it is destroyed.
|
||||
|
||||
## Example
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
...,
|
||||
lifecycle: [onDestroy]
|
||||
})
|
||||
class ClassSet {
|
||||
onDestroy() {
|
||||
// invoked to notify directive of the containing view destruction.
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
{
|
||||
"directive-class": {
|
||||
"title": "Directive Class",
|
||||
"type": "class"
|
||||
},
|
||||
|
||||
"component-class": {
|
||||
"title": "Component Class",
|
||||
"type": "class"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,312 +0,0 @@
|
|||
p.
|
||||
Directives allow you to attach behavior to elements in the DOM.
|
||||
Directive is an abstract concept, instead use concrete directives: [Component], [DynamicComponent], [Decorator] or [Viewport].
|
||||
A directive consists of a single directive annotation and a controller class. When the directive's [selector] matches elements in the DOM, the following steps occur:
|
||||
|
||||
p.
|
||||
For each directive, the [ElementInjector] attempts to resolve the directive's constructor arguments.
|
||||
Angular instantiates directives for each matched element using [ElementInjector] in a depth-first order, as declared in the HTML.
|
||||
|
||||
.l-main-section
|
||||
|
||||
h2 Understanding How Injection Works
|
||||
|
||||
p There are three stages of injection resolution.
|
||||
|
||||
ol
|
||||
li <strong>Pre-existing Injectors:</strong>
|
||||
ul
|
||||
li The terminal [Injector] cannot resolve dependencies. It either throws an error or, if the dependency was specified as @Optional, returns null.
|
||||
li The primordial injector resolves browser singleton resources, such as: cookies, title, location, and others.
|
||||
|
||||
li <strong>Component Injectors:</strong> Each @Component has its own [Injector], and they follow the same parent-child hierarchy as the components in the DOM.
|
||||
|
||||
li <strong>Element Injectors:</strong> Each component has a Shadow DOM. Within the Shadow DOM each element has an [ElementInjector] which follow the same parent-child hierarchy as the DOM elements themselves.
|
||||
|
||||
|
||||
p When a template is instantiated, it also must instantiate the corresponding directives in a depth-first order. The current [ElementInjector] resolves the constructor dependencies for each directive.
|
||||
|
||||
p Angular then resolves dependencies as follows, according to the order in which they appear in the [View]:
|
||||
|
||||
ol
|
||||
li Dependencies on the current element
|
||||
li Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
|
||||
li Dependencies on component injectors and their parents until it encounters the root component
|
||||
li Dependencies on pre-existing injectors
|
||||
|
||||
p The [ElementInjector] can inject other directives, element-specific special objects, or it can delegate to the parent injector.
|
||||
|
||||
p To inject other directives, declare the constructor parameter as:
|
||||
|
||||
ul
|
||||
li directive:DirectiveType: a directive on the current element only
|
||||
li @Ancestor() directive:DirectiveType: any directive that matches the type between the current element and the Shadow DOM root. Current element is not included in the resolution, therefor even if it could resolve it, it will be ignored.
|
||||
li @Parent() directive:DirectiveType: any directive that matches the type on a direct parent element only.
|
||||
li @Children query:Query<DirectiveType>: A live collection of direct child directives [TO BE IMPLEMENTED].
|
||||
li @Descendants query:Query<DirectiveType>: A live collection of any child directives [TO BE IMPLEMENTED].
|
||||
|
||||
p To inject element-specific special objects, declare the constructor parameter as:
|
||||
|
||||
ul
|
||||
li element: NgElement to obtain a DOM element (DEPRECATED: replacement coming)
|
||||
li viewContainer: ViewContainer to control child template instantiation, for [Viewport] directives only
|
||||
li bindingPropagation: BindingPropagation to control change detection in a more granular way.
|
||||
|
||||
.l-main-section
|
||||
h2 Example of Injection
|
||||
|
||||
p The following example demonstrates how dependency injection resolves constructor arguments in practice.
|
||||
|
||||
p Assume this HTML template:
|
||||
|
||||
pre.prettyprint.linenums.lang-html
|
||||
code.
|
||||
<div dependency="1">
|
||||
<div dependency="2">
|
||||
<div dependency="3" my-directive>
|
||||
<div dependency="4">
|
||||
<div dependency="5"></div>
|
||||
</div>
|
||||
<div dependency="6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
p With the following dependency decorator and SomeService injectable class.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Injectable()
|
||||
class SomeService {
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
selector: '[dependency]',
|
||||
bind: {
|
||||
'id':'dependency'
|
||||
}
|
||||
})
|
||||
class Dependency {
|
||||
id:string;
|
||||
}
|
||||
|
||||
p Let's step through the different ways in which MyDirective could be declared...
|
||||
|
||||
.l-sub-section
|
||||
h3 No injection
|
||||
|
||||
p Here the constructor is declared with no arguments, therefore nothing is injected into MyDirective.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with no dependencies.
|
||||
|
||||
.l-sub-section
|
||||
h3 Component-level injection
|
||||
|
||||
p Directives can inject any injectable instance from the closest component injector or any of its parents.
|
||||
|
||||
p Here, the constructor declares a parameter, someService, and injects the SomeService type from the parent component's injector.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(someService: SomeService) {
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with a dependency on SomeService.
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a directive from the current element
|
||||
|
||||
p Directives can inject other directives declared on the current element.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(dependency: Dependency) {
|
||||
expect(dependency.id).toEqual(3);
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with Dependency declared at the same element, in this case dependency="3".
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a directive from a direct parent element
|
||||
|
||||
p Directives can inject other directives declared on a direct parent element. By definition, a directive with a @Parent annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Parent() dependency: Dependency) {
|
||||
expect(dependency.id).toEqual(2);
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with Dependency declared at the parent element, in this case dependency="2".
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a directive from any ancestor elements
|
||||
|
||||
p Directives can inject other directives declared on any ancestor element (in the current Shadow DOM), i.e. on the parent element and its parents. By definition, a directive with an @Ancestor annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Ancestor() dependency: Dependency) {
|
||||
expect(dependency.id).toEqual(2);
|
||||
}
|
||||
}
|
||||
|
||||
p Unlike the @Parent which only checks the parent, @Ancestor checks the parent, as well as its parents recursively. If dependency="2" didn't exist on the direct parent, this injection would have returned dependency="1".
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a live collection of direct child directives [PENDING IMPLEMENTATION]
|
||||
p A directive can also query for other child directives. Since parent directives are instantiated before child directives, a directive can't simply inject the list of child directives. Instead, the directive asynchronously injects a [Query], which updates as children are added, removed, or moved by any [ViewPort] directive such as a for, an if, or a switch.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Children() dependencies:Query<Maker>) {
|
||||
}
|
||||
}
|
||||
|
||||
p. This directive would be instantiated with a [Query] which contains Dependency 4 and 6. Here, Dependency 5 would not be included, because it is not a direct child.
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a live collection of direct descendant directives [PENDING IMPLEMENTATION]
|
||||
|
||||
p Similar to @Children above, but also includes the children of the child elements.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Children() dependencies:Query<Maker>) {
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with a Query which would contain Dependency 4, 5 and 6.
|
||||
|
||||
.l-sub-section
|
||||
h3 Optional injection
|
||||
|
||||
p The normal behavior of directives is to return an error when a specified dependency cannot be resolved. If you would like to inject null on unresolved dependency instead, you can annotate that dependency with @Optional(). This explicitly permits the author of a template to treat some of the surrounding directives as optional.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Optional() dependency:Dependency) {
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with a Dependency directive found on the current element. If none can be found, the injector supplies null instead of throwing an error.
|
||||
|
||||
.l-main-section
|
||||
|
||||
h2 Members
|
||||
|
||||
p
|
||||
strong constructor({ selector, bind, events, lifecycle }:{ selector:string, bind:any, events: any, lifecycle:List }={})
|
||||
|
||||
.l-sub-section
|
||||
h3 bind
|
||||
|
||||
p Enumerates the set of properties that accept data binding for a directive.
|
||||
|
||||
p The bind property defines a set of directiveProperty to bindingProperty key-value pairs:
|
||||
|
||||
ul
|
||||
li directiveProperty specifies the component property where the value is written.
|
||||
li bindingProperty specifies the DOM property where the value is read from.
|
||||
|
||||
p You can include [Pipes] when specifying a bindingProperty to allow for data transformation and structural change detection of the value. These pipes will be evaluated in the context of this component.
|
||||
|
||||
|
||||
.l-main-section
|
||||
h2 Syntax
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Directive({
|
||||
bind: {
|
||||
'directiveProperty1': 'bindingProperty1',
|
||||
'directiveProperty2': 'bindingProperty2 | pipe1 | ...',
|
||||
...
|
||||
}
|
||||
}
|
||||
|
||||
.l-main-section
|
||||
h2 Basic Property Binding
|
||||
|
||||
p We can easily build a simple Tooltip directive that exposes a tooltip property, which can be used in templates with standard Angular syntax. For example:
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({
|
||||
selector: '[tooltip]',
|
||||
bind: {
|
||||
'text': 'tooltip'
|
||||
}
|
||||
})
|
||||
class Tooltip {
|
||||
set text(text) {
|
||||
// This will get called every time the 'tooltip' binding changes with the new value.
|
||||
}
|
||||
}
|
||||
|
||||
p We can then bind to the tooltip' property as either an expression (someExpression`) or as a string literal, as shown in the HTML template below:
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
<div [tooltip]="someExpression">...</div>
|
||||
<div tooltip="Some Text">...</div>
|
||||
|
||||
p Whenever the someExpression expression changes, the bind declaration instructs Angular to update the Tooltip's text property.
|
||||
|
||||
.l-main-section
|
||||
h2 Bindings With Pipes
|
||||
|
||||
p You can also use pipes when writing binding definitions for a directive.
|
||||
|
||||
p For example, we could write a binding that updates the directive on structural changes, rather than on reference changes, as normally occurs in change detection. (See: [Pipe] and [keyValueDiff] documentation for more details.)
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({
|
||||
selector: '[class-set]',
|
||||
bind: {
|
||||
'classChanges': 'classSet | keyValDiff'
|
||||
}
|
||||
})
|
||||
class ClassSet {
|
||||
set classChanges(changes:KeyValueChanges) {
|
||||
// This will get called every time the `class-set` expressions changes its structure.
|
||||
}
|
||||
}
|
||||
|
||||
p The template that this directive is used in may also contain its own pipes. For example:
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
<div [class-set]="someExpression | somePipe">
|
||||
|
||||
p In this case, the two pipes compose as if they were inlined: someExpression | somePipe | keyValDiff.
|
||||
|
||||
.location-badge exported from angular2/annotations
|
||||
|
|
@ -1,312 +0,0 @@
|
|||
p.
|
||||
Directives allow you to attach behavior to elements in the DOM.
|
||||
Directive is an abstract concept, instead use concrete directives: [Component], [DynamicComponent], [Decorator] or [Viewport].
|
||||
A directive consists of a single directive annotation and a controller class. When the directive's [selector] matches elements in the DOM, the following steps occur:
|
||||
|
||||
p.
|
||||
For each directive, the [ElementInjector] attempts to resolve the directive's constructor arguments.
|
||||
Angular instantiates directives for each matched element using [ElementInjector] in a depth-first order, as declared in the HTML.
|
||||
|
||||
.l-main-section
|
||||
|
||||
h2 Understanding How Injection Works
|
||||
|
||||
p There are three stages of injection resolution.
|
||||
|
||||
ol
|
||||
li <strong>Pre-existing Injectors:</strong>
|
||||
ul
|
||||
li The terminal [Injector] cannot resolve dependencies. It either throws an error or, if the dependency was specified as @Optional, returns null.
|
||||
li The primordial injector resolves browser singleton resources, such as: cookies, title, location, and others.
|
||||
|
||||
li <strong>Component Injectors:</strong> Each @Component has its own [Injector], and they follow the same parent-child hierarchy as the components in the DOM.
|
||||
|
||||
li <strong>Element Injectors:</strong> Each component has a Shadow DOM. Within the Shadow DOM each element has an [ElementInjector] which follow the same parent-child hierarchy as the DOM elements themselves.
|
||||
|
||||
|
||||
p When a template is instantiated, it also must instantiate the corresponding directives in a depth-first order. The current [ElementInjector] resolves the constructor dependencies for each directive.
|
||||
|
||||
p Angular then resolves dependencies as follows, according to the order in which they appear in the [View]:
|
||||
|
||||
ol
|
||||
li Dependencies on the current element
|
||||
li Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
|
||||
li Dependencies on component injectors and their parents until it encounters the root component
|
||||
li Dependencies on pre-existing injectors
|
||||
|
||||
p The [ElementInjector] can inject other directives, element-specific special objects, or it can delegate to the parent injector.
|
||||
|
||||
p To inject other directives, declare the constructor parameter as:
|
||||
|
||||
ul
|
||||
li directive:DirectiveType: a directive on the current element only
|
||||
li @Ancestor() directive:DirectiveType: any directive that matches the type between the current element and the Shadow DOM root. Current element is not included in the resolution, therefor even if it could resolve it, it will be ignored.
|
||||
li @Parent() directive:DirectiveType: any directive that matches the type on a direct parent element only.
|
||||
li @Children query:Query<DirectiveType>: A live collection of direct child directives [TO BE IMPLEMENTED].
|
||||
li @Descendants query:Query<DirectiveType>: A live collection of any child directives [TO BE IMPLEMENTED].
|
||||
|
||||
p To inject element-specific special objects, declare the constructor parameter as:
|
||||
|
||||
ul
|
||||
li element: NgElement to obtain a DOM element (DEPRECATED: replacement coming)
|
||||
li viewContainer: ViewContainer to control child template instantiation, for [Viewport] directives only
|
||||
li bindingPropagation: BindingPropagation to control change detection in a more granular way.
|
||||
|
||||
.l-main-section
|
||||
h2 Example of Injection
|
||||
|
||||
p The following example demonstrates how dependency injection resolves constructor arguments in practice.
|
||||
|
||||
p Assume this HTML template:
|
||||
|
||||
pre.prettyprint.linenums.lang-html
|
||||
code.
|
||||
<div dependency="1">
|
||||
<div dependency="2">
|
||||
<div dependency="3" my-directive>
|
||||
<div dependency="4">
|
||||
<div dependency="5"></div>
|
||||
</div>
|
||||
<div dependency="6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
p With the following dependency decorator and SomeService injectable class.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Injectable()
|
||||
class SomeService {
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
selector: '[dependency]',
|
||||
bind: {
|
||||
'id':'dependency'
|
||||
}
|
||||
})
|
||||
class Dependency {
|
||||
id:string;
|
||||
}
|
||||
|
||||
p Let's step through the different ways in which MyDirective could be declared...
|
||||
|
||||
.l-sub-section
|
||||
h3 No injection
|
||||
|
||||
p Here the constructor is declared with no arguments, therefore nothing is injected into MyDirective.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with no dependencies.
|
||||
|
||||
.l-sub-section
|
||||
h3 Component-level injection
|
||||
|
||||
p Directives can inject any injectable instance from the closest component injector or any of its parents.
|
||||
|
||||
p Here, the constructor declares a parameter, someService, and injects the SomeService type from the parent component's injector.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(someService: SomeService) {
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with a dependency on SomeService.
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a directive from the current element
|
||||
|
||||
p Directives can inject other directives declared on the current element.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(dependency: Dependency) {
|
||||
expect(dependency.id).toEqual(3);
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with Dependency declared at the same element, in this case dependency="3".
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a directive from a direct parent element
|
||||
|
||||
p Directives can inject other directives declared on a direct parent element. By definition, a directive with a @Parent annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Parent() dependency: Dependency) {
|
||||
expect(dependency.id).toEqual(2);
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with Dependency declared at the parent element, in this case dependency="2".
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a directive from any ancestor elements
|
||||
|
||||
p Directives can inject other directives declared on any ancestor element (in the current Shadow DOM), i.e. on the parent element and its parents. By definition, a directive with an @Ancestor annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Ancestor() dependency: Dependency) {
|
||||
expect(dependency.id).toEqual(2);
|
||||
}
|
||||
}
|
||||
|
||||
p Unlike the @Parent which only checks the parent, @Ancestor checks the parent, as well as its parents recursively. If dependency="2" didn't exist on the direct parent, this injection would have returned dependency="1".
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a live collection of direct child directives [PENDING IMPLEMENTATION]
|
||||
p A directive can also query for other child directives. Since parent directives are instantiated before child directives, a directive can't simply inject the list of child directives. Instead, the directive asynchronously injects a [Query], which updates as children are added, removed, or moved by any [ViewPort] directive such as a for, an if, or a switch.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Children() dependencies:Query<Maker>) {
|
||||
}
|
||||
}
|
||||
|
||||
p. This directive would be instantiated with a [Query] which contains Dependency 4 and 6. Here, Dependency 5 would not be included, because it is not a direct child.
|
||||
|
||||
.l-sub-section
|
||||
h3 Injecting a live collection of direct descendant directives [PENDING IMPLEMENTATION]
|
||||
|
||||
p Similar to @Children above, but also includes the children of the child elements.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Children() dependencies:Query<Maker>) {
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with a Query which would contain Dependency 4, 5 and 6.
|
||||
|
||||
.l-sub-section
|
||||
h3 Optional injection
|
||||
|
||||
p The normal behavior of directives is to return an error when a specified dependency cannot be resolved. If you would like to inject null on unresolved dependency instead, you can annotate that dependency with @Optional(). This explicitly permits the author of a template to treat some of the surrounding directives as optional.
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Optional() dependency:Dependency) {
|
||||
}
|
||||
}
|
||||
|
||||
p This directive would be instantiated with a Dependency directive found on the current element. If none can be found, the injector supplies null instead of throwing an error.
|
||||
|
||||
.l-main-section
|
||||
|
||||
h2 Members
|
||||
|
||||
p
|
||||
strong constructor({ selector, bind, events, lifecycle }:{ selector:string, bind:any, events: any, lifecycle:List }={})
|
||||
|
||||
.l-sub-section
|
||||
h3 bind
|
||||
|
||||
p Enumerates the set of properties that accept data binding for a directive.
|
||||
|
||||
p The bind property defines a set of directiveProperty to bindingProperty key-value pairs:
|
||||
|
||||
ul
|
||||
li directiveProperty specifies the component property where the value is written.
|
||||
li bindingProperty specifies the DOM property where the value is read from.
|
||||
|
||||
p You can include [Pipes] when specifying a bindingProperty to allow for data transformation and structural change detection of the value. These pipes will be evaluated in the context of this component.
|
||||
|
||||
|
||||
.l-main-section
|
||||
h2 Syntax
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Directive({
|
||||
bind: {
|
||||
'directiveProperty1': 'bindingProperty1',
|
||||
'directiveProperty2': 'bindingProperty2 | pipe1 | ...',
|
||||
...
|
||||
}
|
||||
}
|
||||
|
||||
.l-main-section
|
||||
h2 Basic Property Binding
|
||||
|
||||
p We can easily build a simple Tooltip directive that exposes a tooltip property, which can be used in templates with standard Angular syntax. For example:
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({
|
||||
selector: '[tooltip]',
|
||||
bind: {
|
||||
'text': 'tooltip'
|
||||
}
|
||||
})
|
||||
class Tooltip {
|
||||
set text(text) {
|
||||
// This will get called every time the 'tooltip' binding changes with the new value.
|
||||
}
|
||||
}
|
||||
|
||||
p We can then bind to the tooltip' property as either an expression (someExpression`) or as a string literal, as shown in the HTML template below:
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
<div [tooltip]="someExpression">...</div>
|
||||
<div tooltip="Some Text">...</div>
|
||||
|
||||
p Whenever the someExpression expression changes, the bind declaration instructs Angular to update the Tooltip's text property.
|
||||
|
||||
.l-main-section
|
||||
h2 Bindings With Pipes
|
||||
|
||||
p You can also use pipes when writing binding definitions for a directive.
|
||||
|
||||
p For example, we could write a binding that updates the directive on structural changes, rather than on reference changes, as normally occurs in change detection. (See: [Pipe] and [keyValueDiff] documentation for more details.)
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
@Decorator({
|
||||
selector: '[class-set]',
|
||||
bind: {
|
||||
'classChanges': 'classSet | keyValDiff'
|
||||
}
|
||||
})
|
||||
class ClassSet {
|
||||
set classChanges(changes:KeyValueChanges) {
|
||||
// This will get called every time the `class-set` expressions changes its structure.
|
||||
}
|
||||
}
|
||||
|
||||
p The template that this directive is used in may also contain its own pipes. For example:
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
<div [class-set]="someExpression | somePipe">
|
||||
|
||||
p In this case, the two pipes compose as if they were inlined: someExpression | somePipe | keyValDiff.
|
||||
|
||||
.location-badge exported from angular2/annotations
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/change_detection">angular2/change_detection</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/interfaces.js#L34">angular2/src/change_detection/interfaces.js (line 34)</a>
|
||||
|
||||
:markdown
|
||||
Interface used by Angular to control the change detection strategy for an application.
|
||||
|
||||
Angular implements the following change detection strategies by default:
|
||||
|
||||
- [dynamicChangeDetection]: slower, but does not require `eval()`.
|
||||
- [jitChangeDetection]: faster, but requires `eval()`.
|
||||
|
||||
In JavaScript, you should always use `jitChangeDetection`, unless you are in an environment that has
|
||||
[CSP](https://developer.mozilla.org/en-US/docs/Web/Security/CSP), such as a Chrome Extension.
|
||||
|
||||
In Dart, use `dynamicChangeDetection` during development. The Angular transformer generates an analog to the
|
||||
`jitChangeDetection` strategy at compile time.
|
||||
|
||||
|
||||
See: [dynamicChangeDetection], [jitChangeDetection]
|
||||
|
||||
# Example
|
||||
```javascript
|
||||
bootstrap(MyApp, [bind(ChangeDetection).toValue(dynamicChangeDetection)]);
|
||||
```
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 createProtoChangeDetector
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(name:string, changeControlStrategy:string=DEFAULT)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/change_detection">angular2/change_detection</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detector_ref.js#L11">angular2/src/change_detection/change_detector_ref.js (line 11)</a>
|
||||
|
||||
:markdown
|
||||
Controls change detection.
|
||||
|
||||
[ChangeDetectorRef] allows requesting checks for detectors that rely on observables. It also allows detaching and
|
||||
attaching change detector subtrees.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(cd:ChangeDetector)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 detach
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Detaches the change detector from the change detector tree.
|
||||
|
||||
The detached change detector will not be checked until it is reattached.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 reattach
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Reattach the change detector to the change detector tree.
|
||||
|
||||
This also requests a check of this change detector. This reattached change detector will be checked during the
|
||||
next change detection run.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 requestCheck
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Request to check all ON_PUSH ancestors.
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/change_detection">angular2/change_detection</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detection.js#L24">angular2/src/change_detection/change_detection.js (line 24)</a>
|
||||
|
||||
:markdown
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(registry:PipeRegistry)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 createProtoChangeDetector
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(name:string, changeControlStrategy:string = DEFAULT)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 registry
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/change_detection">angular2/change_detection</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detection.js#L41">angular2/src/change_detection/change_detection.js (line 41)</a>
|
||||
|
||||
:markdown
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(registry:PipeRegistry)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 createProtoChangeDetector
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(name:string, changeControlStrategy:string = DEFAULT)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 registry
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/change_detection">angular2/change_detection</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/life_cycle/life_cycle.js#L31">angular2/src/core/life_cycle/life_cycle.js (line 31)</a>
|
||||
|
||||
:markdown
|
||||
Provides access to explicitly trigger change detection in an application.
|
||||
|
||||
By default, [Zone] triggers change detection in Angular on each virtual machine (VM) turn. When testing, or in some
|
||||
limited application use cases, a developer can also trigger change detection with the `lifecycle.tick()` method.
|
||||
|
||||
Each Angular application has a single `LifeCycle` instance.
|
||||
|
||||
# Example
|
||||
|
||||
This is a contrived example, since the bootstrap automatically runs inside of the [Zone], which invokes
|
||||
`lifecycle.tick()` on your behalf.
|
||||
|
||||
```javascript
|
||||
bootstrap(MyApp).then((ref:ComponentRef) => {
|
||||
var lifeCycle = ref.injector.get(LifeCycle);
|
||||
var myApp = ref.instance;
|
||||
|
||||
ref.doSomething();
|
||||
lifecycle.tick();
|
||||
});
|
||||
```
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(exceptionHandler:ExceptionHandler, changeDetector:ChangeDetector = null, enforceNoNewChanges:boolean = false)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 registerWith
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(zone:VmTurnZone, changeDetector:ChangeDetector = null)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 tick
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Invoke this method to explicitly process change detection and its side-effects.
|
||||
|
||||
In development mode, `tick()` also performs a second change detection cycle to ensure that no further
|
||||
changes are detected. If additional changes are picked up during this second cycle, bindings in the app have
|
||||
side-effects that cannot be resolved in a single change detection pass. In this case, Angular throws an error,
|
||||
since an Angular application can only have one change detection pass during which all change detection must
|
||||
complete.
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"DynamicChangeDetection-class" : {
|
||||
"title" : "DynamicChangeDetection Class"
|
||||
},
|
||||
|
||||
"JitChangeDetection-class" : {
|
||||
"title" : "JitChangeDetection Class"
|
||||
},
|
||||
|
||||
"ChangeDetectorRef-class" : {
|
||||
"title" : "ChangeDetectorRef Class"
|
||||
},
|
||||
|
||||
"ChangeDetection-class" : {
|
||||
"title" : "ChangeDetection Class"
|
||||
},
|
||||
|
||||
"LifeCycle-class" : {
|
||||
"title" : "LifeCycle Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
ul
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
||||
name = page.menuTitle || page.title
|
||||
selected = current.path[4] == slug ? 'is-selected':''
|
||||
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{slug}</a>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/core">angular2/core</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/exception_handler.js#L34">angular2/src/core/exception_handler.js (line 34)</a>
|
||||
|
||||
:markdown
|
||||
Provides a hook for centralized exception handling.
|
||||
|
||||
The default implementation of `ExceptionHandler` prints error messages to the `Console`. To intercept error handling,
|
||||
write a custom exception handler that replaces this default as appropriate for your app.
|
||||
|
||||
# Example
|
||||
|
||||
```javascript
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
injectables: [
|
||||
bind(ExceptionHandler).toClass(MyExceptionHandler)
|
||||
]
|
||||
})
|
||||
@View(...)
|
||||
class MyApp { ... }
|
||||
|
||||
|
||||
class MyExceptionHandler implements ExceptionHandler {
|
||||
call(error, stackTrace = null, reason = null) {
|
||||
// do something with the exception
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 call
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(error, stackTrace = null, reason = null)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/core">angular2/core</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/ng_element.js#L13">angular2/src/core/compiler/ng_element.js (line 13)</a>
|
||||
|
||||
:markdown
|
||||
Allows direct access to the underlying DOM element.
|
||||
|
||||
Attention: NgElement will be replaced by a different concept
|
||||
for accessing an element in a way that is compatible with the render layer.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(view, boundElementIndex)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 domElement
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 getAttribute
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(name:string)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"bootstrap-function" : {
|
||||
"title" : "bootstrap Function"
|
||||
},
|
||||
|
||||
"NgElement-class" : {
|
||||
"title" : "NgElement Class"
|
||||
},
|
||||
|
||||
"ExceptionHandler-class" : {
|
||||
"title" : "ExceptionHandler Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
|
||||
.l-main-section
|
||||
h2(class="function export") bootstrap
|
||||
|
||||
p <code>(appComponentType: Type, componentInjectableBindings: List<Binding> = null, errorReporter: Function = null)</code>
|
||||
|
||||
p(class="module").
|
||||
exported from <a href="/angular2/core">angular2/core</a>
|
||||
|
||||
:markdown
|
||||
Bootstrapping for Angular applications.
|
||||
|
||||
You instantiate an Angular application by explicitly specifying a component to use as the root component for your
|
||||
application via the `bootstrap()` method.
|
||||
|
||||
## Simple Example
|
||||
|
||||
Assuming this `index.html`:
|
||||
|
||||
```html
|
||||
<html>
|
||||
<!-- load Angular script tags here. -->
|
||||
<body>
|
||||
<my-app>loading...</my-app>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
An application is bootstrapped inside an existing browser DOM, typically `index.html`. Unlike Angular 1, Angular 2
|
||||
does not compile/process bindings in `index.html`. This is mainly for security reasons, as well as architectural
|
||||
changes in Angular 2. This means that `index.html` can safely be processed using server-side technologies such as
|
||||
bindings. Bindings can thus use double-curly `{{ syntax }}` without collision from Angular 2 component double-curly
|
||||
`{{ syntax }}`.
|
||||
|
||||
We can use this script code:
|
||||
|
||||
```
|
||||
@Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: 'Hello {{ name }}!'
|
||||
})
|
||||
class MyApp {
|
||||
name:string;
|
||||
|
||||
constructor() {
|
||||
this.name = 'World';
|
||||
}
|
||||
}
|
||||
|
||||
main() {
|
||||
return bootstrap(MyApp);
|
||||
}
|
||||
```
|
||||
|
||||
When the app developer invokes `bootstrap()` with the root component `MyApp` as its argument, Angular performs the
|
||||
following tasks:
|
||||
|
||||
1. It uses the component's `selector` property to locate the DOM element which needs to be upgraded into
|
||||
the angular component.
|
||||
2. It creates a new child injector (from the primordial injector) and configures the injector with the component's
|
||||
`injectables`. Optionally, you can also override the injector configuration for an app by invoking
|
||||
`bootstrap` with the `componentInjectableBindings` argument.
|
||||
3. It creates a new [Zone] and connects it to the angular application's change detection domain instance.
|
||||
4. It creates a shadow DOM on the selected component's host element and loads the template into it.
|
||||
5. It instantiates the specified component.
|
||||
6. Finally, Angular performs change detection to apply the initial data bindings for the application.
|
||||
|
||||
|
||||
## Instantiating Multiple Applications on a Single Page
|
||||
|
||||
There are two ways to do this.
|
||||
|
||||
|
||||
### Isolated Applications
|
||||
|
||||
Angular creates a new application each time that the `bootstrap()` method is invoked. When multiple applications
|
||||
are created for a page, Angular treats each application as independent within an isolated change detection and
|
||||
[Zone] domain. If you need to share data between applications, use the strategy described in the next
|
||||
section, "Applications That Share Change Detection."
|
||||
|
||||
|
||||
### Applications That Share Change Detection
|
||||
|
||||
If you need to bootstrap multiple applications that share common data, the applications must share a common
|
||||
change detection and zone. To do that, create a meta-component that lists the application components in its template.
|
||||
By only invoking the `bootstrap()` method once, with the meta-component as its argument, you ensure that only a
|
||||
single change detection zone is created and therefore data can be shared across the applications.
|
||||
|
||||
|
||||
## Primordial Injector
|
||||
|
||||
When working within a browser window, there are many singleton resources: cookies, title, location, and others.
|
||||
Angular services that represent these resources must likewise be shared across all Angular applications that
|
||||
occupy the same browser window. For this reason, Angular creates exactly one global primordial injector which stores
|
||||
all shared services, and each angular application injector has the primordial injector as its parent.
|
||||
|
||||
Each application has its own private injector as well. When there are multiple applications on a page, Angular treats
|
||||
each application injector's services as private to that application.
|
||||
|
||||
|
||||
# API
|
||||
- [appComponentType]: The root component which should act as the application. This is a reference to a [Type]
|
||||
which is annotated with `@Component(...)`.
|
||||
- [componentInjectableBindings]: An additional set of bindings that can be added to the [Component.injectables] to
|
||||
override default injection behavior.
|
||||
- [errorReporter]: `function(exception:any, stackTrace:string)` a default error reporter for unhandled exceptions.
|
||||
|
||||
Returns a [Promise] with the application`s private [Injector].
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
ul
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
||||
name = page.menuTitle || page.title
|
||||
selected = current.path[4] == slug ? 'is-selected':''
|
||||
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{slug}</a>
|
||||
|
|
@ -0,0 +1,256 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/di">angular2/di</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/binding.js#L49">angular2/src/di/binding.js (line 49)</a>
|
||||
|
||||
:markdown
|
||||
Describes how the [Injector] should instantiate a given token.
|
||||
|
||||
See [bind].
|
||||
|
||||
## Example
|
||||
|
||||
```javascript
|
||||
var injector = Injector.resolveAndCreate([
|
||||
new Binding(String, { toValue: 'Hello' })
|
||||
]);
|
||||
|
||||
expect(injector.get(String)).toEqual('Hello');
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(token, {
|
||||
toClass,
|
||||
toValue,
|
||||
toAlias,
|
||||
toFactory,
|
||||
toAsyncFactory,
|
||||
deps
|
||||
})
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 dependencies
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Used in conjunction with `toFactory` or `toAsyncFactory` and specifies the `token`s which should be injected
|
||||
into the factory function.
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
var injector = Injector.resolveAndCreate([
|
||||
new Binding(Number, { toFactory: () => { return 1+2; }}),
|
||||
new Binding(String, { toFactory: (value) => { return "Value: " + value; },
|
||||
dependencies: [String] })
|
||||
]);
|
||||
|
||||
expect(injector.get(Number)).toEqual(3);
|
||||
expect(injector.get(String)).toEqual('Value: 3');
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 resolve
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toAlias
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Bind a key to an alias of an existing key.
|
||||
|
||||
An alias means that we will return the same instance as if the alias token was used. (This is in contrast to
|
||||
`toClass` where a separet instance of `toClass` will be returned.)
|
||||
|
||||
|
||||
|
||||
Becuse `toAlias` and `toClass` are often confused the example contains both use cases for easy comparison.
|
||||
|
||||
```javascript
|
||||
|
||||
class Vehicle {}
|
||||
|
||||
class Car extends Vehicle {}
|
||||
|
||||
var injectorAlias = Injector.resolveAndCreate([
|
||||
Car,
|
||||
new Binding(Vehicle, { toAlias: Car })
|
||||
]);
|
||||
var injectorClass = Injector.resolveAndCreate([
|
||||
Car,
|
||||
new Binding(Vehicle, { toClass: Car })
|
||||
]);
|
||||
|
||||
expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
|
||||
expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
|
||||
|
||||
expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
|
||||
expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toAsyncFactory
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Bind a key to a function which computes the value asynchronously.
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
var injector = Injector.resolveAndCreate([
|
||||
new Binding(Number, { toAsyncFactory: () => {
|
||||
return new Promise((resolve) => resolve(1 + 2));
|
||||
}}),
|
||||
new Binding(String, { toFactory: (value) => { return "Value: " + value; },
|
||||
dependencies: [String]})
|
||||
]);
|
||||
|
||||
injector.asyncGet(Number).then((v) => expect(v).toBe(3));
|
||||
injector.asyncGet(String).then((v) => expect(v).toBe('Value: 3'));
|
||||
```
|
||||
|
||||
The interesting thing to note is that event thougt `Numeber` has an async factory, the `String` factory
|
||||
function takes the resolved value. This shows that the [Injector] delays executing of the `String` factory
|
||||
until after the `Number` is resolved. This can only be done if the `token` is retrive
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toClass
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Bind an interface to an implementation / subclass.
|
||||
|
||||
|
||||
|
||||
Becuse `toAlias` and `toClass` are often confused the example contains both use cases for easy comparison.
|
||||
|
||||
```javascript
|
||||
|
||||
class Vehicle {}
|
||||
|
||||
class Car extends Vehicle {}
|
||||
|
||||
var injectorClass = Injector.resolveAndCreate([
|
||||
Car,
|
||||
new Binding(Vehicle, { toClass: Car })
|
||||
]);
|
||||
var injectorAlias = Injector.resolveAndCreate([
|
||||
Car,
|
||||
new Binding(Vehicle, { toAlias: Car })
|
||||
]);
|
||||
|
||||
expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
|
||||
expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
|
||||
|
||||
expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
|
||||
expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toFactory
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Bind a key to a function which computes the value.
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
var injector = Injector.resolveAndCreate([
|
||||
new Binding(Number, { toFactory: () => { return 1+2; }}),
|
||||
new Binding(String, { toFactory: (value) => { return "Value: " + value; },
|
||||
dependencies: [String] })
|
||||
]);
|
||||
|
||||
expect(injector.get(Number)).toEqual(3);
|
||||
expect(injector.get(String)).toEqual('Value: 3');
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toValue
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Bind a key to a value.
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
var injector = Injector.resolveAndCreate([
|
||||
new Binding(String, { toValue: 'Hello' })
|
||||
]);
|
||||
|
||||
expect(injector.get(String)).toEqual('Hello');
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 token
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Token used when retriving this binding. Usually the [Type].
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/di">angular2/di</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/binding.js#L299">angular2/src/di/binding.js (line 299)</a>
|
||||
|
||||
:markdown
|
||||
Helper class for [bind] function.
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(token)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toAlias
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(aliasToken)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Bind a key to an alias of an existing key.
|
||||
|
||||
An alias means that we will return the same instance as if the alias token was used. (This is in contrast to
|
||||
`toClass` where a separet instance of `toClass` will be returned.)
|
||||
|
||||
|
||||
|
||||
Becuse `toAlias` and `toClass` are often confused the example contains both use cases for easy comparison.
|
||||
|
||||
```javascript
|
||||
|
||||
class Vehicle {}
|
||||
|
||||
class Car extends Vehicle {}
|
||||
|
||||
var injectorAlias = Injector.resolveAndCreate([
|
||||
Car,
|
||||
bind(Vehicle).toAlias(Car)
|
||||
]);
|
||||
var injectorClass = Injector.resolveAndCreate([
|
||||
Car,
|
||||
bind(Vehicle).toClass(Car)
|
||||
]);
|
||||
|
||||
expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
|
||||
expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
|
||||
|
||||
expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
|
||||
expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toAsyncFactory
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(factoryFunction:Function, dependencies:List = null)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Bind a key to a function which computes the value asynchronously.
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
var injector = Injector.resolveAndCreate([
|
||||
bind(Number).toAsyncFactory(() => {
|
||||
return new Promise((resolve) => resolve(1 + 2));
|
||||
}),
|
||||
bind(String).toFactory((v) => { return "Value: " + v; }, [String])
|
||||
]);
|
||||
|
||||
injector.asyncGet(Number).then((v) => expect(v).toBe(3));
|
||||
injector.asyncGet(String).then((v) => expect(v).toBe('Value: 3'));
|
||||
```
|
||||
|
||||
The interesting thing to note is that event thougt `Numeber` has an async factory, the `String` factory
|
||||
function takes the resolved value. This shows that the [Injector] delays executing of the `String` factory
|
||||
until after the `Number` is resolved. This can only be done if the `token` is retrive
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toClass
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(type:Type)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Bind an interface to an implementation / subclass.
|
||||
|
||||
|
||||
|
||||
Becuse `toAlias` and `toClass` are often confused the example contains both use cases for easy comparison.
|
||||
|
||||
```javascript
|
||||
|
||||
class Vehicle {}
|
||||
|
||||
class Car extends Vehicle {}
|
||||
|
||||
var injectorClass = Injector.resolveAndCreate([
|
||||
Car,
|
||||
bind(Vehicle).toClass(Car)
|
||||
]);
|
||||
var injectorAlias = Injector.resolveAndCreate([
|
||||
Car,
|
||||
bind(Vehicle).toAlias(Car)
|
||||
]);
|
||||
|
||||
expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
|
||||
expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
|
||||
|
||||
expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
|
||||
expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toFactory
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(factoryFunction:Function, dependencies:List = null)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Bind a key to a function which computes the value.
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
var injector = Injector.resolveAndCreate([
|
||||
bind(Number).toFactory(() => { return 1+2; }}),
|
||||
bind(String).toFactory((v) => { return "Value: " + v; }, [String] })
|
||||
]);
|
||||
|
||||
expect(injector.get(Number)).toEqual(3);
|
||||
expect(injector.get(String)).toEqual('Value: 3');
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toValue
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(value)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Bind a key to a value.
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
var injector = Injector.resolveAndCreate([
|
||||
bind(String).toValue('Hello')
|
||||
]);
|
||||
|
||||
expect(injector.get(String)).toEqual('Hello');
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 token
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/di">angular2/di</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/injector.js#L60">angular2/src/di/injector.js (line 60)</a>
|
||||
|
||||
:markdown
|
||||
A dependency injection container used for resolving dependencies.
|
||||
|
||||
An `Injector` is a replacement for a `new` operator, which can automatically resolve the constructor dependencies.
|
||||
In typical use, application code asks for the dependencies in the constructor and they are resolved by the
|
||||
`Injector`.
|
||||
|
||||
## Example:
|
||||
|
||||
Suppose that we want to inject an `Engine` into class `Car`, we would define it like this:
|
||||
|
||||
```javascript
|
||||
class Engine {
|
||||
}
|
||||
|
||||
class Car {
|
||||
constructor(@Inject(Engine) engine) {
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Next we need to write the code that creates and instantiates the `Injector`. We then ask for the `root` object,
|
||||
`Car`, so that the `Injector` can recursively build all of that object's dependencies.
|
||||
|
||||
```javascript
|
||||
main() {
|
||||
var injector = Injector.resolveAndCreate([Car, Engine]);
|
||||
|
||||
// Get a reference to the `root` object, which will recursively instantiate the tree.
|
||||
var car = injector.get(Car);
|
||||
}
|
||||
```
|
||||
Notice that we don't use the `new` operator because we explicitly want to have the `Injector` resolve all of the
|
||||
object's dependencies automatically.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(bindings:List<ResolvedBinding>, parent:Injector, defaultBindings:boolean, [object Object], [object Object], [object Object])
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 asyncGet
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(token, [object Object])
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Used to retrieve an instance from the injector asynchronously. Used with asynchronous bindings.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 createChildFromResolved
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(bindings:List<ResolvedBinding>, [object Object])
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Create a child injector and load a new set of [ResolvedBinding] into it.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 fromResolvedBindings
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(bindings:List<ResolvedBinding>, {defaultBindings=false}={}, [object Object], [object Object])
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Creates an injector from previously resolved bindings. This bypasses resolution and flattening. This API is
|
||||
recommended way to construct injectors in performance-sensitive parts.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 get
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(token, [object Object])
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Used to retrieve an instance from the injector.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 getOptional
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(token, [object Object])
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Used to retrieve an instance from the injector.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 resolve
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(bindings:List, [object Object])
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Turns a list of binding definitions into internal resolved list of resolved bindings.
|
||||
|
||||
A resolution is a process of flattening multiple nested lists and converting individual bindings into a
|
||||
list of [ResolvedBinding]s. The resolution can be cached for performance sensitive code.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 resolveAndCreate
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(bindings:List, {defaultBindings=false}={}, [object Object], [object Object])
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Resolves bindings and creates an injector based on those bindings. This function is slower than the
|
||||
corresponding [fromResolvedBindings] because it needs to resolve bindings first. See [Injector.resolve].
|
||||
|
||||
Prefer [fromResolvedBindings] in performance-critical code that creates lots of injectors.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 resolveAndCreateChild
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(bindings:List, [object Object])
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Create a child injector and load a new set of bindings into it.
|
||||
|
||||
A resolution is a process of flattening multiple nested and converting individual bindings into a
|
||||
list of [ResolvedBinding]s. The resolution can be cached [Injector.resolve] for performance sensitive
|
||||
code.
|
||||
|
||||
See: [Injector.resolve].
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/di">angular2/di</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/key.js#L17">angular2/src/di/key.js (line 17)</a>
|
||||
|
||||
:markdown
|
||||
A unique object used for retrieving items from the Injector.
|
||||
|
||||
[Key]s have:
|
||||
- system wide unique [id].
|
||||
- [token] usually the [Type] of the instance.
|
||||
|
||||
[Key]s are used internaly in [Injector] becouse they have system wide unique [id]s which allow the injector to
|
||||
index in arrays rather ther look up items in maps.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(token, id)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 get
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(token)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
Retrieve a [Key] for a token.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 id
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 metadata
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 numberOfKeys
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 token
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"Binding-class" : {
|
||||
"title" : "Binding Class"
|
||||
},
|
||||
|
||||
"bind-function" : {
|
||||
"title" : "bind Function"
|
||||
},
|
||||
|
||||
"BindingBuilder-class" : {
|
||||
"title" : "BindingBuilder Class"
|
||||
},
|
||||
|
||||
"Injector-class" : {
|
||||
"title" : "Injector Class"
|
||||
},
|
||||
|
||||
"Key-class" : {
|
||||
"title" : "Key Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
|
||||
.l-main-section
|
||||
h2(class="function export") bind
|
||||
|
||||
p <code>(token)</code>
|
||||
|
||||
p(class="module").
|
||||
exported from <a href="/angular2/di">angular2/di</a>
|
||||
|
||||
:markdown
|
||||
Provides fluent API for imperative construction of [Binding] objects. (JavaScript only.)
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
ul
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
||||
name = page.menuTitle || page.title
|
||||
selected = current.path[4] == slug ? 'is-selected':''
|
||||
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{slug}</a>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/di_annotations">angular2/di_annotations</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L109">angular2/src/di/annotations.js (line 109)</a>
|
||||
|
||||
:markdown
|
||||
`DependencyAnnotation` is used by the framework to extend DI.
|
||||
|
||||
Only annotations implementing `DependencyAnnotation` will be added
|
||||
to the list of dependency properties.
|
||||
|
||||
For example:
|
||||
|
||||
```
|
||||
class Parent extends DependencyAnnotation {}
|
||||
class NotDependencyProperty {}
|
||||
|
||||
class AComponent {
|
||||
constructor(@Parent @NotDependencyProperty aService:AService) {}
|
||||
}
|
||||
```
|
||||
|
||||
will create the following dependency:
|
||||
|
||||
```
|
||||
new Dependency(Key.get(AService), [new Parent()])
|
||||
```
|
||||
|
||||
The framework can use `new Parent()` to handle the `aService` dependency
|
||||
in a specific way.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 token
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/di_annotations">angular2/di_annotations</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L13">angular2/src/di/annotations.js (line 13)</a>
|
||||
|
||||
:markdown
|
||||
A parameter annotation that creates a synchronous eager dependency.
|
||||
|
||||
```
|
||||
class AComponent {
|
||||
constructor(@Inject(MyService) aService:MyService) {}
|
||||
}
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(token)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 token
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/di_annotations">angular2/di_annotations</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L55">angular2/src/di/annotations.js (line 55)</a>
|
||||
|
||||
:markdown
|
||||
A parameter annotation that creates a synchronous lazy dependency.
|
||||
|
||||
```
|
||||
class AComponent {
|
||||
constructor(@InjectLazy(MyService) aServiceFn:Function) {
|
||||
var aService:MyService = aServiceFn();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(token)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 token
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/di_annotations">angular2/di_annotations</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L34">angular2/src/di/annotations.js (line 34)</a>
|
||||
|
||||
:markdown
|
||||
A parameter annotation that creates an asynchronous eager dependency.
|
||||
|
||||
```
|
||||
class AComponent {
|
||||
constructor(@InjectPromise(MyService) aServicePromise:Promise<MyService>) {
|
||||
aServicePromise.then(aService:MyService => ...);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(token)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 token
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/di_annotations">angular2/di_annotations</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L133">angular2/src/di/annotations.js (line 133)</a>
|
||||
|
||||
:markdown
|
||||
A marker annotation that marks a class as available to `Injector`s for creation. Used by tooling for generating
|
||||
constructor stubs.
|
||||
|
||||
```
|
||||
class NeedsService {
|
||||
constructor(svc:UsefulService) {}
|
||||
}
|
||||
|
||||
@Injectable
|
||||
class UsefulService {}
|
||||
```
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/di_annotations">angular2/di_annotations</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L75">angular2/src/di/annotations.js (line 75)</a>
|
||||
|
||||
:markdown
|
||||
A parameter annotation that marks a dependency as optional. (Injects `null` if not found.)
|
||||
```
|
||||
class AComponent {
|
||||
constructor(@Optional() aService:MyService) {
|
||||
this.aService = aService;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"Inject-class" : {
|
||||
"title" : "Inject Class"
|
||||
},
|
||||
|
||||
"InjectPromise-class" : {
|
||||
"title" : "InjectPromise Class"
|
||||
},
|
||||
|
||||
"InjectLazy-class" : {
|
||||
"title" : "InjectLazy Class"
|
||||
},
|
||||
|
||||
"Optional-class" : {
|
||||
"title" : "Optional Class"
|
||||
},
|
||||
|
||||
"DependencyAnnotation-class" : {
|
||||
"title" : "DependencyAnnotation Class"
|
||||
},
|
||||
|
||||
"Injectable-class" : {
|
||||
"title" : "Injectable Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
ul
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
||||
name = page.menuTitle || page.title
|
||||
selected = current.path[4] == slug ? 'is-selected':''
|
||||
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{slug}</a>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/di_errors">angular2/di_errors</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L95">angular2/src/di/exceptions.js (line 95)</a>
|
||||
|
||||
:markdown
|
||||
Throw when trying to retrieve async [Binding] using sync API.
|
||||
|
||||
## Example
|
||||
|
||||
```javascript
|
||||
var injector = Injector.resolveAndCreate([
|
||||
bind(Number).toAsyncFactory(() => {
|
||||
return new Promise((resolve) => resolve(1 + 2));
|
||||
}),
|
||||
bind(String).toFactory((v) => { return "Value: " + v; }, [String])
|
||||
]);
|
||||
|
||||
injector.asyncGet(String).then((v) => expect(v).toBe('Value: 3'));
|
||||
expect(() => {
|
||||
injector.get(String);
|
||||
}).toThrowError(AsycBindingError);
|
||||
```
|
||||
|
||||
The above example throws because `String` dependes no `Numeber` which is async. If any binding in the dependency
|
||||
graph is async then the graph can only be retrieved using `asyncGet` API.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(key)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/di_errors">angular2/di_errors</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L124">angular2/src/di/exceptions.js (line 124)</a>
|
||||
|
||||
:markdown
|
||||
Throw when dependencies from a cyle.
|
||||
|
||||
## Example:
|
||||
|
||||
```javascript
|
||||
class A {
|
||||
constructor(b:B) {}
|
||||
}
|
||||
class B {
|
||||
constructor(a:A) {}
|
||||
}
|
||||
```
|
||||
|
||||
Retrieving `A` or `B` will throw `CyclicDependencyError` as such a graph can not be constructed.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(key)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/di_errors">angular2/di_errors</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L141">angular2/src/di/exceptions.js (line 141)</a>
|
||||
|
||||
:markdown
|
||||
Thrown when constructing type returns with an Error.
|
||||
|
||||
The `InstantiationError` class contains the original error plus dependency graph which caused this object to be
|
||||
instantiated.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(originalException, key)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/di_errors">angular2/di_errors</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L157">angular2/src/di/exceptions.js (line 157)</a>
|
||||
|
||||
:markdown
|
||||
Thrown when object other then [Binding] (or [Type]) is passed to [Injector] creation.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(binding)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 message
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toString
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/di_errors">angular2/di_errors</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L177">angular2/src/di/exceptions.js (line 177)</a>
|
||||
|
||||
:markdown
|
||||
Thrown when the class as no annotation information.
|
||||
|
||||
Lack of annotation prevents the [Injector] from determininig what dependencies need to be injected int the
|
||||
constructor.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(typeOrFunc)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 message
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toString
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/di_errors">angular2/di_errors</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L61">angular2/src/di/exceptions.js (line 61)</a>
|
||||
|
||||
:markdown
|
||||
Thrown when trying to retrieve a dependency by [Key] from [Injector], but [Injector] does not have a [Binding] for
|
||||
said [Key].
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(key)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/di_errors">angular2/di_errors</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L32">angular2/src/di/exceptions.js (line 32)</a>
|
||||
|
||||
:markdown
|
||||
Base class for all errors arising from missconfigured bindings.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(key, constructResolvingMessage:Function)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 addKey
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(key)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 constructResolvingMessage
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 keys
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 message
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toString
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"ProviderError-class" : {
|
||||
"title" : "ProviderError Class"
|
||||
},
|
||||
|
||||
"NoProviderError-class" : {
|
||||
"title" : "NoProviderError Class"
|
||||
},
|
||||
|
||||
"AsyncBindingError-class" : {
|
||||
"title" : "AsyncBindingError Class"
|
||||
},
|
||||
|
||||
"CyclicDependencyError-class" : {
|
||||
"title" : "CyclicDependencyError Class"
|
||||
},
|
||||
|
||||
"InstantiationError-class" : {
|
||||
"title" : "InstantiationError Class"
|
||||
},
|
||||
|
||||
"InvalidBindingError-class" : {
|
||||
"title" : "InvalidBindingError Class"
|
||||
},
|
||||
|
||||
"NoAnnotationError-class" : {
|
||||
"title" : "NoAnnotationError Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
ul
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
||||
name = page.menuTitle || page.title
|
||||
selected = current.path[4] == slug ? 'is-selected':''
|
||||
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{slug}</a>
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/directives">angular2/directives</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/for.js#L44">angular2/src/directives/for.js (line 44)</a>
|
||||
|
||||
:markdown
|
||||
The `For` directive instantiates a template once per item from an iterable. The context for each
|
||||
instantiated template inherits from the outer context with the given loop variable set to the
|
||||
current item from the iterable.
|
||||
|
||||
It is possible to alias the `index` to a local variable that will be set to the current loop
|
||||
iteration in the template context.
|
||||
|
||||
When the contents of the iterator changes, `For` makes the corresponding changes to the DOM:
|
||||
|
||||
* When an item is added, a new instance of the template is added to the DOM.
|
||||
* When an item is removed, its template instance is removed from the DOM.
|
||||
* When items are reordered, their respective templates are reordered in the DOM.
|
||||
|
||||
# Example
|
||||
|
||||
```
|
||||
<ul>
|
||||
<li *for="#error in errors; #i = index">
|
||||
Error {{i}} of {{errors.length}}: {{error.message}}
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
# Syntax
|
||||
|
||||
- `<li *for="#item of items; #i = index">...</li>`
|
||||
- `<li template="for #item of items; #i=index">...</li>`
|
||||
- `<template [for]="#item" [of]="items" #i="index"><li>...</li></template>`
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(viewContainer:ViewContainer)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 bulkInsert
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(tuples, viewContainer)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 bulkRemove
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(tuples, viewContainer)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 iterableChanges
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(changes)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 perViewChange
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(view, record)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 viewContainer
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/directives">angular2/directives</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/if.js#L33">angular2/src/directives/if.js (line 33)</a>
|
||||
|
||||
:markdown
|
||||
Removes or recreates a portion of the DOM tree based on an {expression}.
|
||||
|
||||
If the expression assigned to `if` evaluates to a false value then the element is removed from the
|
||||
DOM, otherwise a clone of the element is reinserted into the DOM.
|
||||
|
||||
# Example:
|
||||
|
||||
```
|
||||
<div *if="errorCount > 0" class="error">
|
||||
<!-- Error message displayed when the errorCount property on the current context is greater than 0. -->
|
||||
{{errorCount}} errors detected
|
||||
</div>
|
||||
```
|
||||
|
||||
# Syntax
|
||||
|
||||
- `<div *if="condition">...</div>`
|
||||
- `<div template="if condition">...</div>`
|
||||
- `<template [if]="condition"><div>...</div></template>`
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(viewContainer: ViewContainer)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 condition
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(newCondition)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 prevCondition
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 viewContainer
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/directives">angular2/directives</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/non_bindable.js#L21">angular2/src/directives/non_bindable.js (line 21)</a>
|
||||
|
||||
:markdown
|
||||
The `NonBindable` directive tells Angular not to compile or bind the contents of the current
|
||||
DOM element. This is useful if the element contains what appears to be Angular directives and
|
||||
bindings but which should be ignored by Angular. This could be the case if you have a site that
|
||||
displays snippets of code, for instance.
|
||||
|
||||
Example:
|
||||
|
||||
```
|
||||
<div>Normal: {{1 + 2}}</div> // output "Normal: 3"
|
||||
<div non-bindable>Ignored: {{1 + 2}}</div> // output "Ignored: {{1 + 2}}"
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/directives">angular2/directives</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L39">angular2/src/directives/switch.js (line 39)</a>
|
||||
|
||||
:markdown
|
||||
The `Switch` directive is used to conditionally swap DOM structure on your template based on a
|
||||
scope expression.
|
||||
Elements within `Switch` but without `SwitchWhen` or `SwitchDefault` directives will be
|
||||
preserved at the location as specified in the template.
|
||||
|
||||
`Switch` simply chooses nested elements and makes them visible based on which element matches
|
||||
the value obtained from the evaluated expression. In other words, you define a container element
|
||||
(where you place the directive), place an expression on the **`[switch]="..."` attribute**),
|
||||
define any inner elements inside of the directive and place a `[switch-when]` attribute per
|
||||
element.
|
||||
The when attribute is used to inform Switch which element to display when the expression is
|
||||
evaluated. If a matching expression is not found via a when attribute then an element with the
|
||||
default attribute is displayed.
|
||||
|
||||
# Example:
|
||||
|
||||
```
|
||||
<ANY [switch]="expression">
|
||||
<template [switch-when]="whenExpression1">...</template>
|
||||
<template [switch-when]="whenExpression1">...</template>
|
||||
<template [switch-default]>...</template>
|
||||
</ANY>
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 value
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(value)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/directives">angular2/directives</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L187">angular2/src/directives/switch.js (line 187)</a>
|
||||
|
||||
:markdown
|
||||
Defines a default case statement.
|
||||
|
||||
Default case statements are displayed when no `SwitchWhen` match the `switch` value.
|
||||
|
||||
Example:
|
||||
|
||||
```
|
||||
<template [switch-default]>...</template>
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(viewContainer: ViewContainer, sswitch: Switch)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/directives">angular2/directives</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L152">angular2/src/directives/switch.js (line 152)</a>
|
||||
|
||||
:markdown
|
||||
Defines a case statement as an expression.
|
||||
|
||||
If multiple `SwitchWhen` match the `Switch` value, all of them are displayed.
|
||||
|
||||
Example:
|
||||
|
||||
```
|
||||
// match against a context variable
|
||||
<template [switch-when]="contextVariable">...</template>
|
||||
|
||||
// match against a constant string
|
||||
<template [switch-when]="'stringValue'">...</template>
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(viewContainer: ViewContainer, sswitch: Switch)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 when
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(value)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"For-class" : {
|
||||
"title" : "For Class"
|
||||
},
|
||||
|
||||
"If-class" : {
|
||||
"title" : "If Class"
|
||||
},
|
||||
|
||||
"NonBindable-class" : {
|
||||
"title" : "NonBindable Class"
|
||||
},
|
||||
|
||||
"Switch-class" : {
|
||||
"title" : "Switch Class"
|
||||
},
|
||||
|
||||
"SwitchWhen-class" : {
|
||||
"title" : "SwitchWhen Class"
|
||||
},
|
||||
|
||||
"SwitchDefault-class" : {
|
||||
"title" : "SwitchDefault Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
ul
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
||||
name = page.menuTitle || page.title
|
||||
selected = current.path[4] == slug ? 'is-selected':''
|
||||
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{slug}</a>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/forms">angular2/forms</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L62">angular2/src/forms/directives.js (line 62)</a>
|
||||
|
||||
:markdown
|
||||
The accessor for writing a value and listening to changes on a checkbox input element.
|
||||
|
||||
|
||||
# Example
|
||||
```
|
||||
<input type="checkbox" [control]="rememberLogin">
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(cd:ControlDirective, setCheckedProperty:Function)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 onChange
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 writeValue
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(value)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/forms">angular2/forms</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/model.js#L96">angular2/src/forms/model.js (line 96)</a>
|
||||
|
||||
:markdown
|
||||
Defines a part of a form that cannot be divided into other controls.
|
||||
|
||||
`Control` is one of the three fundamental building blocks used to define forms in Angular, along with [ControlGroup]
|
||||
and [ControlArray].
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(value:any, validator:Function = Validators.nullValidator)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 updateValue
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(value:any)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/forms">angular2/forms</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/model.js#L217">angular2/src/forms/model.js (line 217)</a>
|
||||
|
||||
:markdown
|
||||
Defines a part of a form, of variable length, that can contain other controls.
|
||||
|
||||
A `ControlArray` aggregates the values and errors of each [Control] in the group. Thus, if one of the controls in a
|
||||
group is invalid, the entire group is invalid. Similarly, if a control changes its value, the entire group changes
|
||||
as well.
|
||||
|
||||
`ControlArray` is one of the three fundamental building blocks used to define forms in Angular, along with [Control]
|
||||
and [ControlGroup]. [ControlGroup] can also contain other controls, but is of fixed length.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(controls:List<AbstractControl>, validator:Function = Validators.array)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 at
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(index:number)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 controls
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 insert
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(index:number, control:AbstractControl)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 length
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 push
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(control:AbstractControl)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 removeAt
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(index:number)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/forms">angular2/forms</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L114">angular2/src/forms/directives.js (line 114)</a>
|
||||
|
||||
:markdown
|
||||
Binds a control to a DOM element.
|
||||
|
||||
# Example
|
||||
|
||||
In this example, we bind the control to an input element. When the value of the input element changes, the value of
|
||||
the control will reflect that change. Likewise, if the value of the control changes, the input element reflects that
|
||||
change.
|
||||
|
||||
Here we use [FormDirectives], rather than importing each form directive individually, e.g.
|
||||
`ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result.
|
||||
|
||||
```
|
||||
@Component({selector: "login-comp"})
|
||||
@View({
|
||||
directives: [FormDirectives],
|
||||
inline: "<input type='text' [control]='loginControl'>"
|
||||
})
|
||||
class LoginComp {
|
||||
loginControl:Control;
|
||||
|
||||
constructor() {
|
||||
this.loginControl = new Control('');
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(groupDirective:ControlGroupDirective, valueAccessor:DefaultValueAccessor)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 controlOrName
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 onChange
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(_)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 validator
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 valueAccessor
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/forms">angular2/forms</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/model.js#L131">angular2/src/forms/model.js (line 131)</a>
|
||||
|
||||
:markdown
|
||||
Defines a part of a form, of fixed length, that can contain other controls.
|
||||
|
||||
A ControlGroup aggregates the values and errors of each [Control] in the group. Thus, if one of the controls in a
|
||||
group is invalid, the entire group is invalid. Similarly, if a control changes its value, the entire group changes
|
||||
as well.
|
||||
|
||||
`ControlGroup` is one of the three fundamental building blocks used to define forms in Angular, along with [Control]
|
||||
and [ControlArray]. [ControlArray] can also contain other controls, but is of variable length.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(controls:StringMap, optionals:StringMap = null, validator:Function = Validators.group)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 contains
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(controlName:string)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 controls
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 exclude
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(controlName:string)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 include
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(controlName:string)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/forms">angular2/forms</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L210">angular2/src/forms/directives.js (line 210)</a>
|
||||
|
||||
:markdown
|
||||
Binds a control group to a DOM element.
|
||||
|
||||
# Example
|
||||
|
||||
In this example, we bind the control group to the form element, and we bind the login and password controls to the
|
||||
login and password elements.
|
||||
|
||||
Here we use [FormDirectives], rather than importing each form directive individually, e.g.
|
||||
`ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result.
|
||||
|
||||
```
|
||||
@Component({selector: "login-comp"})
|
||||
@View({
|
||||
directives: [FormDirectives],
|
||||
inline: "<form [control-group]='loginForm'>" +
|
||||
"Login <input type='text' control='login'>" +
|
||||
"Password <input type='password' control='password'>" +
|
||||
"<button (click)="onLogin()">Login</button>" +
|
||||
"</form>"
|
||||
})
|
||||
class LoginComp {
|
||||
loginForm:ControlGroup;
|
||||
|
||||
constructor() {
|
||||
this.loginForm = new ControlGroup({
|
||||
login: new Control(""),
|
||||
password: new Control("")
|
||||
});
|
||||
}
|
||||
|
||||
onLogin() {
|
||||
// this.loginForm.value
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(groupDirective:ControlGroupDirective)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 addDirective
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(c:ControlDirective)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 controlGroup
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(controlGroup)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 findControl
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(name:string)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/forms">angular2/forms</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L31">angular2/src/forms/directives.js (line 31)</a>
|
||||
|
||||
:markdown
|
||||
The default accessor for writing a value and listening to changes that is used by a [Control] directive.
|
||||
|
||||
This is the default strategy that Angular uses when no other accessor is applied.
|
||||
|
||||
# Example
|
||||
```
|
||||
<input type="text" [control]="loginControl">
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(setValueProperty:Function)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 onChange
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 writeValue
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(value)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/forms">angular2/forms</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/form_builder.js#L26">angular2/src/forms/form_builder.js (line 26)</a>
|
||||
|
||||
:markdown
|
||||
Creates a form object from a user-specified configuration.
|
||||
|
||||
# Example
|
||||
|
||||
This example creates a [ControlGroup] that consists of a `login` [Control], and a nested [ControlGroup] that defines
|
||||
a `password` and a `passwordConfirmation` [Control].
|
||||
|
||||
```
|
||||
var loginForm = builder.group({
|
||||
login: ["", Validators.required],
|
||||
|
||||
passwordRetry: builder.group({
|
||||
password: ["", Validators.required],
|
||||
passwordConfirmation: ["", Validators.required]
|
||||
})
|
||||
});
|
||||
|
||||
```
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 array
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(controlsConfig:List, validator:Function = null)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 control
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(value, validator:Function = null)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 group
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(controlsConfig, extra = null)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
|
||||
.l-main-section
|
||||
h2 FormDirectives <span class="type">variable</span>
|
||||
p(class="module") exported from <a href="/angular2/forms">angular2/forms</a>
|
||||
|
||||
:markdown
|
||||
A list of all the form directives used as part of a `@View` annotation.
|
||||
|
||||
This is a shorthand for importing them each individually.
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
|
||||
.l-main-section
|
||||
h2 INVALID <span class="type">variable</span>
|
||||
p(class="module") exported from <a href="/angular2/forms">angular2/forms</a>
|
||||
|
||||
:markdown
|
||||
Indicates that a Control is invalid, i.e. that an error exists in the input value.
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
|
||||
.l-main-section
|
||||
h2 VALID <span class="type">variable</span>
|
||||
p(class="module") exported from <a href="/angular2/forms">angular2/forms</a>
|
||||
|
||||
:markdown
|
||||
Indicates that a Control is valid, i.e. that no errors exist in the input value.
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/forms">angular2/forms</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/validators.js#L16">angular2/src/forms/validators.js (line 16)</a>
|
||||
|
||||
:markdown
|
||||
Provides a set of validators used by form controls.
|
||||
|
||||
# Example
|
||||
|
||||
```
|
||||
var loginControl = new Control("", Validators.required)
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 array
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(c:modelModule.ControlArray)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 compose
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(validators:List<Function>)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 group
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(c:modelModule.ControlGroup)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 nullValidator
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(c:any)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 required
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(c:modelModule.Control)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
{
|
||||
"DefaultValueAccessor-class" : {
|
||||
"title" : "DefaultValueAccessor Class"
|
||||
},
|
||||
|
||||
"CheckboxControlValueAccessor-class" : {
|
||||
"title" : "CheckboxControlValueAccessor Class"
|
||||
},
|
||||
|
||||
"ControlDirective-class" : {
|
||||
"title" : "ControlDirective Class"
|
||||
},
|
||||
|
||||
"ControlGroupDirective-class" : {
|
||||
"title" : "ControlGroupDirective Class"
|
||||
},
|
||||
|
||||
"FormDirectives-var" : {
|
||||
"title" : "FormDirectives Var"
|
||||
},
|
||||
|
||||
"FormBuilder-class" : {
|
||||
"title" : "FormBuilder Class"
|
||||
},
|
||||
|
||||
"VALID-var" : {
|
||||
"title" : "VALID Var"
|
||||
},
|
||||
|
||||
"INVALID-var" : {
|
||||
"title" : "INVALID Var"
|
||||
},
|
||||
|
||||
"Control-class" : {
|
||||
"title" : "Control Class"
|
||||
},
|
||||
|
||||
"ControlGroup-class" : {
|
||||
"title" : "ControlGroup Class"
|
||||
},
|
||||
|
||||
"ControlArray-class" : {
|
||||
"title" : "ControlArray Class"
|
||||
},
|
||||
|
||||
"Validators-class" : {
|
||||
"title" : "Validators Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
ul
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
||||
name = page.menuTitle || page.title
|
||||
selected = current.path[4] == slug ? 'is-selected':''
|
||||
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{slug}</a>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/pipes">angular2/pipes</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/iterable_changes.js#L509">angular2/src/change_detection/pipes/iterable_changes.js (line 509)</a>
|
||||
|
||||
:markdown
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(item)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 currentIndex
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 item
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 previousIndex
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toString
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,230 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/pipes">angular2/pipes</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/iterable_changes.js#L31">angular2/src/change_detection/pipes/iterable_changes.js (line 31)</a>
|
||||
|
||||
:markdown
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 check
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(collection)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 collection
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 forEachAddedItem
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(fn:Function)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 forEachItem
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(fn:Function)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 forEachMovedItem
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(fn:Function)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 forEachPreviousItem
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(fn:Function)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 forEachRemovedItem
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(fn:Function)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 isDirty
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 length
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 supports
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(obj)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 supportsObj
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(obj)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toString
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 transform
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(collection)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/pipes">angular2/pipes</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/keyvalue_changes.js#L360">angular2/src/change_detection/pipes/keyvalue_changes.js (line 360)</a>
|
||||
|
||||
:markdown
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(key)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 currentValue
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 key
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 previousValue
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toString
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,206 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/pipes">angular2/pipes</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/keyvalue_changes.js#L21">angular2/src/change_detection/pipes/keyvalue_changes.js (line 21)</a>
|
||||
|
||||
:markdown
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 check
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(map)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 forEachAddedItem
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(fn:Function)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 forEachChangedItem
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(fn:Function)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 forEachItem
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(fn:Function)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 forEachPreviousItem
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(fn:Function)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 forEachRemovedItem
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(fn:Function)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 isDirty
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 supports
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(obj)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 supportsObj
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(obj)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toString
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 transform
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(map)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/pipes">angular2/pipes</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/keyvalue_changes.js#L8">angular2/src/change_detection/pipes/keyvalue_changes.js (line 8)</a>
|
||||
|
||||
:markdown
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 create
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(cdRef)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 supports
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(obj)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/pipes">angular2/pipes</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/null_pipe.js#L19">angular2/src/change_detection/pipes/null_pipe.js (line 19)</a>
|
||||
|
||||
:markdown
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 called
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 supports
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(obj)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 supportsObj
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(obj)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 transform
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(value)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/pipes">angular2/pipes</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/null_pipe.js#L6">angular2/src/change_detection/pipes/null_pipe.js (line 6)</a>
|
||||
|
||||
:markdown
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 create
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(cdRef)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 supports
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(obj)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
|
||||
p.
|
||||
<span class="location-badge">exported from <a href="/angular2/pipes">angular2/pipes</a></span>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/pipe.js#L32">angular2/src/change_detection/pipes/pipe.js (line 32)</a>
|
||||
|
||||
:markdown
|
||||
An interface for extending the list of pipes known to Angular.
|
||||
|
||||
If you are writing a custom [Pipe], you must extend this interface.
|
||||
|
||||
#Example
|
||||
|
||||
```
|
||||
class DoublePipe extends Pipe {
|
||||
supports(obj) {
|
||||
return true;
|
||||
}
|
||||
|
||||
transform(value) {
|
||||
return `${value}${value}`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 onDestroy
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
()
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 supports
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(obj)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 transform
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
(value:any)
|
||||
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"IterableChanges-class" : {
|
||||
"title" : "IterableChanges Class"
|
||||
},
|
||||
|
||||
"CollectionChangeRecord-class" : {
|
||||
"title" : "CollectionChangeRecord Class"
|
||||
},
|
||||
|
||||
"KeyValueChangesFactory-class" : {
|
||||
"title" : "KeyValueChangesFactory Class"
|
||||
},
|
||||
|
||||
"KeyValueChanges-class" : {
|
||||
"title" : "KeyValueChanges Class"
|
||||
},
|
||||
|
||||
"KVChangeRecord-class" : {
|
||||
"title" : "KVChangeRecord Class"
|
||||
},
|
||||
|
||||
"NullPipeFactory-class" : {
|
||||
"title" : "NullPipeFactory Class"
|
||||
},
|
||||
|
||||
"NullPipe-class" : {
|
||||
"title" : "NullPipe Class"
|
||||
},
|
||||
|
||||
"Pipe-class" : {
|
||||
"title" : "Pipe Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"AbstractChangeDetector-class" : {
|
||||
"title" : "AbstractChangeDetector Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"BindingRecord-class" : {
|
||||
"title" : "BindingRecord Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"defaultPipes-var" : {
|
||||
"title" : "defaultPipes Var"
|
||||
},
|
||||
|
||||
"DynamicChangeDetection-class" : {
|
||||
"title" : "DynamicChangeDetection Class"
|
||||
},
|
||||
|
||||
"JitChangeDetection-class" : {
|
||||
"title" : "JitChangeDetection Class"
|
||||
},
|
||||
|
||||
"defaultPipeRegistry-var" : {
|
||||
"title" : "defaultPipeRegistry Var"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"uninitialized-var" : {
|
||||
"title" : "uninitialized Var"
|
||||
},
|
||||
|
||||
"SimpleChange-class" : {
|
||||
"title" : "SimpleChange Class"
|
||||
},
|
||||
|
||||
"ChangeDetectionUtil-class" : {
|
||||
"title" : "ChangeDetectionUtil Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"ChangeDetectorRef-class" : {
|
||||
"title" : "ChangeDetectorRef Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"coalesce-function" : {
|
||||
"title" : "coalesce Function"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"CHECK_ONCE-var" : {
|
||||
"title" : "CHECK_ONCE Var"
|
||||
},
|
||||
|
||||
"CHECKED-var" : {
|
||||
"title" : "CHECKED Var"
|
||||
},
|
||||
|
||||
"CHECK_ALWAYS-var" : {
|
||||
"title" : "CHECK_ALWAYS Var"
|
||||
},
|
||||
|
||||
"DETACHED-var" : {
|
||||
"title" : "DETACHED Var"
|
||||
},
|
||||
|
||||
"ON_PUSH-var" : {
|
||||
"title" : "ON_PUSH Var"
|
||||
},
|
||||
|
||||
"DEFAULT-var" : {
|
||||
"title" : "DEFAULT Var"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"DirectiveRecord-class" : {
|
||||
"title" : "DirectiveRecord Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"DynamicChangeDetector-class" : {
|
||||
"title" : "DynamicChangeDetector Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"ExpressionChangedAfterItHasBeenChecked-class" : {
|
||||
"title" : "ExpressionChangedAfterItHasBeenChecked Class"
|
||||
},
|
||||
|
||||
"ChangeDetectionError-class" : {
|
||||
"title" : "ChangeDetectionError Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"ProtoChangeDetector-class" : {
|
||||
"title" : "ProtoChangeDetector Class"
|
||||
},
|
||||
|
||||
"ChangeDetection-class" : {
|
||||
"title" : "ChangeDetection Class"
|
||||
},
|
||||
|
||||
"ChangeDispatcher-class" : {
|
||||
"title" : "ChangeDispatcher Class"
|
||||
},
|
||||
|
||||
"ChangeDetector-class" : {
|
||||
"title" : "ChangeDetector Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
{
|
||||
"AST-class" : {
|
||||
"title" : "AST Class"
|
||||
},
|
||||
|
||||
"EmptyExpr-class" : {
|
||||
"title" : "EmptyExpr Class"
|
||||
},
|
||||
|
||||
"ImplicitReceiver-class" : {
|
||||
"title" : "ImplicitReceiver Class"
|
||||
},
|
||||
|
||||
"Chain-class" : {
|
||||
"title" : "Chain Class"
|
||||
},
|
||||
|
||||
"Conditional-class" : {
|
||||
"title" : "Conditional Class"
|
||||
},
|
||||
|
||||
"AccessMember-class" : {
|
||||
"title" : "AccessMember Class"
|
||||
},
|
||||
|
||||
"KeyedAccess-class" : {
|
||||
"title" : "KeyedAccess Class"
|
||||
},
|
||||
|
||||
"Pipe-class" : {
|
||||
"title" : "Pipe Class"
|
||||
},
|
||||
|
||||
"LiteralPrimitive-class" : {
|
||||
"title" : "LiteralPrimitive Class"
|
||||
},
|
||||
|
||||
"LiteralArray-class" : {
|
||||
"title" : "LiteralArray Class"
|
||||
},
|
||||
|
||||
"LiteralMap-class" : {
|
||||
"title" : "LiteralMap Class"
|
||||
},
|
||||
|
||||
"Interpolation-class" : {
|
||||
"title" : "Interpolation Class"
|
||||
},
|
||||
|
||||
"Binary-class" : {
|
||||
"title" : "Binary Class"
|
||||
},
|
||||
|
||||
"PrefixNot-class" : {
|
||||
"title" : "PrefixNot Class"
|
||||
},
|
||||
|
||||
"Assignment-class" : {
|
||||
"title" : "Assignment Class"
|
||||
},
|
||||
|
||||
"MethodCall-class" : {
|
||||
"title" : "MethodCall Class"
|
||||
},
|
||||
|
||||
"FunctionCall-class" : {
|
||||
"title" : "FunctionCall Class"
|
||||
},
|
||||
|
||||
"ASTWithSource-class" : {
|
||||
"title" : "ASTWithSource Class"
|
||||
},
|
||||
|
||||
"TemplateBinding-class" : {
|
||||
"title" : "TemplateBinding Class"
|
||||
},
|
||||
|
||||
"AstVisitor-class" : {
|
||||
"title" : "AstVisitor Class"
|
||||
},
|
||||
|
||||
"AstTransformer-class" : {
|
||||
"title" : "AstTransformer Class"
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue