angular · btford · Sep 21, 2015 · Sep 21, 2015 · Sep 22, 2015 · Sep 22, 2015
diff --git a/modules/angular2/router.ts b/modules/angular2/router.ts
@@ -32,33 +32,101 @@ import {Location} from './src/router/location';
 import {bind, OpaqueToken, Binding} from './core';
 import {CONST_EXPR, Type} from './src/core/facade/lang';
 
+/**
+ * Token used to bind the component with the top-level {@link RouteConfig}s for the
+ * application.
+ *
+ * You can use the {@link routerBindings} function in your {@link bootstrap} bindings to
+ * simplify setting up these bindings.
+ *
+ * ## Example
+ *
+ * ```
+ * import {Component, View} from 'angular2/angular2';
+ * import {
+ *   ROUTER_DIRECTIVES,
+ *   ROUTER_BINDINGS,
+ *   ROUTER_PRIMARY_COMPONENT,
+ *   RouteConfig
+ * } from 'angular2/router';
+ *
+ * @Component({...})
+ * @View({directives: [ROUTER_DIRECTIVES]})
+ * @RouteConfig([
+ *  {...},
+ * ])
+ * class AppCmp {
+ *   // ...
+ * }
+ *
+ * bootstrap(AppCmp, [
+ *   ROUTER_BINDINGS,
+ *   bind(ROUTER_PRIMARY_COMPONENT).toValue(AppCmp)
+ * ]);
+ * ```
+ */
 export const ROUTER_PRIMARY_COMPONENT: OpaqueToken =
     CONST_EXPR(new OpaqueToken('RouterPrimaryComponent'));
 
-export const ROUTER_DIRECTIVES: any[] = CONST_EXPR([RouterOutlet, RouterLink]);
-
 /**
- * A list of {@link Binding}. To use the router, you must add this to your application.
+ * A list of directives. To use the router directives like {@link RouterOutlet} and
+ * {@link RouterLink}, add this to your `directives` array in the {@link View} decorator of your
+ * component.
  *
  * ## Example
  *
- * ```typescript
+ * ```
+ * import {Component, View} from 'angular2/angular2';
+ * import {ROUTER_DIRECTIVES, routerBindings, RouteConfig} from 'angular2/router';
+ *
  * @Component({...})
  * @View({directives: [ROUTER_DIRECTIVES]})
  * @RouteConfig([
- *  new Route(...),
+ *  {...},
  * ])
  * class AppCmp {
- *  constructor(router: Router, location: Location) {
  *    // ...
- *  }
- *
  * }
  *
- *
  * bootstrap(AppCmp, [routerBindings(AppCmp)]);
  * ```
  */
