docs(api): update for alpha-25

This commit is contained in:
Naomi Black 2015-06-02 09:05:05 -07:00
parent d62557ada6
commit b206074f27
20 changed files with 279 additions and 208 deletions

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href='../annotations'>angular2/annotations</a> 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 :markdown
Declare reusable UI building blocks for an application. Declare reusable UI building blocks for an application.

View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href='../annotations'>angular2/annotations</a> 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 :markdown
Directives allow you to attach behavior to elements in the DOM. 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 A directive can also query for other child directives. Since parent directives are instantiated
before child before child directives, a directive can't simply inject the list of child directives. Instead,
directives, a directive can't simply inject the list of child directives. Instead, the directive the directive injects a <a href='../core/QueryList-class.html'><code>QueryList</code></a>, which updates its contents as children are added,
injects a <a href='../core/QueryList-class.html'><code>QueryList</code></a>, which updates its contents as children are added, removed, or moved 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
by a directive `ng-if`, or an `ng-switch`.
that uses a <a href='../core/ViewContainerRef-class.html'><code>ViewContainerRef</code></a> such as a `for`, an `if`, or a `switch`.
``` ```
@Directive({ selector: '[my-directive]' }) @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 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` 6. Here, `Dependency` 5 would not be included, because it is not a direct child.
5 would not be included, because it is not a direct child.
### Injecting a live collection of descendant directives ### 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. 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.

View File

@ -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 .l-main-section
h2 Example: h2 onAllChangesDone <span class="type">variable</span>
pre(class="prettyprint linenums") p.location-badge.
code. exported from <a href='../annotations'>angular2/annotations</a>
@Directive({
selector: '[class-set]',
lifecycle: [onAllChangesDone]
})
class ClassSet {
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>

View File

@ -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&#39;s bindings have been checked,
and before any of its children&#39;s bindings have been checked.</p>
<p>It is invoked only if at least one of the directive&#39;s bindings has changed.</p>
.l-main-section .l-main-section
h2 Example: h2 onChange <span class="type">variable</span>
pre(class="prettyprint linenums") p.location-badge.
code. exported from <a href='../annotations'>angular2/annotations</a>
@Directive({
selector: '[class-set]', :markdown
properties: [ Notify a directive when any of its bindings have changed.
'propA',
'propB' This method is called right after the directive's bindings have been checked,
], and before any of its children's bindings have been checked.
lifecycle: [onChange]
}) It is invoked only if at least one of the directive's bindings has changed.
class ClassSet {
propA; ## Example:
propB;
onChange(changes:{[idx: string, PropertyUpdate]}) { ```
// This will get called after any of the properties have been updated. @Directive({
if (changes['propA']) { selector: '[class-set]',
// if propA was updated 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>

View File

@ -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&#39;s bindings have been checked,
and before any of its children&#39;s bindings have been checked.</p>
<p>It is invoked every time even when none of the directive&#39;s bindings has changed.</p>
.l-main-section .l-main-section
h2 Example: h2 onCheck <span class="type">variable</span>
pre(class="prettyprint linenums") p.location-badge.
code. exported from <a href='../annotations'>angular2/annotations</a>
@Directive({
selector: '[class-set]', :markdown
lifecycle: [onCheck] Notify a directive when it has been checked.
})
class ClassSet { This method is called right after the directive's bindings have been checked,
onCheck() { 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.
</div>
## Example:
```
@Directive({
selector: '[class-set]',
lifecycle: [onCheck]
})
class ClassSet {
onCheck() {
}
}
```

View File

@ -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 .l-main-section
h2 Example h2 onDestroy <span class="type">variable</span>
pre(class="prettyprint linenums") p.location-badge.
code. exported from <a href='../annotations'>angular2/annotations</a>
@Directive({
..., :markdown
lifecycle: [onDestroy] Notify a directive whenever a <a href='View-var.html'><code>View</code></a> that contains it is destroyed.
})
class ClassSet { ## Example
onDestroy() {
// invoked to notify directive of the containing view destruction. ```
} @Directive({
} ...,
</div> lifecycle: [onDestroy]
})
class ClassSet {
onDestroy() {
// invoked to notify directive of the containing view destruction.
}
}
```

View File

@ -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&#39;s bindings have been checked,
and before any of its children&#39;s bindings have been checked.</p>
<p>It is invoked only once.</p>
.l-main-section .l-main-section
h2 Example: h2 onInit <span class="type">variable</span>
pre(class="prettyprint linenums") p.location-badge.
code. exported from <a href='../annotations'>angular2/annotations</a>
@Directive({
selector: '[class-set]', :markdown
lifecycle: [onInit] Notify a directive when it has been checked the first itme.
})
class ClassSet { This method is called right after the directive's bindings have been checked,
onInit() { and before any of its children's bindings have been checked.
}
} It is invoked only once.
</div>
## Example:
```
@Directive({
selector: '[class-set]',
lifecycle: [onInit]
})
class ClassSet {
onInit() {
}
}
```

View File

@ -1,8 +1,12 @@
<h1>CHECKED</h1> .l-main-section
<h2>(const)</h2> h2 CHECKED <span class="type">variable</span>
<div> p.location-badge.
<p>CHECKED means that the change detector should be skipped until its mode changes to exported from <a href='../change_detection'>angular2/change_detection</a>
CHECK_ONCE or CHECK_ALWAYS.</p>
:markdown
CHECKED means that the change detector should be skipped until its mode changes to
CHECK_ONCE or CHECK_ALWAYS.
</div>

View File

@ -1,8 +1,12 @@
<h1>CHECK_ALWAYS</h1> .l-main-section
<h2>(const)</h2> h2 CHECK_ALWAYS <span class="type">variable</span>
<div> p.location-badge.
<p>CHECK_ALWAYS means that after calling detectChanges the mode of the change detector exported from <a href='../change_detection'>angular2/change_detection</a>
will remain CHECK_ALWAYS.</p>
:markdown
CHECK_ALWAYS means that after calling detectChanges the mode of the change detector
will remain CHECK_ALWAYS.
</div>

View File

@ -1,8 +1,12 @@
<h1>CHECK_ONCE</h1> .l-main-section
<h2>(const)</h2> h2 CHECK_ONCE <span class="type">variable</span>
<div> p.location-badge.
<p>CHECK_ONCE means that after calling detectChanges the mode of the change detector exported from <a href='../change_detection'>angular2/change_detection</a>
will become CHECKED.</p>
:markdown
CHECK_ONCE means that after calling detectChanges the mode of the change detector
will become CHECKED.
</div>

View File

@ -1,7 +1,11 @@
<h1>DEFAULT</h1> .l-main-section
<h2>(const)</h2> h2 DEFAULT <span class="type">variable</span>
<div> p.location-badge.
<p>DEFAULT means that the change detector&#39;s mode will be set to CHECK_ALWAYS during hydration.</p> 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>

View File

@ -1,8 +1,12 @@
<h1>DETACHED</h1> .l-main-section
<h2>(const)</h2> h2 DETACHED <span class="type">variable</span>
<div> p.location-badge.
<p>DETACHED means that the change detector sub tree is not a part of the main tree and exported from <a href='../change_detection'>angular2/change_detection</a>
should be skipped.</p>
:markdown
DETACHED means that the change detector sub tree is not a part of the main tree and
should be skipped.
</div>

View File

@ -1,7 +1,11 @@
<h1>ON_PUSH</h1> .l-main-section
<h2>(const)</h2> h2 ON_PUSH <span class="type">variable</span>
<div> p.location-badge.
<p>ON_PUSH means that the change detector&#39;s mode will be set to CHECK_ONCE during hydration.</p> 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>

View File

@ -1,14 +1,13 @@
p.location-badge. p.location-badge.
exported from <a href='../directives'>angular2/directives</a> 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 :markdown
Removes or recreates a portion of the DOM tree based on an {expression}. Removes or recreates a portion of the DOM tree based on an {expression}.
If the expression assigned to `if` evaluates to a false value then the element is removed from If the expression assigned to `ng-if` evaluates to a false value then the element
the is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
DOM, otherwise a clone of the element is reinserted into the DOM.
# Example: # Example:

View File

@ -6,7 +6,7 @@ p.location-badge.
:markdown :markdown
Defines a default case statement. 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: Example:

View File

@ -1,40 +1,49 @@
<h1>coreDirectives</h1> .l-main-section
<h2>(const)</h2> h2 coreDirectives <span class="type">variable</span>
<div> p.location-badge.
<p>A collection of the Angular core directives that are likely to be used in each and every Angular exported from <a href='../directives'>angular2/directives</a>
application.</p>
<p>This collection can be used to quickly enumerate all the built-in directives in the <code>@View</code> :markdown
annotation. For example, A collection of the Angular core directives that are likely to be used in each and every Angular
instead of writing:</p> application.
pre(class="prettyprint linenums")
code. This collection can be used to quickly enumerate all the built-in directives in the `@View`
import {If, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/angular2'; annotation. For example,
import {OtherDirective} from 'myDirectives'; 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: [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';
@Component({
selector: 'my-component'
})
@View({
templateUrl: 'myComponent.html',
directives: [coreDirectives, OtherDirective]
})
export class MyComponent {
...
}
</div>

View File

@ -1,7 +1,10 @@
<h1>INVALID</h1> .l-main-section
<h2>(const)</h2> h2 INVALID <span class="type">variable</span>
<div> p.location-badge.
<p>Indicates that a Control is invalid, i.e. that an error exists in the input value.</p> 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>

View File

@ -1,7 +1,10 @@
<h1>VALID</h1> .l-main-section
<h2>(const)</h2> h2 VALID <span class="type">variable</span>
<div> p.location-badge.
<p>Indicates that a Control is valid, i.e. that no errors exist in the input value.</p> 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>

View File

@ -1,8 +1,12 @@
<h1>formDirectives</h1> .l-main-section
<h2>(const)</h2> h2 formDirectives <span class="type">variable</span>
<div> p.location-badge.
<p>A list of all the form directives used as part of a <code>@View</code> annotation.</p> exported from <a href='../forms'>angular2/forms</a>
<p> This is a shorthand for importing them each individually.</p>
: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>

View File

@ -1,6 +1,10 @@
<h1>routerDirectives</h1> .l-main-section
<h2>(const)</h2> h2 routerDirectives <span class="type">variable</span>
<div> p.location-badge.
exported from <a href='../router'>angular2/router</a>
:markdown
</div>