docs(lifecycle-hooks): post-RC5 Dart resync (#2141)

* lifecycle-hooks: copy latest to cache

* docs(lifecycle-hooks): post-RC5 Dart resync

- TS prose: removed mention of `routerOnActivate` which no longer
exists in the new router.
- TS improvements to the sample code have also been propagated to the
Dart sample.

Contributes to #2077.
E2E tests pass now.

* post-review updates
This commit is contained in:
Patrice Chalin 2016-08-19 15:07:30 -07:00 committed by Kathy Walrath
parent 5d1da1e047
commit f0daf5d238
10 changed files with 246 additions and 226 deletions

View File

@ -7,7 +7,7 @@ import 'logger_service.dart';
//////////////////
// #docregion child-view
@Component(
selector: 'my-child',
selector: 'my-child-view',
template: '<input [(ngModel)]="hero">')
class ChildViewComponent {
String hero = 'Magneta';
@ -20,7 +20,7 @@ class ChildViewComponent {
// #docregion template
template: '''
<div>-- child view begins --</div>
<my-child></my-child>
<my-child-view></my-child-view>
<div>-- child view ends --</div>
<p *ngIf="comment.isNotEmpty" class="comment">{{comment}}</p>''',
// #enddocregion template

View File

@ -92,7 +92,7 @@ class DoCheckComponent implements DoCheck, OnChanges {
@Component(
selector: 'do-check-parent',
templateUrl: 'on_changes_parent_component.html',
templateUrl: 'do_check_parent_component.html',
styles: const ['.parent {background: Lavender}'],
directives: const [DoCheckComponent])
class DoCheckParentComponent {

View File

@ -0,0 +1,13 @@
<div class="parent">
<h2>{{title}}</h2>
<table>
<tr><td>Power: </td><td><input [(ngModel)]="power"></td></tr>
<tr><td>Hero.name: </td><td><input [(ngModel)]="hero.name"></td></tr>
</table>
<p><button (click)="reset()">Reset Log</button></p>
<!-- #docregion do-check -->
<do-check [hero]="hero" [power]="power"></do-check>
<!-- #enddocregion do-check -->
</div>

View File

@ -10,5 +10,4 @@
<!-- #docregion on-changes -->
<on-changes [hero]="hero" [power]="power"></on-changes>
<!-- #enddocregion on-changes -->
<do-check [hero]="hero" [power]="power"></do-check>
</div>

View File

@ -1,8 +1,6 @@
// #docregion
import 'package:angular2/platform/browser.dart';
import 'package:lifecycle_hooks/app_component.dart';
main() {
void main() {
bootstrap(AppComponent);
}

View File

@ -1,4 +1,3 @@
// #docregion
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

View File

@ -3,9 +3,16 @@ extends ../../../ts/_cache/guide/lifecycle-hooks.jade
block includes
include ../_util-fns
block optional-interfaces
//- n/a for Dart
block other-angular-subsystems
:marked
The router, for instance, also has its own [router lifecycle
hooks](router.html#router-lifecycle-hooks) that allow us to tap into
specific moments in route navigation.
A parallel can be drawn between `ngOnInit` and `routerOnActivate`. Both are
prefixed so as to avoid collision, and both run right when a component is
being initialized.
block tick-methods
:marked
The `LoggerService.tick` method, which returns a `Future`, postpones the update one turn of the of the browser's update cycle ... and that's long enough.
The `LoggerService.tick` method, which returns a `Future`, postpones the
update one turn of the of the browser's update cycle ... and that's long enough.

View File

@ -43,10 +43,12 @@ a#hooks-overview
:marked
No directive or component will implement all of them and some of the hooks only make sense for components.
Angular only calls a directive/component hook method *if it is defined*.
block optional-interfaces
+ifDocsFor('ts|js')
.l-sub-section
:marked
### Interface optional?
The interfaces are optional for JavaScript and Typescript developers from a purely technical perspective.
The JavaScript language doesn't have interfaces.
Angular can't see TypeScript interfaces at runtime because they disappear from the transpiled JavaScript.
@ -86,7 +88,7 @@ table(width="100%")
td ngDoCheck
td
:marked
Detect and act upon changes that Angular can or won't
Detect and act upon changes that Angular can't or won't
detect on its own. Called every change detection run.
tr(style=top)
td ngOnDestroy
@ -186,12 +188,11 @@ a(id="other-lifecycles")
## Other lifecycle hooks
Other Angular sub-systems may have their own lifecycle hooks apart from the component hooks we've listed.
The router, for instance, also has it's own [router lifecycle hooks](router.html#router-lifecycle-hooks)
that allow us to tap into specific moments in route navigation.
A parallel can be drawn between `ngOnInit` and `routerOnActivate`.
Both are prefixed so as to avoid collision, and both run right when a component is 'booting' up.
block other-angular-subsystems
//- N/A for TS.
:marked
3rd party libraries might implement their hooks as well in order to give us, the developers, more
control over how these libraries are used.

View File

@ -43,10 +43,12 @@ a#hooks-overview
:marked
No directive or component will implement all of them and some of the hooks only make sense for components.
Angular only calls a directive/component hook method *if it is defined*.
block optional-interfaces
+ifDocsFor('ts|js')
.l-sub-section
:marked
### Interface optional?
The interfaces are optional for JavaScript and Typescript developers from a purely technical perspective.
The JavaScript language doesn't have interfaces.
Angular can't see TypeScript interfaces at runtime because they disappear from the transpiled JavaScript.
@ -187,9 +189,10 @@ a(id="other-lifecycles")
Other Angular sub-systems may have their own lifecycle hooks apart from the component hooks we've listed.
A parallel can be drawn between `ngOnInit` and `routerOnActivate`.
Both are prefixed so as to avoid collision, and both run right when a component is 'booting' up.
block other-angular-subsystems
//- N/A for TS.
:marked
3rd party libraries might implement their hooks as well in order to give us, the developers, more
control over how these libraries are used.