docs(router): Updated docs to reflect alpha 7 release

public/docs/_examples/package.json

@@ -31,7 +31,7 @@
     "@angular/http": "2.0.0-rc.2",
     "@angular/platform-browser": "2.0.0-rc.2",
     "@angular/platform-browser-dynamic": "2.0.0-rc.2",
-    "@angular/router": "2.0.0-rc.2",
+    "@angular/router": "3.0.0-alpha.7",
     "@angular/router-deprecated": "2.0.0-rc.2",
     "@angular/upgrade": "2.0.0-rc.2",
     "angular2-in-memory-web-api": "0.0.12",

public/docs/_examples/router/e2e-spec.ts

@@ -24,14 +24,18 @@ describe('Router', function () {
       heroDetail: element(by.css('my-app > undefined > div')),
       heroDetailTitle: element(by.css('my-app > undefined > div > h3')),
 
+      adminHref: hrefEles.get(2),
+      loginHref: hrefEles.get(3)
     };
   }
 
   it('should be able to see the start screen', function () {
     let page = getPageStruct();
-    expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices');
+    expect(page.hrefs.count()).toEqual(4, 'should be two dashboard choices');
     expect(page.crisisHref.getText()).toEqual('Crisis Center');
     expect(page.heroesHref.getText()).toEqual('Heroes');
+    expect(page.adminHref.getText()).toEqual('Crisis Admin');
+    expect(page.loginHref.getText()).toEqual('Login');
   });
 
   it('should be able to see crises center items', function () {

public/docs/_examples/router/ts/app/app.component.2.ts

@@ -3,7 +3,7 @@
 
 // #docregion
 import { Component }                 from '@angular/core';
-import { Router, ROUTER_DIRECTIVES } from '@angular/router';
+import { ROUTER_DIRECTIVES } from '@angular/router';
 
 // #enddocregion
 /*

public/docs/_examples/router/ts/app/app.routes.1.ts

@@ -16,11 +16,11 @@ import { HeroDetailComponent } from './heroes/hero-detail.component';
 // #docregion route-config
 export const routes: RouterConfig = [
   // #docregion route-defs
-  { path: '/crisis-center', component: CrisisCenterComponent },
+  { path: 'crisis-center', component: CrisisCenterComponent },
-  { path: '/heroes', component: HeroListComponent },
+  { path: 'heroes', component: HeroListComponent },
   // #enddocregion route-defs
   // #docregion hero-detail-route
-  { path: '/hero/:id', component: HeroDetailComponent }
+  { path: 'hero/:id', component: HeroDetailComponent }
   // #enddocregion hero-detail-route
 ];
 

public/docs/_examples/router/ts/app/app.routes.2.ts

@@ -9,8 +9,8 @@ import { HeroListComponent }    from './hero-list.component';
 
 // #docregion route-config
 export const routes: RouterConfig = [
-  { path: '/crisis-center', component: CrisisListComponent },
+  { path: 'crisis-center', component: CrisisListComponent },
-  { path: '/heroes', component: HeroListComponent }
+  { path: 'heroes', component: HeroListComponent }
 ];
 
 export const APP_ROUTER_PROVIDERS = [

public/docs/_examples/router/ts/app/app.routes.3.ts

@@ -7,7 +7,7 @@ import { HeroesRoutes }        from './heroes/heroes.routes';
 
 export const routes = [
   ...HeroesRoutes,
-  { path: '/crisis-center', component: CrisisListComponent }
+  { path: 'crisis-center', component: CrisisListComponent }
 ];
 
 export const APP_ROUTER_PROVIDERS = [

public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.1.ts

@@ -7,11 +7,11 @@ import { CrisisCenterComponent } from './crisis-center.component';
 // #docregion routes
 export const CrisisCenterRoutes: RouterConfig = [
   {
-    path: '/crisis-center',
+    path: 'crisis-center',
     component: CrisisCenterComponent,
     children: [
-      { path: '/',    component: CrisisListComponent },
+      { path: ':id',  component: CrisisDetailComponent },
-      { path: '/:id', component: CrisisDetailComponent }
+      { path: '',     component: CrisisListComponent }
     ]
   }
 ];

public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.2.ts

@@ -6,17 +6,20 @@ import { CrisisCenterComponent } from './crisis-center.component';
 
 // #docregion routes
 export const CrisisCenterRoutes: RouterConfig = [
+  // #docregion redirect
   {
-    path: '/crisis-center',
+    path: '',
+    redirectTo: '/crisis-center',
+    terminal: true
+  },
+  // #enddocregion redirect
+  {
+    path: 'crisis-center',
     component: CrisisCenterComponent,
-    index: true,
     children: [
-      { path: '/:id',  component: CrisisDetailComponent },
+      { path: ':id',  component: CrisisDetailComponent },
-      { path: '/',     component: CrisisListComponent,
+      { path: '',     component: CrisisListComponent }
-        index: true
-      }
     ]
   }
 ];
 // #enddocregion routes
-

public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.3.ts

@@ -10,25 +10,28 @@ import { CanDeactivateGuard }    from '../interfaces';
 
 export const CrisisCenterRoutes: RouterConfig = [
   {
-    path: '/crisis-center',
+    path: '',
+    redirectTo: '/crisis-center',
+    terminal: true
+  },
+  {
+    path: 'crisis-center',
     component: CrisisCenterComponent,
-    index: true,
     children: [
       // #docregion admin-route-no-guard
       {
-        path: '/admin',
+        path: 'admin',
         component: CrisisAdminComponent
       },
       // #enddocregion admin-route-no-guard
       {
-        path: '/:id',
+        path: ':id',
         component: CrisisDetailComponent,
         canDeactivate: [CanDeactivateGuard]
       },
       {
-        path: '/',
+        path: '',
-        component: CrisisListComponent,
+        component: CrisisListComponent
-        index: true
       }
     ]
   }
@@ -40,7 +43,7 @@ export const CrisisCenterRoutes: RouterConfig = [
 import { AuthGuard }             from '../auth.guard';
 
 {
-  path: '/admin',
+  path: 'admin',
   component: CrisisAdminComponent,
   canActivate: [AuthGuard]
 }

public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.4.ts

@@ -11,25 +11,28 @@ import { AuthGuard }             from '../auth.guard';
 
 export const CrisisCenterRoutes: RouterConfig = [
   {
-    path: '/crisis-center',
+    path: '',
+    redirectTo: '/crisis-center',
+    terminal: true
+  },
+  {
+    path: 'crisis-center',
     component: CrisisCenterComponent,
-    index: true,
     children: [
       {
-        path: '/admin',
+        path: 'admin',
         component: CrisisAdminComponent,
         canActivate: [AuthGuard]
       },
       {
-        path: '/:id',
+        path: ':id',
         component: CrisisDetailComponent,
         canDeactivate: [CanDeactivateGuard]
       },
       // #docregion default-route
       {
-        path: '/',
+        path: '',
-        component: CrisisListComponent,
+        component: CrisisListComponent
-        index: true
       }
       // #enddocregion default-route
     ]
@@ -42,7 +45,7 @@ export const CrisisCenterRoutes: RouterConfig = [
 import { AuthGuard }             from '../auth.guard';
 
 {
-  path: '/admin',
+  path: 'admin',
   component: CrisisAdminComponent,
   canActivate: [AuthGuard]
 }

public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.ts

@@ -10,25 +10,29 @@ import { AuthGuard }             from '../auth.guard';
 
 export const CrisisCenterRoutes: RouterConfig = [
   {
-    path: '/crisis-center',
+    path: '',
+    redirectTo: '/crisis-center',
+    terminal: true
+  },
+  {
+    path: 'crisis-center',
     component: CrisisCenterComponent,
-    index: true,
     children: [
       // #docregion admin-route
       {
-        path: '/admin',
+        path: 'admin',
         component: CrisisAdminComponent,
         canActivate: [AuthGuard]
       },
       // #enddocregion admin-route
       {
-        path: '/:id',
+        path: ':id',
         component: CrisisDetailComponent,
         canDeactivate: [CanDeactivateGuard]
       },
-      { path: '/',
+      {
-        component: CrisisListComponent,
+        path: '',
-        index: true
+        component: CrisisListComponent
       }
     ]
   }

public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts

@@ -14,7 +14,7 @@ const CRISES = [
 let crisesPromise = Promise.resolve(CRISES);
 
 // #docregion
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
 @Injectable()
 export class CrisisService {

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

@@ -56,7 +56,7 @@ export class HeroDetailComponent implements OnInit, OnDestroy  {
     let heroId = this.hero ? this.hero.id : null;
     // Pass along the hero id if available
     // so that the HeroList component can select that hero.
-    this.router.navigate(['/heroes'], { queryParams: { id: `${heroId}`, foo: 'foo' } });
+    this.router.navigate(['/heroes'], { queryParams: { id: heroId, foo: 'foo' } });
   }
   // #enddocregion gotoHeroes-navigate
 }

public/docs/_examples/router/ts/app/heroes/heroes.routes.ts

@@ -4,9 +4,9 @@ import { HeroListComponent }     from './hero-list.component';
 import { HeroDetailComponent }   from './hero-detail.component';
 
 export const HeroesRoutes: RouterConfig = [
-  { path: '/heroes',  component: HeroListComponent },
+  { path: 'heroes',  component: HeroListComponent },
 // #docregion hero-detail-route
-  { path: '/hero/:id', component: HeroDetailComponent }
+  { path: 'hero/:id', component: HeroDetailComponent }
 // #enddocregion hero-detail-route
 ];
 // #enddocregion

public/docs/_examples/router/ts/app/login.component.ts

@@ -4,7 +4,6 @@ import { Router }      from '@angular/router';
 import { AuthService } from './auth.service';
 
 @Component({
-  selector: 'login',
   template: `
     <h2>LOGIN</h2>
     <p>{{message}}</p>
@@ -25,7 +24,7 @@ export class LoginComponent {
   }
 
   login() {
-    this.message = "Trying to log in ...";
+    this.message = 'Trying to log in ...';
 
     this.authService.login().subscribe(() => {
       this.setMessage();

public/docs/_examples/router/ts/app/login.routes.ts

@@ -4,7 +4,7 @@ import { AuthService }        from './auth.service';
 import { LoginComponent }     from './login.component';
 
 export const LoginRoutes = [
-  { path: '/login', component: LoginComponent }
+  { path: 'login', component: LoginComponent }
 ];
 
 export const AUTH_PROVIDERS = [AuthGuard, AuthService];

public/docs/_examples/systemjs.config.plunker.js

@@ -6,7 +6,7 @@
 (function(global) {
 
   var ngVer = '@2.0.0-rc.2'; // lock in the angular package version; do not let it float to current!
-  var routerVer = '@3.0.0-alpha.3'; // lock router version
+  var routerVer = '@3.0.0-alpha.7'; // lock router version
 
   //map tells the System loader where to look for things
   var  map = {

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

@@ -47,7 +47,7 @@ include ../_util-fns
   * navigating under [program control](#navigate)
   * embedding critical information in the URL with [route parameters](#route-parameters)
   * add [child routes](#child-routing-component) under a feature section
-  * setting an [index route](#index) as the default
+  * [redirecting](#redirect) from one route to another
   * confirming or canceling navigation with [guards](#guards)
     * [CanActivate](#can-activate-guard) to prevent navigation to a route
     * [CanDeactivate](#can-deactivate-deactivate) to prevent navigation away from the current route
@@ -100,6 +100,9 @@ include ../_util-fns
     The `RouterConfig` is an array of *routes* that describe how to navigate.
     Each *Route* maps a URL `path` to a component.
 
+    There are no **leading slashes** in our **path**. The router parses and builds the URL for us,
+    allowing us to use relative and absolute paths when navigating between application views.
+
     The `:id` in the third route is a token for a route parameter. In a URL such as `/hero/42`, "42"
     is the value of the `id` parameter. The corresponding `HeroDetailComponent`
     will use that value to find and present the hero whose `id` is 42.
@@ -398,7 +401,7 @@ h4#register-providers Register routing in bootstrap
   and pass it as the second parameter of the `bootstrap` function.
 +makeExample('router/ts/app/main.1.ts','all', 'main.ts')(format=".")
 :marked
-  Providing the router providers at the root makes the Router available everywhere in our application.
+  Providing the router providers at bootstrap makes the Router available everywhere in our application.
 .alert.is-important
   :marked
     We must register router providers in `bootstrap`.
@@ -962,8 +965,8 @@ h3#merge-crisis-routes Merge crisis routes into the application routes
 :marked
   We used the spread operator again (...) to insert the crisis routes array.
 
-a#index
+a#redirect
-h3#default-route Setting default routes
+h3#redirect Redirecting routes
 :marked
   When the application launches, the initial URL in the browser bar is something like:
 code-example(format="").
@@ -973,15 +976,24 @@ code-example(format="").
   The user must click one of the navigation links to trigger a navigation and display something.
 
   We want the application to display the list of crises as it would if we pasted `localhost:3000/crisis-center/` into the address bar.
-  This is our *default* route.
+  This is our intended default route.
 
   We can arrange for that behavior in several ways.
-  One way is to add `index: true` to each route on the path to the default component.
+  One way is to use a `redirect` to transparently navigate from one route to another.
 
-  In our example, we'll add `index: true` to two routes:
+  In our example, we'll add a route to match our initial URL and redirect to our `crisis-center` route:
-  1. The parent route for the `CrisisCenterComponent`
++makeExample('router/ts/app/crisis-center/crisis-center.routes.2.ts', 'redirect', 'app/crisis-center/crisis-center.routes.ts (redirect route)' )(format='.')
-  1. The child route for the `CrisisListComponent`
 
+:marked
+  Since we only want to redirect when our path specifically matches `''`, we've added an extra configuration
+  to our route using `terminal: true`. Mainly for redirects, the `terminal` property gives us more control over
+  when the router should continue matching our URL against our defined routes.
+
+.l-sub-section
+  :marked
+    We'll discuss redirects further in a future update to this chapter.
+
+:marked
   The updated route definitions look like this:
 +makeExample('router/ts/app/crisis-center/crisis-center.routes.2.ts', 'routes', 'app/crisis-center/crisis-center.routes.ts (Routes v.2)' )(format='.')