docs(router): add documentation for lifecycle hooks

Closes angular#3334

Author: btford

modules/angular2/src/router/interfaces.ts

@@ -8,35 +8,131 @@ var __ignore_me = global;
 
 
 /**
- * Defines route lifecycle method [onActivate]
+ * Defines route lifecycle method [onActivate], which is called by the router at the end of a
+ * successful route navigation.
+ *
+ * For a single component's navigation, only one of either [onActivate] or [onReuse] will be called,
+ * depending on the result of [canReuse].
+ *
+ * If `onActivate` returns a promise, the route change will wait until the promise settles to
+ * instantiate and activate child components.
+ *
+ * ## Example
+ * ```
+ * @Directive({
+ * selector: 'my-cmp'
+ * })
+ * class MyCmp implements OnActivate {
+ * onActivate(next, prev) {
+ * this.log = 'Finished navigating from ' + prev.urlPath + ' to ' + next.urlPath;
+ * }
+ * }
+ * ```
  */
 export interface OnActivate {
  onActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
 }
 
 /**
- * Defines route lifecycle method [onReuse]
+ * Defines route lifecycle method [onReuse], which is called by the router at the end of a
+ * successful route navigation when [canReuse] is implemented and returns or resolves to true.
+ *
+ * For a single component's navigation, only one of either [onActivate] or [onReuse] will be called,
+ * depending on the result of [canReuse].
+ *
+ * ## Example
+ * ```
+ * @Directive({
+ * selector: 'my-cmp'
+ * })
+ * class MyCmp implements CanReuse, OnReuse {
+ * canReuse() {
+ * return true;
+ * }
+ *
+ * onReuse(next, prev) {
+ * this.params = next.params;
+ * }
+ * }
+ * ```
  */
 export interface OnReuse {
  onReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
 }
 
 /**
- * Defines route lifecycle method [onDeactivate]
+ * Defines route lifecycle method [onDeactivate], which is called by the router before destroying
+ * a component as part of a route change.
+ *
+ * If `onDeactivate` returns a promise, the route change will wait until the promise settles.
+ *
+ * ## Example
+ * ```
+ * @Directive({
+ * selector: 'my-cmp'
+ * })
+ * class MyCmp implements CanReuse, OnReuse {
+ * canReuse() {
+ * return true;
+ * }
+ *
+ * onReuse(next, prev) {
+ * this.params = next.params;
+ * }
+ * }
+ * ```
  */
 export interface OnDeactivate {
  onDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
 }
 
 /**
- * Defines route lifecycle method [canReuse]
+ * Defines route lifecycle method [canReuse], which is called by the router to determine whether a
+ * component should be reused across routes, or whether to destroy and instantiate a new component.
+ *
+ * If `canReuse` returns or resolves to `true`, the component instance will be reused.
+ *
+ * If `canReuse` throws or rejects, the navigation will be cancelled.
+ *
+ * ## Example
+ * ```
+ * @Directive({
+ * selector: 'my-cmp'
+ * })
+ * class MyCmp implements CanReuse, OnReuse {
+ * canReuse(next, prev) {
+ * return next.params.id == prev.params.id;
+ * }
+ *
+ * onReuse(next, prev) {
+ * this.id = next.params.id;
+ * }
+ * }
+ * ```
  */
 export interface CanReuse {
  canReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
 }
 
 /**
- * Defines route lifecycle method [canDeactivate]
+ * Defines route lifecycle method [canDeactivate], which is called by the router to determine
+ * if a component can be removed as part of a navigation.
+ *
+ * If `canDeactivate` returns or resolves to `false`, the navigation is cancelled.
+ *
+ * If `canDeactivate` throws or rejects, the navigation is also cancelled.
+ *
+ * ## Example
+ * ```
+ * @Directive({
+ * selector: 'my-cmp'
+ * })
+ * class MyCmp implements CanDeactivate {
+ * canDeactivate(next, prev) {
+ * return askUserIfTheyAreSureTheyWantToQuit();
+ * }
+ * }
+ * ```
  */
 export interface CanDeactivate {
  canDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;

modules/angular2/src/router/lifecycle_annotations.ts

@@ -16,6 +16,28 @@ export {
  onDeactivate
 } from './lifecycle_annotations_impl';
 
+/**
+ * Defines route lifecycle method [canActivate], which is called by the router to determine
+ * if a component can be instantiated as part of a navigation.
+ *
+ * Note that unlike other lifecycle hooks, this one uses an annotation rather than an interface.
+ * This is because [canActivate] is called before the component is instantiated.
+ *
+ * If `canActivate` returns or resolves to `false`, the navigation is cancelled.
+ *
+ * If `canActivate` throws or rejects, the navigation is also cancelled.
+ *
+ * ## Example
+ * ```
+ * @Directive({
+ * selector: 'control-panel-cmp'
+ * })
+ * @CanActivate(() => checkIfUserIsLoggedIn())
+ * class ControlPanelCmp {
+ * // ...
+ * }
+ * ```
+ */
 export var CanActivate:
- (hook: (next: ComponentInstruction, prev: ComponentInstruction) => Promise<boolean>| boolean) => ClassDecorator =
- makeDecorator(CanActivateAnnotation);
+ (hook: (next: ComponentInstruction, prev: ComponentInstruction) => Promise<boolean>| boolean) =>
+ ClassDecorator = makeDecorator(CanActivateAnnotation);