+export const ROUTER_DIRECTIVES: any[] = CONST_EXPR([RouterOutlet, RouterLink]);
+
+/**
+ * A list of {@link Binding}s. To use the router, you must add this to your application.
+ *
+ * Note that you also need to bind to {@link ROUTER_PRIMARY_COMPONENT}.
+ *
+ * You can use the {@link routerBindings} function in your {@link bootstrap} bindings to
+ * simplify setting up these bindings.
+ *
+ * ## Example
+ *
+ * ```
+ * import {Component, View} from 'angular2/angular2';
+ * import {
+ *   ROUTER_DIRECTIVES,
+ *   ROUTER_BINDINGS,
+ *   ROUTER_PRIMARY_COMPONENT,
+ *   RouteConfig
+ * } from 'angular2/router';
+ *
+ * @Component({...})
+ * @View({directives: [ROUTER_DIRECTIVES]})
+ * @RouteConfig([
+ *  {...},
+ * ])
+ * class AppCmp {
+ *   // ...
+ * }
+ *
+ * bootstrap(AppCmp, [
+ *   ROUTER_BINDINGS,
+ *   bind(ROUTER_PRIMARY_COMPONENT).toValue(AppCmp)
+ * ]);
+ * ```
+ */
 export const ROUTER_BINDINGS: any[] = CONST_EXPR([
   RouteRegistry,
   CONST_EXPR(new Binding(LocationStrategy, {toClass: PathLocationStrategy})),
@@ -75,6 +143,28 @@ function routerFactory(registry, location, primaryComponent) {
   return new RootRouter(registry, location, primaryComponent);
 }
 
+/**
+ * A list of {@link Binding}s. To use the router, you must add these bindings to
+ * your application.
+ *
+ * ## Example
+ *
+ * ```
+ * import {Component, View} from 'angular2/angular2';
+ * import {ROUTER_DIRECTIVES, routerBindings, RouteConfig} from 'angular2/router';
+ *
+ * @Component({...})
+ * @View({directives: [ROUTER_DIRECTIVES]})
+ * @RouteConfig([
+ *  {...},
+ * ])
+ * class AppCmp {
+ *   // ...
+ * }
+ *
+ * bootstrap(AppCmp, [routerBindings(AppCmp)]);
+ * ```
+ */
 export function routerBindings(primaryComponent: Type): Array<any> {
   return [ROUTER_BINDINGS, bind(ROUTER_PRIMARY_COMPONENT).toValue(primaryComponent)];
 }
diff --git a/modules/angular2/src/router/hash_location_strategy.ts b/modules/angular2/src/router/hash_location_strategy.ts
@@ -3,6 +3,45 @@ import {Injectable} from 'angular2/src/core/di';
 import {LocationStrategy} from './location_strategy';
 import {EventListener, History, Location} from 'angular2/src/core/facade/browser';
 
+/**
+ * `HashLocationStrategy` is a {@link LocationStrategy} used to configure the
+ * {@link Location} service to represent its state in the
+ * [hash fragment](https://en.wikipedia.org/wiki/Uniform_Resource_Locator#Syntax)
+ * of the browser's URL.
+ *
+ * `HashLocationStrategy` is the default binding for {@link LocationStrategy}
+ * provided in {@link routerBindings} and {@link ROUTER_BINDINGS}.
+ *
+ * For instance, if you call `location.go('/foo')`, the browser's URL will become
+ * `example.com#/foo`.
+ *
+ * ## Example
+ *
+ * ```
+ * import {Component, View} from 'angular2/angular2';
+ * import {
+ *   ROUTER_DIRECTIVES,
+ *   routerBindings,
+ *   RouteConfig,
+ *   Location
+ * } from 'angular2/router';
+ *
+ * @Component({...})
+ * @View({directives: [ROUTER_DIRECTIVES]})
+ * @RouteConfig([
+ *  {...},
+ * ])
+ * class AppCmp {
+ *   constructor(location: Location) {
+ *     location.go('/foo');
+ *   }
+ * }
+ *
+ * bootstrap(AppCmp, [
+ *   routerBindings(AppCmp) // includes binding to HashLocationStrategy
+ * ]);
+ * ```
+ */
 @Injectable()
 export class HashLocationStrategy extends LocationStrategy {
   private _location: Location;

diff --git a/modules/angular2/src/router/interfaces.ts b/modules/angular2/src/router/interfaces.ts
@@ -8,76 +8,102 @@ var __ignore_me = global;
 
 
 /**
- * Defines route lifecycle method [onActivate], which is called by the router at the end of a
+ * 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].
+ * For a single component's navigation, only one of either {@link OnActivate} or {@link OnReuse}
+ * will be called depending on the result of {@link CanReuse}.
+ *
+ * The `onActivate` hook is called with two {@link ComponentInstruction}s as parameters, the first
+ * representing the current route being navigated to, and the second parameter representing the
+ * previous route or `null`.
  *
  * If `onActivate` returns a promise, the route change will wait until the promise settles to
  * instantiate and activate child components.
  *
  * ## Example
  * ```
- * @Directive({
+ * import {Component, View} from 'angular2/angular2';
+ * import {OnActivate, ComponentInstruction} from 'angular2/router';
+ *
+ * @Component({
  *   selector: 'my-cmp'
  * })
+ * @View({
+ *  template: '<div>hello!</div>'
+ * })
  * class MyCmp implements OnActivate {
- *   onActivate(next, prev) {
+ *   onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
  *     this.log = 'Finished navigating from ' + prev.urlPath + ' to ' + next.urlPath;
  *   }
  * }
- *  ```
+ * ```
  */
 export interface OnActivate {
   onActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
 }
 
 /**
- * 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.
+ * Defines route lifecycle method `onReuse`, which is called by the router at the end of a
+ * successful route navigation when {@link CanReuse} is implemented and returns or resolves to true.
+ *
+ * For a single component's navigation, only one of either {@link OnActivate} or {@link OnReuse}
+ * will be called, depending on the result of {@link CanReuse}.
  *
- * For a single component's navigation, only one of either [onActivate] or [onReuse] will be called,
- * depending on the result of [canReuse].
+ * The `onReuse` hook is called with two {@link ComponentInstruction}s as parameters, the first
+ * representing the current route being navigated to, and the second parameter representing the
+ * previous route or `null`.
  *
  * ## Example
  * ```
- * @Directive({
+ * import {Component, View} from 'angular2/angular2';
+ * import {CanReuse, OnReuse, ComponentInstruction} from 'angular2/router';
+ *
+ * @Component({
  *   selector: 'my-cmp'
  * })
+ * @View({
+ *  template: '<div>hello!</div>'
+ * })
  * class MyCmp implements CanReuse, OnReuse {
- *   canReuse() {
+ *   canReuse(next: ComponentInstruction, prev: ComponentInstruction) {
  *     return true;
  *   }
  *
- *   onReuse(next, prev) {
+ *   onReuse(next: ComponentInstruction, prev: ComponentInstruction) {
  *     this.params = next.params;
  *   }
  * }
- *  ```
+ * ```
  */
 export interface OnReuse {
   onReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
 }
 
 /**
- * Defines route lifecycle method [onDeactivate], which is called by the router before destroying
+ * Defines route lifecycle method `onDeactivate`, which is called by the router before destroying
  * a component as part of a route change.
  *
+ * The `onDeactivate` hook is called with two {@link ComponentInstruction}s as parameters, the first
+ * representing the current route being navigated to, and the second parameter representing the
+ * previous route.
+ *
  * If `onDeactivate` returns a promise, the route change will wait until the promise settles.
  *
  * ## Example
  * ```
- * @Directive({
+ * import {Component, View} from 'angular2/angular2';
+ * import {OnDeactivate, ComponentInstruction} from 'angular2/router';
+ *
+ * @Component({
  *   selector: 'my-cmp'
  * })
- * class MyCmp implements CanReuse, OnReuse {
- *   canReuse() {
- *     return true;
- *   }
- *
- *   onReuse(next, prev) {
- *     this.params = next.params;
+ * @View({
+ *  template: '<div>hello!</div>'
+ * })
+ * class MyCmp implements OnDeactivate {
+ *   onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
+ *     return this.doFadeAwayAnimation();
  *   }
  * }
  *  ```
@@ -87,24 +113,37 @@ export interface OnDeactivate {
 }
 
 /**
- * Defines route lifecycle method [canReuse], which is called by the router to determine whether a
+ * 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.
+ * The `canReuse` hook is called with two {@link ComponentInstruction}s as parameters, the first
+ * representing the current route being navigated to, and the second parameter representing the
+ * previous route.
+ *
+ * If `canReuse` returns or resolves to `true`, the component instance will be reused and the
+ * {@link OnDeactivate} hook will be run. If `canReuse` returns or resolves to `false`, a new
+ * component will be instantiated, and the existing component will be deactivated and removed as
+ * part of the navigation.
  *
  * If `canReuse` throws or rejects, the navigation will be cancelled.
  *
  * ## Example
  * ```
- * @Directive({
+ * import {Component, View} from 'angular2/angular2';
+ * import {CanReuse, OnReuse, ComponentInstruction} from 'angular2/router';
+ *
+ * @Component({
  *   selector: 'my-cmp'
  * })
+ * @View({
+ *  template: '<div>hello!</div>'
+ * })
  * class MyCmp implements CanReuse, OnReuse {
- *   canReuse(next, prev) {
+ *   canReuse(next: ComponentInstruction, prev: ComponentInstruction) {
  *     return next.params.id == prev.params.id;
  *   }
  *
- *   onReuse(next, prev) {
+ *   onReuse(next: ComponentInstruction, prev: ComponentInstruction) {
  *     this.id = next.params.id;
  *   }
  * }
@@ -115,20 +154,32 @@ export interface CanReuse {
 }
 
 /**
- * Defines route lifecycle method [canDeactivate], which is called by the router to determine
+ * 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.
+ * The `canDeactivate` hook is called with two {@link ComponentInstruction}s as parameters, the
+ * first representing the current route being navigated to, and the second parameter
+ * representing the previous route.
+ *
+ * If `canDeactivate` returns or resolves to `false`, the navigation is cancelled. If it returns or
+ * resolves to `true`, then the navigation continues, and the component will be deactivated
+ * (the {@link OnDeactivate} hook will be run) and removed.
  *
  * If `canDeactivate` throws or rejects, the navigation is also cancelled.
  *
  * ## Example
  * ```
- * @Directive({
+ * import {Component, View} from 'angular2/angular2';
+ * import {CanDeactivate, ComponentInstruction} from 'angular2/router';
+ *
+ * @Component({
  *   selector: 'my-cmp'
  * })
+ * @View({
+ *  template: '<div>hello!</div>'
+ * })
  * class MyCmp implements CanDeactivate {
- *   canDeactivate(next, prev) {
+ *   canDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
  *     return askUserIfTheyAreSureTheyWantToQuit();
  *   }
  * }