docs(api): update for alpha-25
This commit is contained in:
Naomi Black
parent
d62557ada6
commit
b206074f27
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href='../annotations'>angular2/annotations</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/annotations.ts#L778-L1011">angular2/src/core/annotations_impl/annotations.ts (line 778)</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/annotations.ts#L776-L1009">angular2/src/core/annotations_impl/annotations.ts (line 776)</a>
|
||||
|
||||
:markdown
|
||||
Declare reusable UI building blocks for an application.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href='../annotations'>angular2/annotations</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/annotations.ts#L4-L778">angular2/src/core/annotations_impl/annotations.ts (line 4)</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/annotations.ts#L4-L776">angular2/src/core/annotations_impl/annotations.ts (line 4)</a>
|
||||
|
||||
:markdown
|
||||
Directives allow you to attach behavior to elements in the DOM.
|
||||
|
|
@ -211,11 +211,10 @@ p.location-badge.
|
|||
|
||||
|
||||
A directive can also query for other child directives. Since parent directives are instantiated
|
||||
before child
|
||||
directives, a directive can't simply inject the list of child directives. Instead, the directive
|
||||
injects a <a href='../core/QueryList-class.html'><code>QueryList</code></a>, which updates its contents as children are added, removed, or moved
|
||||
by a directive
|
||||
that uses a <a href='../core/ViewContainerRef-class.html'><code>ViewContainerRef</code></a> such as a `for`, an `if`, or a `switch`.
|
||||
before child directives, a directive can't simply inject the list of child directives. Instead,
|
||||
the directive injects a <a href='../core/QueryList-class.html'><code>QueryList</code></a>, which updates its contents as children are added,
|
||||
removed, or moved by a directive that uses a <a href='../core/ViewContainerRef-class.html'><code>ViewContainerRef</code></a> such as a `ng-for`, an
|
||||
`ng-if`, or an `ng-switch`.
|
||||
|
||||
```
|
||||
@Directive({ selector: '[my-directive]' })
|
||||
|
|
@ -226,8 +225,7 @@ p.location-badge.
|
|||
```
|
||||
|
||||
This directive would be instantiated with a <a href='../core/QueryList-class.html'><code>QueryList</code></a> which contains `Dependency` 4 and
|
||||
6. Here, `Dependency`
|
||||
5 would not be included, because it is not a direct child.
|
||||
6. Here, `Dependency` 5 would not be included, because it is not a direct child.
|
||||
|
||||
### Injecting a live collection of descendant directives
|
||||
|
||||
|
|
@ -704,7 +702,8 @@ p.location-badge.
|
|||
|
||||
Specifies a set of lifecycle hostListeners in which the directive participates.
|
||||
|
||||
See <a href='annotations/onChange'>onChange</a>, <a href='annotations/onDestroy'>onDestroy</a>, <a href='annotations/onAllChangesDone'>onAllChangesDone</a> for details.
|
||||
See <a href='annotations/onChange'>onChange</a>, <a href='annotations/onDestroy'>onDestroy</a>,
|
||||
<a href='annotations/onAllChangesDone'>onAllChangesDone</a> for details.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,24 @@
|
|||
|
||||
<h1>onAllChangesDone</h1>
|
||||
<h2>(const)</h2>
|
||||
<div>
|
||||
<p>Notify a directive when the bindings of all its children have been changed.</p>
|
||||
.l-main-section
|
||||
h2 Example:
|
||||
pre(class="prettyprint linenums")
|
||||
code.
|
||||
@Directive({
|
||||
selector: '[class-set]',
|
||||
lifecycle: [onAllChangesDone]
|
||||
})
|
||||
class ClassSet {
|
||||
h2 onAllChangesDone <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href='../annotations'>angular2/annotations</a>
|
||||
|
||||
onAllChangesDone() {
|
||||
}
|
||||
:markdown
|
||||
Notify a directive when the bindings of all its children have been changed.
|
||||
|
||||
## Example:
|
||||
|
||||
```
|
||||
@Directive({
|
||||
selector: '[class-set]',
|
||||
lifecycle: [onAllChangesDone]
|
||||
})
|
||||
class ClassSet {
|
||||
|
||||
onAllChangesDone() {
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,40 @@
|
|||
|
||||
<h1>onChange</h1>
|
||||
<h2>(const)</h2>
|
||||
<div>
|
||||
<p>Notify a directive when any of its bindings have changed.</p>
|
||||
<p>This method is called right after the directive's bindings have been checked,
|
||||
and before any of its children's bindings have been checked.</p>
|
||||
<p>It is invoked only if at least one of the directive's bindings has changed.</p>
|
||||
.l-main-section
|
||||
h2 Example:
|
||||
pre(class="prettyprint linenums")
|
||||
code.
|
||||
@Directive({
|
||||
selector: '[class-set]',
|
||||
properties: [
|
||||
'propA',
|
||||
'propB'
|
||||
],
|
||||
lifecycle: [onChange]
|
||||
})
|
||||
class ClassSet {
|
||||
propA;
|
||||
propB;
|
||||
onChange(changes:{[idx: string, PropertyUpdate]}) {
|
||||
// This will get called after any of the properties have been updated.
|
||||
if (changes['propA']) {
|
||||
// if propA was updated
|
||||
h2 onChange <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href='../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:
|
||||
|
||||
```
|
||||
@Directive({
|
||||
selector: '[class-set]',
|
||||
properties: [
|
||||
'propA',
|
||||
'propB'
|
||||
],
|
||||
lifecycle: [onChange]
|
||||
})
|
||||
class ClassSet {
|
||||
propA;
|
||||
propB;
|
||||
onChange(changes:{[idx: string, PropertyUpdate]}) {
|
||||
// This will get called after any of the properties have been updated.
|
||||
if (changes['propA']) {
|
||||
// if propA was updated
|
||||
}
|
||||
if (changes['propA']) {
|
||||
// if propB was updated
|
||||
}
|
||||
}
|
||||
}
|
||||
if (changes['propA']) {
|
||||
// if propB was updated
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,27 @@
|
|||
|
||||
<h1>onCheck</h1>
|
||||
<h2>(const)</h2>
|
||||
<div>
|
||||
<p>Notify a directive when it has been checked.</p>
|
||||
<p>This method is called right after the directive's bindings have been checked,
|
||||
and before any of its children's bindings have been checked.</p>
|
||||
<p>It is invoked every time even when none of the directive's bindings has changed.</p>
|
||||
.l-main-section
|
||||
h2 Example:
|
||||
pre(class="prettyprint linenums")
|
||||
code.
|
||||
@Directive({
|
||||
selector: '[class-set]',
|
||||
lifecycle: [onCheck]
|
||||
})
|
||||
class ClassSet {
|
||||
onCheck() {
|
||||
}
|
||||
}
|
||||
</div>
|
||||
h2 onCheck <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href='../annotations'>angular2/annotations</a>
|
||||
|
||||
:markdown
|
||||
Notify a directive when it has been checked.
|
||||
|
||||
This method is called right after the directive's bindings have been checked,
|
||||
and before any of its children's bindings have been checked.
|
||||
|
||||
It is invoked every time even when none of the directive's bindings has changed.
|
||||
|
||||
## Example:
|
||||
|
||||
```
|
||||
@Directive({
|
||||
selector: '[class-set]',
|
||||
lifecycle: [onCheck]
|
||||
})
|
||||
class ClassSet {
|
||||
onCheck() {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,23 @@
|
|||
|
||||
<h1>onDestroy</h1>
|
||||
<h2>(const)</h2>
|
||||
<div>
|
||||
<p>Notify a directive whenever a <a href='View-var.html'><code>View</code></a> that contains it is destroyed.</p>
|
||||
.l-main-section
|
||||
h2 Example
|
||||
pre(class="prettyprint linenums")
|
||||
code.
|
||||
@Directive({
|
||||
...,
|
||||
lifecycle: [onDestroy]
|
||||
})
|
||||
class ClassSet {
|
||||
onDestroy() {
|
||||
// invoked to notify directive of the containing view destruction.
|
||||
}
|
||||
}
|
||||
</div>
|
||||
h2 onDestroy <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href='../annotations'>angular2/annotations</a>
|
||||
|
||||
:markdown
|
||||
Notify a directive whenever a <a href='View-var.html'><code>View</code></a> that contains it is destroyed.
|
||||
|
||||
## Example
|
||||
|
||||
```
|
||||
@Directive({
|
||||
...,
|
||||
lifecycle: [onDestroy]
|
||||
})
|
||||
class ClassSet {
|
||||
onDestroy() {
|
||||
// invoked to notify directive of the containing view destruction.
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,27 @@
|
|||
|
||||
<h1>onInit</h1>
|
||||
<h2>(const)</h2>
|
||||
<div>
|
||||
<p>Notify a directive when it has been checked the first itme.</p>
|
||||
<p>This method is called right after the directive's bindings have been checked,
|
||||
and before any of its children's bindings have been checked.</p>
|
||||
<p>It is invoked only once.</p>
|
||||
.l-main-section
|
||||
h2 Example:
|
||||
pre(class="prettyprint linenums")
|
||||
code.
|
||||
@Directive({
|
||||
selector: '[class-set]',
|
||||
lifecycle: [onInit]
|
||||
})
|
||||
class ClassSet {
|
||||
onInit() {
|
||||
}
|
||||
}
|
||||
</div>
|
||||
h2 onInit <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href='../annotations'>angular2/annotations</a>
|
||||
|
||||
:markdown
|
||||
Notify a directive when it has been checked the first itme.
|
||||
|
||||
This method is called right after the directive's bindings have been checked,
|
||||
and before any of its children's bindings have been checked.
|
||||
|
||||
It is invoked only once.
|
||||
|
||||
## Example:
|
||||
|
||||
```
|
||||
@Directive({
|
||||
selector: '[class-set]',
|
||||
lifecycle: [onInit]
|
||||
})
|
||||
class ClassSet {
|
||||
onInit() {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
|
||||
<h1>CHECKED</h1>
|
||||
<h2>(const)</h2>
|
||||
<div>
|
||||
<p>CHECKED means that the change detector should be skipped until its mode changes to
|
||||
CHECK_ONCE or CHECK_ALWAYS.</p>
|
||||
.l-main-section
|
||||
h2 CHECKED <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||
|
||||
:markdown
|
||||
CHECKED means that the change detector should be skipped until its mode changes to
|
||||
CHECK_ONCE or CHECK_ALWAYS.
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
|
||||
<h1>CHECK_ALWAYS</h1>
|
||||
<h2>(const)</h2>
|
||||
<div>
|
||||
<p>CHECK_ALWAYS means that after calling detectChanges the mode of the change detector
|
||||
will remain CHECK_ALWAYS.</p>
|
||||
.l-main-section
|
||||
h2 CHECK_ALWAYS <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||
|
||||
:markdown
|
||||
CHECK_ALWAYS means that after calling detectChanges the mode of the change detector
|
||||
will remain CHECK_ALWAYS.
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
|
||||
<h1>CHECK_ONCE</h1>
|
||||
<h2>(const)</h2>
|
||||
<div>
|
||||
<p>CHECK_ONCE means that after calling detectChanges the mode of the change detector
|
||||
will become CHECKED.</p>
|
||||
.l-main-section
|
||||
h2 CHECK_ONCE <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||
|
||||
:markdown
|
||||
CHECK_ONCE means that after calling detectChanges the mode of the change detector
|
||||
will become CHECKED.
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
|
||||
<h1>DEFAULT</h1>
|
||||
<h2>(const)</h2>
|
||||
<div>
|
||||
<p>DEFAULT means that the change detector's mode will be set to CHECK_ALWAYS during hydration.</p>
|
||||
.l-main-section
|
||||
h2 DEFAULT <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||
|
||||
:markdown
|
||||
DEFAULT means that the change detector's mode will be set to CHECK_ALWAYS during hydration.
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
|
||||
<h1>DETACHED</h1>
|
||||
<h2>(const)</h2>
|
||||
<div>
|
||||
<p>DETACHED means that the change detector sub tree is not a part of the main tree and
|
||||
should be skipped.</p>
|
||||
.l-main-section
|
||||
h2 DETACHED <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||
|
||||
:markdown
|
||||
DETACHED means that the change detector sub tree is not a part of the main tree and
|
||||
should be skipped.
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
|
||||
<h1>ON_PUSH</h1>
|
||||
<h2>(const)</h2>
|
||||
<div>
|
||||
<p>ON_PUSH means that the change detector's mode will be set to CHECK_ONCE during hydration.</p>
|
||||
.l-main-section
|
||||
h2 ON_PUSH <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href='../change_detection'>angular2/change_detection</a>
|
||||
|
||||
:markdown
|
||||
ON_PUSH means that the change detector's mode will be set to CHECK_ONCE during hydration.
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href='../directives'>angular2/directives</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/ng_if.ts#L3-L51">angular2/src/directives/ng_if.ts (line 3)</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/ng_if.ts#L3-L50">angular2/src/directives/ng_if.ts (line 3)</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.
|
||||
If the expression assigned to `ng-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:
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ p.location-badge.
|
|||
:markdown
|
||||
Defines a default case statement.
|
||||
|
||||
Default case statements are displayed when no `NgSwitchWhen` match the `switch` value.
|
||||
Default case statements are displayed when no `NgSwitchWhen` match the `ng-switch` value.
|
||||
|
||||
Example:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,40 +1,49 @@
|
|||
|
||||
<h1>coreDirectives</h1>
|
||||
<h2>(const)</h2>
|
||||
<div>
|
||||
<p>A collection of the Angular core directives that are likely to be used in each and every Angular
|
||||
application.</p>
|
||||
<p>This collection can be used to quickly enumerate all the built-in directives in the <code>@View</code>
|
||||
annotation. For example,
|
||||
instead of writing:</p>
|
||||
pre(class="prettyprint linenums")
|
||||
code.
|
||||
import {If, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/angular2';
|
||||
import {OtherDirective} from 'myDirectives';
|
||||
.l-main-section
|
||||
h2 coreDirectives <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href='../directives'>angular2/directives</a>
|
||||
|
||||
@Component({
|
||||
selector: 'my-component'
|
||||
})
|
||||
@View({
|
||||
templateUrl: 'myComponent.html',
|
||||
directives: [If, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault, OtherDirective]
|
||||
})
|
||||
export class MyComponent {
|
||||
...
|
||||
}<p>one could enumerate all the core directives at once:</p>
|
||||
pre(class="prettyprint linenums")
|
||||
code.
|
||||
import {coreDirectives} from 'angular2/angular2';
|
||||
import {OtherDirective} from 'myDirectives';
|
||||
:markdown
|
||||
A collection of the Angular core directives that are likely to be used in each and every Angular
|
||||
application.
|
||||
|
||||
This collection can be used to quickly enumerate all the built-in directives in the `@View`
|
||||
annotation. For example,
|
||||
instead of writing:
|
||||
|
||||
```
|
||||
import {If, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/angular2';
|
||||
import {OtherDirective} from 'myDirectives';
|
||||
|
||||
@Component({
|
||||
selector: 'my-component'
|
||||
})
|
||||
@View({
|
||||
templateUrl: 'myComponent.html',
|
||||
directives: [If, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault, OtherDirective]
|
||||
})
|
||||
export class MyComponent {
|
||||
...
|
||||
}
|
||||
```
|
||||
one could enumerate all the core directives at once:
|
||||
|
||||
```
|
||||
import {coreDirectives} from 'angular2/angular2';
|
||||
import {OtherDirective} from 'myDirectives';
|
||||
|
||||
@Component({
|
||||
selector: 'my-component'
|
||||
})
|
||||
@View({
|
||||
templateUrl: 'myComponent.html',
|
||||
directives: [coreDirectives, OtherDirective]
|
||||
})
|
||||
export class MyComponent {
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'my-component'
|
||||
})
|
||||
@View({
|
||||
templateUrl: 'myComponent.html',
|
||||
directives: [coreDirectives, OtherDirective]
|
||||
})
|
||||
export class MyComponent {
|
||||
...
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
|
||||
<h1>INVALID</h1>
|
||||
<h2>(const)</h2>
|
||||
<div>
|
||||
<p>Indicates that a Control is invalid, i.e. that an error exists in the input value.</p>
|
||||
.l-main-section
|
||||
h2 INVALID <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href='../forms'>angular2/forms</a>
|
||||
|
||||
:markdown
|
||||
Indicates that a Control is invalid, i.e. that an error exists in the input value.
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
|
||||
<h1>VALID</h1>
|
||||
<h2>(const)</h2>
|
||||
<div>
|
||||
<p>Indicates that a Control is valid, i.e. that no errors exist in the input value.</p>
|
||||
.l-main-section
|
||||
h2 VALID <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href='../forms'>angular2/forms</a>
|
||||
|
||||
:markdown
|
||||
Indicates that a Control is valid, i.e. that no errors exist in the input value.
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
|
||||
<h1>formDirectives</h1>
|
||||
<h2>(const)</h2>
|
||||
<div>
|
||||
<p>A list of all the form directives used as part of a <code>@View</code> annotation.</p>
|
||||
<p> This is a shorthand for importing them each individually.</p>
|
||||
.l-main-section
|
||||
h2 formDirectives <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href='../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.
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
|
||||
<h1>routerDirectives</h1>
|
||||
<h2>(const)</h2>
|
||||
<div>
|
||||
.l-main-section
|
||||
h2 routerDirectives <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href='../router'>angular2/router</a>
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue