docs(router-deprecated): link doc to deprecated examples

closes #1291

public/docs/_examples/router-deprecated/ts/app/app.component.3.ts

@@ -3,7 +3,6 @@ import {Component} from '@angular/core';
 import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
 
 import { CrisisCenterComponent } from './crisis-center/crisis-center.component.1';
-
 import { DialogService }         from './dialog.service';
 import { HeroService }           from './heroes/hero.service';
 

public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-detail.component.1.ts

@@ -2,13 +2,14 @@
 
 // #docregion
 import { Component, OnInit } from '@angular/core';
-import {Crisis, CrisisService} from './crisis.service';
 import { RouteParams, Router } from '@angular/router-deprecated';
 // #docregion routerCanDeactivate
 import { CanDeactivate, ComponentInstruction } from '@angular/router-deprecated';
+
 import { DialogService } from '../dialog.service';
 
 // #enddocregion routerCanDeactivate
+import { Crisis, CrisisService } from './crisis.service';
 
 @Component({
   // #docregion template
@@ -38,16 +39,16 @@ export class CrisisDetailComponent implements OnInit, CanDeactivate {
 
 // #enddocregion routerCanDeactivate, cancel-save
   constructor(
-    private _service: CrisisService,
+    private service: CrisisService,
-    private _router: Router,
+    private router: Router,
-    private _routeParams: RouteParams,
+    private routeParams: RouteParams,
-    private _dialog: DialogService
+    private dialog: DialogService
     ) { }
 
   // #docregion ngOnInit
   ngOnInit() {
-    let id = +this._routeParams.get('id');
+    let id = +this.routeParams.get('id');
-    this._service.getCrisis(id).then(crisis => {
+    this.service.getCrisis(id).then(crisis => {
       if (crisis) {
         this.editName = crisis.name;
         this.crisis = crisis;
@@ -66,7 +67,7 @@ export class CrisisDetailComponent implements OnInit, CanDeactivate {
     }
     // Otherwise ask the user with the dialog service and return its
     // promise which resolves to true or false when the user decides
-    return this._dialog.confirm('Discard changes?');
+    return this.dialog.confirm('Discard changes?');
   }
   // #enddocregion routerCanDeactivate
 
@@ -85,7 +86,7 @@ export class CrisisDetailComponent implements OnInit, CanDeactivate {
   // #docregion gotoCrises
   gotoCrises() {
     // Like <a [routerLink]="['CrisisList']">Crisis Center</a
-    this._router.navigate(['CrisisList']);
+    this.router.navigate(['CrisisList']);
   }
   // #enddocregion gotoCrises
 // #docregion routerCanDeactivate, cancel-save

public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-detail.component.ts

@@ -2,9 +2,10 @@
 
 // #docregion
 import { Component, OnInit } from '@angular/core';
-import {Crisis, CrisisService} from './crisis.service';
 import { RouteParams, Router } from '@angular/router-deprecated';
 import { CanDeactivate, ComponentInstruction } from '@angular/router-deprecated';
+
+import { Crisis, CrisisService } from './crisis.service';
 import { DialogService } from '../dialog.service';
 
 @Component({
@@ -32,15 +33,15 @@ export class CrisisDetailComponent implements OnInit, CanDeactivate {
   editName: string;
 
   constructor(
-    private _service: CrisisService,
+    private service: CrisisService,
-    private _router: Router,
+    private router: Router,
-    private _routeParams: RouteParams,
+    private routeParams: RouteParams,
     private _dialog: DialogService
     ) { }
 
   ngOnInit() {
-    let id = +this._routeParams.get('id');
+    let id = +this.routeParams.get('id');
-    this._service.getCrisis(id).then(crisis => {
+    this.service.getCrisis(id).then(crisis => {
       if (crisis) {
         this.editName = crisis.name;
         this.crisis = crisis;
@@ -77,7 +78,7 @@ export class CrisisDetailComponent implements OnInit, CanDeactivate {
     // so that the CrisisListComponent can select that hero.
     // Add a totally useless `foo` parameter for kicks.
     // #docregion gotoCrises-navigate
-    this._router.navigate(['CrisisList', {id: crisisId, foo: 'foo'} ]);
+    this.router.navigate(['CrisisList', {id: crisisId, foo: 'foo'} ]);
     // #enddocregion gotoCrises-navigate
   }
   // #enddocregion gotoCrises

public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-list.component.1.ts

@@ -2,9 +2,10 @@
 
 // #docregion
 import { Component, OnInit } from '@angular/core';
-import {Crisis, CrisisService} from './crisis.service';
 import { Router } from '@angular/router-deprecated';
 
+import { Crisis, CrisisService } from './crisis.service';
+
 @Component({
   // #docregion template
   template: `
@@ -21,16 +22,16 @@ export class CrisisListComponent implements OnInit {
   crises: Crisis[];
 
   constructor(
-    private _service: CrisisService,
+    private service: CrisisService,
-    private _router: Router) {}
+    private router: Router) {}
 
   ngOnInit() {
-    this._service.getCrises().then(crises => this.crises = crises);
+    this.service.getCrises().then(crises => this.crises = crises);
   }
 
   // #docregion select
   onSelect(crisis: Crisis) {
-    this._router.navigate(['CrisisDetail', { id: crisis.id }]  );
+    this.router.navigate(['CrisisDetail', { id: crisis.id }]  );
   }
   // #enddocregion select
 }

public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis-list.component.ts

@@ -2,8 +2,9 @@
 
 // #docregion
 import { Component, OnInit } from '@angular/core';
+import { RouteParams, Router } from '@angular/router-deprecated';
+
 import { Crisis, CrisisService } from './crisis.service';
-import {Router, RouteParams} from '@angular/router-deprecated';
 
 @Component({
   template: `
@@ -19,22 +20,22 @@ import {Router, RouteParams} from '@angular/router-deprecated';
 export class CrisisListComponent implements OnInit {
   crises: Crisis[];
 
-  private _selectedId: number;
+  private selectedId: number;
 
   constructor(
-    private _service: CrisisService,
+    private service: CrisisService,
-    private _router: Router,
+    private router: Router,
     routeParams: RouteParams) {
-      this._selectedId = +routeParams.get('id');
+      this.selectedId = +routeParams.get('id');
   }
 
-  isSelected(crisis: Crisis) { return crisis.id === this._selectedId; }
+  isSelected(crisis: Crisis) { return crisis.id === this.selectedId; }
 
   ngOnInit() {
-    this._service.getCrises().then(crises => this.crises = crises);
+    this.service.getCrises().then(crises => this.crises = crises);
   }
 
   onSelect(crisis: Crisis) {
-    this._router.navigate( ['CrisisDetail', { id: crisis.id }]  );
+    this.router.navigate( ['CrisisDetail', { id: crisis.id }]  );
   }
 }

public/docs/_examples/router-deprecated/ts/app/heroes/hero-detail.component.1.ts

@@ -1,8 +1,9 @@
 // #docregion
 import { Component,  OnInit }  from '@angular/core';
-import {Hero, HeroService}   from './hero.service';
 import { RouteParams, Router } from '@angular/router-deprecated';
 
+import { Hero, HeroService }   from './hero.service';
+
 @Component({
   template: `
   <h2>HEROES</h2>
@@ -25,22 +26,22 @@ export class HeroDetailComponent implements OnInit  {
 
   // #docregion ctor
   constructor(
-    private _router:Router,
+    private router:Router,
-    private _routeParams:RouteParams,
+    private routeParams:RouteParams,
-    private _service:HeroService){}
+    private service:HeroService){}
   // #enddocregion ctor
 
   // #docregion ngOnInit
   ngOnInit() {
-    let id = this._routeParams.get('id');
+    let id = this.routeParams.get('id');
-    this._service.getHero(id).then(hero => this.hero = hero);
+    this.service.getHero(id).then(hero => this.hero = hero);
   }
   // #enddocregion ngOnInit
 
   // #docregion gotoHeroes
   gotoHeroes() {
     // Like <a [routerLink]="['Heroes']">Heroes</a>
-    this._router.navigate(['Heroes']);
+    this.router.navigate(['Heroes']);
   }
   // #enddocregion gotoHeroes
 }

public/docs/_examples/router-deprecated/ts/app/heroes/hero-detail.component.ts

@@ -1,8 +1,9 @@
 // #docregion
 import { Component,  OnInit }  from '@angular/core';
-import {Hero, HeroService}   from './hero.service';
 import { RouteParams, Router } from '@angular/router-deprecated';
 
+import { Hero, HeroService }   from './hero.service';
+
 @Component({
   template: `
   <h2>HEROES</h2>
@@ -25,15 +26,15 @@ export class HeroDetailComponent implements OnInit  {
 
   // #docregion ctor
   constructor(
-    private _router:Router,
+    private router:Router,
-    private _routeParams:RouteParams,
+    private routeParams:RouteParams,
-    private _service:HeroService){}
+    private service:HeroService){}
   // #enddocregion ctor
 
   // #docregion ngOnInit
   ngOnInit() {
-    let id = this._routeParams.get('id');
+    let id = this.routeParams.get('id');
-    this._service.getHero(id).then(hero => this.hero = hero);
+    this.service.getHero(id).then(hero => this.hero = hero);
   }
   // #enddocregion ngOnInit
 
@@ -44,7 +45,7 @@ export class HeroDetailComponent implements OnInit  {
     // so that the HeroList component can select that hero.
     // Add a totally useless `foo` parameter for kicks.
     // #docregion gotoHeroes-navigate
-    this._router.navigate(['Heroes',  {id: heroId, foo: 'foo'} ]);
+    this.router.navigate(['Heroes',  {id: heroId, foo: 'foo'} ]);
     // #enddocregion gotoHeroes-navigate
   }
   // #enddocregion gotoHeroes

public/docs/_examples/router-deprecated/ts/app/heroes/hero-list.component.1.ts

@@ -3,9 +3,10 @@
 // #docregion
 // TODO SOMEDAY: Feature Componetized like HeroCenter
 import { Component, OnInit }   from '@angular/core';
-import {Hero, HeroService}   from './hero.service';
 import { Router }              from '@angular/router-deprecated';
 
+import { Hero, HeroService }   from './hero.service';
+
 @Component({
   // #docregion template
   template: `
@@ -24,18 +25,18 @@ export class HeroListComponent implements OnInit {
 
   // #docregion ctor
   constructor(
-    private _router: Router,
+    private router: Router,
-    private _service: HeroService) { }
+    private service: HeroService) { }
   // #enddocregion ctor
 
   ngOnInit() {
-    this._service.getHeroes().then(heroes => this.heroes = heroes)
+    this.service.getHeroes().then(heroes => this.heroes = heroes)
   }
 
   // #docregion select
   onSelect(hero: Hero) {
     // #docregion nav-to-detail
-    this._router.navigate( ['HeroDetail', { id: hero.id }] );
+    this.router.navigate( ['HeroDetail', { id: hero.id }] );
     // #enddocregion nav-to-detail
   }
   // #enddocregion select

public/docs/_examples/router-deprecated/ts/app/heroes/hero-list.component.ts

@@ -3,11 +3,12 @@
 // TODO SOMEDAY: Feature Componetized like CrisisCenter
 // #docregion
 import { Component, OnInit }   from '@angular/core';
-import {Hero, HeroService}   from './hero.service';
 // #docregion import-route-params
-import {Router, RouteParams} from '@angular/router-deprecated';
+import { RouteParams, Router } from '@angular/router-deprecated';
 // #enddocregion import-route-params
 
+import { Hero, HeroService }   from './hero.service';
+
 @Component({
   // #docregion template
   template: `
@@ -26,28 +27,30 @@ export class HeroListComponent implements OnInit {
   heroes: Hero[];
 
   // #docregion ctor
-  private _selectedId: number;
+  private selectedId: number;
 
   constructor(
-    private _service: HeroService,
+    private service: HeroService,
-    private _router: Router,
+    private router: Router,
     routeParams: RouteParams) {
-      this._selectedId = +routeParams.get('id');
+      this.selectedId = +routeParams.get('id');
   }
   // #enddocregion ctor
 
   // #docregion isSelected
-  isSelected(hero: Hero) { return hero.id === this._selectedId; }
+  isSelected(hero: Hero) { return hero.id === this.selectedId; }
   // #enddocregion isSelected
 
   // #docregion select
   onSelect(hero: Hero) {
-    this._router.navigate( ['HeroDetail', { id: hero.id }] );
+    this.router.navigate( ['HeroDetail', { id: hero.id }] );
   }
   // #enddocregion select
 
   ngOnInit() {
-    this._service.getHeroes().then(heroes => this.heroes = heroes)
+
+
+  this.service.getHeroes().then(heroes => this.heroes = heroes)
   }
 }
 // #enddocregion

public/docs/_examples/router-deprecated/ts/app/main.1.ts

@@ -2,10 +2,11 @@
 // #docplaster
 
 // #docregion all
-import {AppComponent}     from './app.component';
 import { bootstrap }        from '@angular/platform-browser-dynamic';
 import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
 
+import { AppComponent }     from './app.component';
+
 // #enddocregion all
 
 /* Can't use AppComponent ... but display as if we can

public/docs/_examples/router-deprecated/ts/app/main.2.ts

@@ -6,12 +6,13 @@
 // #docregion
 import { bootstrap }         from '@angular/platform-browser-dynamic';
 import { ROUTER_PROVIDERS }  from '@angular/router-deprecated';
-import {AppComponent}      from './app.component';
 
 // Add these symbols to override the `LocationStrategy`
 import { provide }           from '@angular/core';
 import { LocationStrategy,
         HashLocationStrategy } from '@angular/common';
+
+import { AppComponent }      from './app.component';
 // #enddocregion
 /* Can't use AppComponent ... but display as if we can
 // #docregion

public/docs/_examples/router-deprecated/ts/plnkr.json

@@ -0,0 +1,12 @@
+{
+  "description": "Router deprecated",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2,3].*",
+    "!app/crisis-list.component.ts",
+    "!app/hero-list.component.ts",
+    "!app/crisis-center/add-crisis.component.ts"
+  ],
+  "tags": ["router"]
+}

public/docs/ts/latest/guide/router-deprecated.jade

@@ -10,7 +10,7 @@ include ../_util-fns
   as users perform application tasks.
   
   We cover the router's primary features in this chapter, illustrating them through the evolution
-  of a small application that we can [run live](/resources/live-examples/router/ts/plnkr.html).
+  of a small application that we can [run live](/resources/live-examples/router-deprecated/ts/plnkr.html).
 .l-sub-section
   img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
   :marked
@@ -207,7 +207,7 @@ table
     We discuss code and design decisions pertinent to routing and application design.
     We gloss over everything in between.
     
-    The full source is available in the [live example](/resources/live-examples/router/ts/plnkr.html).
+    The full source is available in the [live example](/resources/live-examples/router-deprecated/ts/plnkr.html).
 :marked
   Our client is the Hero Employment Agency.
   Heroes need work and The Agency finds Crises for them to solve.
@@ -216,7 +216,7 @@ table
   1. A *Crisis Center* where we maintain the list of crises for assignment to heroes.
   1. A *Heroes* area where we maintain the list of heroes employed by The Agency.
 
-  Run the [live example](/resources/live-examples/router/ts/plnkr.html).
+  Run the [live example](/resources/live-examples/router-deprecated/ts/plnkr.html).
   It opens in the *Crisis Center*.  We'll come back to that.
 
   Click the *Heroes* link. We're presented with a list of Heroes.
@@ -407,7 +407,7 @@ figure.image-display
   We're supplying two definitions:
 +makeExample('router-deprecated/ts/app/app.component.1.ts','route-defs')(format=".")
 :marked
-  Each definition translates to a [Route](../api/router/Route-class.html) which has a
+  Each definition translates to a [Route](../api/router-deprecated/index/Route-class.html) which has a
   * `path` - the URL path segment for this route
   * `name` - the name of the route
   * `component` - the component associated with this route.
@@ -459,11 +459,11 @@ figure.image-display
 :marked
   Here are the files discussed in this milestone
 +makeTabs(
-  `router/ts/app/app.component.1.ts,
+  `router-deprecated/ts/app/app.component.1.ts,
-  router/ts/app/main.1.ts,
+  router-deprecated/ts/app/main.1.ts,
-  router/ts/app/hero-list.component.ts,
+  router-deprecated/ts/app/hero-list.component.ts,
-  router/ts/app/crisis-list.component.ts,
+  router-deprecated/ts/app/crisis-list.component.ts,
-  router/ts/index.html`,
+  router-deprecated/ts/index.html`,
   ',all,,',
   `app.component.ts, 
   main.ts,
@@ -687,10 +687,10 @@ code-example(format="." language="bash").
   ### The Heroes App code
   Here are the relevant files for this version of the sample application.
 +makeTabs(
-  `router/ts/app/app.component.2.ts,
+  `router-deprecated/ts/app/app.component.2.ts,
-   router/ts/app/heroes/hero-list.component.1.ts,
+   router-deprecated/ts/app/heroes/hero-list.component.1.ts,
-   router/ts/app/heroes/hero-detail.component.1.ts,
+   router-deprecated/ts/app/heroes/hero-detail.component.1.ts,
-   router/ts/app/heroes/hero.service.ts`,
+   router-deprecated/ts/app/heroes/hero.service.ts`,
    null,
   `app.component.ts,
   hero-list.component.ts,
@@ -896,8 +896,8 @@ code-example(format="").
   interfaces when it creates and destroys components.
 
   The router also has hooks for *its* lifecycle such as
-  [CanActivate](../api/router/CanActivate-decorator.html), [OnActivate](../api/router/OnActivate-interface.html), and
+  [CanActivate](../api/router-deprecated/index/CanActivate-decorator.html), [OnActivate](../api/router-deprecated/index/OnActivate-interface.html), and
-  [CanDeactivate](../api/router/CanDeactivate-interface.html).
+  [CanDeactivate](../api/router-deprecated/index/CanDeactivate-interface.html).
   These three hooks can change the way the router navigates *to* a component or *away* from a component.
   
   The router lifecycle hooks *supplement* the component lifecycle hooks.
@@ -999,10 +999,10 @@ code-example(format="").
   The relevant *Crisis Center* code for this milestone is
   
 +makeTabs(
-   `router/ts/app/crisis-center/crisis-center.component.ts,
+   `router-deprecated/ts/app/crisis-center/crisis-center.component.ts,
-   router/ts/app/crisis-center/crisis-list.component.1.ts,
+   router-deprecated/ts/app/crisis-center/crisis-list.component.1.ts,
-   router/ts/app/crisis-center/crisis-detail.component.1.ts,
+   router-deprecated/ts/app/crisis-center/crisis-detail.component.1.ts,
-   router/ts/app/crisis-center/crisis.service.ts
+   router-deprecated/ts/app/crisis-center/crisis.service.ts
   `,
   null,
    `crisis-center.component.ts,
@@ -1110,7 +1110,7 @@ code-example(format="." language="bash").
 
 .l-sub-section
   :marked
-    The [live example](/resources/live-examples/router/ts/plnkr.html) *does* highlight the selected
+    The [live example](/resources/live-examples/router-deprecated/ts/plnkr.html) *does* highlight the selected
     row because it demonstrates the final state of the application which includes the steps we're *about* to cover.
     At the moment we're describing the state of affairs *prior* to those steps.
 :marked
@@ -1127,7 +1127,7 @@ code-example(format="." language="bash").
   First we extend the router import statement to include the `RouteParams` service symbol;
 +makeExample('router-deprecated/ts/app/heroes/hero-list.component.ts','import-route-params', 'hero-list.component.ts (import)')(format=".")
 :marked
-  Then we extend the constructor to inject the `RouteParams` service and extract the `id` parameter as the `_selectedId`:
+  Then we extend the constructor to inject the `RouteParams` service and extract the `id` parameter as the `selectedId`:
 +makeExample('router-deprecated/ts/app/heroes/hero-list.component.ts','ctor', 'hero-list.component.ts (constructor)')(format=".")
 .l-sub-section
   :marked
@@ -1157,10 +1157,10 @@ figure.image-display
   Confirm the similarities in these *Hero* and *CrisisCenter* components,
   arranged side-by-side for easy comparison:
 +makeTabs(
-    `router/ts/app/heroes/hero-list.component.ts,
+    `router-deprecated/ts/app/heroes/hero-list.component.ts,
-    router/ts/app/crisis-center/crisis-list.component.ts,
+    router-deprecated/ts/app/crisis-center/crisis-list.component.ts,
-    router/ts/app/heroes/hero-detail.component.ts,
+    router-deprecated/ts/app/heroes/hero-detail.component.ts,
-    router/ts/app/crisis-center/crisis-detail.component.ts
+    router-deprecated/ts/app/crisis-center/crisis-detail.component.ts
     `,
     null,
     `hero-list.component.ts,
@@ -1202,7 +1202,7 @@ code-example(format="." language="bash").
   As we end our chapter, we take a parting look at
   the entire application.
 
-  We can always try the [live example](/resources/live-examples/router/ts/plnkr.html) and download the source code from there.
+  We can always try the [live example](/resources/live-examples/router-deprecated/ts/plnkr.html) and download the source code from there.
 
   Our final project folder structure looks like this:
 .filetree
@@ -1225,10 +1225,10 @@ code-example(format="." language="bash").
 :marked
   The pertinent top level application files are
 +makeTabs(
-  `router/ts/app/app.component.ts,
+  `router-deprecated/ts/app/app.component.ts,
-   router/ts/app/main.ts,
+   router-deprecated/ts/app/main.ts,
-   router/ts/app/dialog.service.ts,
+   router-deprecated/ts/app/dialog.service.ts,
-   router/ts/index.html
+   router-deprecated/ts/index.html
   `,
   null,
   `app.component.ts,
@@ -1251,10 +1251,10 @@ code-example(format="." language="bash").
       .file crisis.service.ts
 :marked
 +makeTabs(
-   `router/ts/app/crisis-center/crisis-center.component.ts,
+   `router-deprecated/ts/app/crisis-center/crisis-center.component.ts,
-   router/ts/app/crisis-center/crisis-list.component.ts,
+   router-deprecated/ts/app/crisis-center/crisis-list.component.ts,
-   router/ts/app/crisis-center/crisis-detail.component.ts,
+   router-deprecated/ts/app/crisis-center/crisis-detail.component.ts,
-   router/ts/app/crisis-center/crisis.service.ts
+   router-deprecated/ts/app/crisis-center/crisis.service.ts
   `,
   null,
    `crisis-center.component.ts,
@@ -1275,9 +1275,9 @@ code-example(format="." language="bash").
       .file hero.service.ts
 :marked
 +makeTabs(
-   `router/ts/app/heroes/hero-list.component.ts,
+   `router-deprecated/ts/app/heroes/hero-list.component.ts,
-   router/ts/app/heroes/hero-detail.component.ts,
+   router-deprecated/ts/app/heroes/hero-detail.component.ts,
-   router/ts/app/heroes/hero.service.ts
+   router-deprecated/ts/app/heroes/hero.service.ts
   `,
   null,
    `hero-list.component.ts,