From f3189546a6a44cd0be77758269ff9df2173c640f Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Sun, 19 Jun 2016 00:20:38 -0400 Subject: [PATCH] docs(toh-5): Upgraded tutorial to new router --- public/docs/_examples/styles.css | 26 +- .../_examples/toh-5/ts/app/app.component.1.ts | 3 +- .../_examples/toh-5/ts/app/app.component.2.ts | 15 +- .../_examples/toh-5/ts/app/app.component.3.ts | 33 ++ .../_examples/toh-5/ts/app/app.component.css | 2 +- .../_examples/toh-5/ts/app/app.component.ts | 34 +- .../_examples/toh-5/ts/app/app.routes.1.ts | 37 ++ .../_examples/toh-5/ts/app/app.routes.2.ts | 14 + .../docs/_examples/toh-5/ts/app/app.routes.ts | 32 ++ .../toh-5/ts/app/dashboard.component.ts | 4 +- .../toh-5/ts/app/hero-detail.component.ts | 27 +- .../toh-5/ts/app/heroes.component.ts | 4 +- public/docs/_examples/toh-5/ts/app/main.ts | 6 +- public/docs/_examples/toh-5/ts/plnkr.json | 2 +- public/docs/ts/latest/tutorial/toh-pt5.jade | 392 +++++++++--------- 15 files changed, 364 insertions(+), 267 deletions(-) create mode 100644 public/docs/_examples/toh-5/ts/app/app.component.3.ts create mode 100644 public/docs/_examples/toh-5/ts/app/app.routes.1.ts create mode 100644 public/docs/_examples/toh-5/ts/app/app.routes.2.ts create mode 100644 public/docs/_examples/toh-5/ts/app/app.routes.ts diff --git a/public/docs/_examples/styles.css b/public/docs/_examples/styles.css index 054b417f6f..62ddfa5121 100644 --- a/public/docs/_examples/styles.css +++ b/public/docs/_examples/styles.css @@ -1,20 +1,20 @@ /* Master Styles */ h1 { - color: #369; - font-family: Arial, Helvetica, sans-serif; + color: #369; + font-family: Arial, Helvetica, sans-serif; font-size: 250%; } -h2, h3 { +h2, h3 { color: #444; - font-family: Arial, Helvetica, sans-serif; + font-family: Arial, Helvetica, sans-serif; font-weight: lighter; } -body { - margin: 2em; +body { + margin: 2em; } -body, input[text], button { - color: #888; - font-family: Cambria, Georgia; +body, input[text], button { + color: #888; + font-family: Cambria, Georgia; } a { cursor: pointer; @@ -34,7 +34,7 @@ button:hover { } button:disabled { background-color: #eee; - color: #aaa; + color: #aaa; cursor: auto; } @@ -54,7 +54,7 @@ nav a:hover { color: #039be5; background-color: #CFD8DC; } -nav a.router-link-active { +nav a.active { color: #039be5; } @@ -137,6 +137,6 @@ nav a.router-link-active { } /* everywhere else */ -* { - font-family: Arial, Helvetica, sans-serif; +* { + font-family: Arial, Helvetica, sans-serif; } diff --git a/public/docs/_examples/toh-5/ts/app/app.component.1.ts b/public/docs/_examples/toh-5/ts/app/app.component.1.ts index 07a2317293..2f0e3506dd 100644 --- a/public/docs/_examples/toh-5/ts/app/app.component.1.ts +++ b/public/docs/_examples/toh-5/ts/app/app.component.1.ts @@ -8,7 +8,7 @@ import { HeroesComponent } from './heroes.component'; // #enddocregion // For testing only -import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated'; +import { ROUTER_DIRECTIVES } from '@angular/router'; // #docregion @Component({ @@ -20,7 +20,6 @@ import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/route directives: [HeroesComponent], providers: [ // #enddocregion - ROUTER_PROVIDERS, // #docregion HeroService ] diff --git a/public/docs/_examples/toh-5/ts/app/app.component.2.ts b/public/docs/_examples/toh-5/ts/app/app.component.2.ts index 6b690a6c63..c2699f317b 100644 --- a/public/docs/_examples/toh-5/ts/app/app.component.2.ts +++ b/public/docs/_examples/toh-5/ts/app/app.component.2.ts @@ -2,38 +2,27 @@ // #docregion import { Component } from '@angular/core'; // #docregion import-router -import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated'; +import { ROUTER_DIRECTIVES } from '@angular/router'; // #enddocregion import-router import { HeroService } from './hero.service'; -import { HeroesComponent } from './heroes.component'; @Component({ selector: 'my-app', // #docregion template template: `

{{title}}

- Heroes + Heroes `, // #enddocregion template // #docregion directives-and-providers directives: [ROUTER_DIRECTIVES], providers: [ - ROUTER_PROVIDERS, HeroService ] // #enddocregion directives-and-providers }) -// #docregion route-config -@RouteConfig([ - { - path: '/heroes', - name: 'Heroes', - component: HeroesComponent - } -]) -// #enddocregion route-config export class AppComponent { title = 'Tour of Heroes'; } diff --git a/public/docs/_examples/toh-5/ts/app/app.component.3.ts b/public/docs/_examples/toh-5/ts/app/app.component.3.ts new file mode 100644 index 0000000000..ff64e27ab1 --- /dev/null +++ b/public/docs/_examples/toh-5/ts/app/app.component.3.ts @@ -0,0 +1,33 @@ +// #docplaster +// #docregion +import { Component } from '@angular/core'; +import { ROUTER_DIRECTIVES } from '@angular/router'; + +import { HeroService } from './hero.service'; + +@Component({ + selector: 'my-app', + // #docregion template + template: ` +

{{title}}

+ + + `, + // #enddocregion template + // #docregion style-urls + styleUrls: ['app/app.component.css'], + // #enddocregion style-urls + directives: [ROUTER_DIRECTIVES], + providers: [ + HeroService + ] +}) +export class AppComponent { + title = 'Tour of Heroes'; +} +// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/app/app.component.css b/public/docs/_examples/toh-5/ts/app/app.component.css index f4e8082ea1..071e665767 100644 --- a/public/docs/_examples/toh-5/ts/app/app.component.css +++ b/public/docs/_examples/toh-5/ts/app/app.component.css @@ -24,6 +24,6 @@ nav a:hover { color: #039be5; background-color: #CFD8DC; } -nav a.router-link-active { +nav a.active { color: #039be5; } diff --git a/public/docs/_examples/toh-5/ts/app/app.component.ts b/public/docs/_examples/toh-5/ts/app/app.component.ts index 5589cd84e9..3f3e758dcf 100644 --- a/public/docs/_examples/toh-5/ts/app/app.component.ts +++ b/public/docs/_examples/toh-5/ts/app/app.component.ts @@ -1,13 +1,8 @@ // #docplaster // #docregion import { Component } from '@angular/core'; -import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated'; +import { ROUTER_DIRECTIVES } from '@angular/router'; -import { DashboardComponent } from './dashboard.component'; -import { HeroesComponent } from './heroes.component'; -// #docregion hero-detail-import -import { HeroDetailComponent } from './hero-detail.component'; -// #enddocregion hero-detail-import import { HeroService } from './hero.service'; @Component({ @@ -16,8 +11,8 @@ import { HeroService } from './hero.service'; template: `

{{title}}

`, @@ -27,32 +22,9 @@ import { HeroService } from './hero.service'; // #enddocregion style-urls directives: [ROUTER_DIRECTIVES], providers: [ - ROUTER_PROVIDERS, HeroService ] }) -@RouteConfig([ - // #docregion dashboard-route - { - path: '/dashboard', - name: 'Dashboard', - component: DashboardComponent, - useAsDefault: true - }, - // #enddocregion dashboard-route - // #docregion hero-detail-route - { - path: '/detail/:id', - name: 'HeroDetail', - component: HeroDetailComponent - }, - // #enddocregion hero-detail-route - { - path: '/heroes', - name: 'Heroes', - component: HeroesComponent - } -]) export class AppComponent { title = 'Tour of Heroes'; } diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.1.ts b/public/docs/_examples/toh-5/ts/app/app.routes.1.ts new file mode 100644 index 0000000000..17f2df4e98 --- /dev/null +++ b/public/docs/_examples/toh-5/ts/app/app.routes.1.ts @@ -0,0 +1,37 @@ +// #docregion +import { provideRouter, RouterConfig } from '@angular/router'; +import { DashboardComponent } from './dashboard.component'; +import { HeroesComponent } from './heroes.component'; +// #docregion hero-detail-import +import { HeroDetailComponent } from './hero-detail.component'; +// #enddocregion hero-detail-import + +export const routes: RouterConfig = [ + // #docregion redirect-route + { + path: '', + redirectTo: '/dashboard', + terminal: true + }, + // #enddocregion redirect-route + // #docregion dashboard-route + { + path: 'dashboard', + component: DashboardComponent + }, + // #enddocregion dashboard-route + // #docregion hero-detail-route + { + path: 'detail/:id', + component: HeroDetailComponent + }, + // #enddocregion hero-detail-route + { + path: 'heroes', + component: HeroesComponent + } +]; + +export const APP_ROUTER_PROVIDERS = [ + provideRouter(routes) +]; diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.2.ts b/public/docs/_examples/toh-5/ts/app/app.routes.2.ts new file mode 100644 index 0000000000..45ddeb9230 --- /dev/null +++ b/public/docs/_examples/toh-5/ts/app/app.routes.2.ts @@ -0,0 +1,14 @@ +// #docregion +import { provideRouter, RouterConfig } from '@angular/router'; +import { HeroesComponent } from './heroes.component'; + +const routes: RouterConfig = [ + { + path: '/heroes', + component: HeroesComponent + } +]; + +export const APP_ROUTER_PROVIDERS = [ + provideRouter(routes) +]; diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.ts b/public/docs/_examples/toh-5/ts/app/app.routes.ts new file mode 100644 index 0000000000..b4f1f1efa1 --- /dev/null +++ b/public/docs/_examples/toh-5/ts/app/app.routes.ts @@ -0,0 +1,32 @@ +// #docregion +import { provideRouter, RouterConfig } from '@angular/router'; + +import { DashboardComponent } from './dashboard.component'; +import { HeroesComponent } from './heroes.component'; +// #docregion hero-detail-import +import { HeroDetailComponent } from './hero-detail.component'; +// #enddocregion hero-detail-import + +export const routes: RouterConfig = [ + { + path: '', + redirectTo: '/dashboard', + terminal: true + }, + { + path: 'dashboard', + component: DashboardComponent + }, + { + path: 'detail/:id', + component: HeroDetailComponent + }, + { + path: 'heroes', + component: HeroesComponent + } +]; + +export const APP_ROUTER_PROVIDERS = [ + provideRouter(routes) +]; diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts index e58760caad..6dd4b1abc2 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts @@ -2,7 +2,7 @@ // #docregion import { Component, OnInit } from '@angular/core'; // #docregion import-router -import { Router } from '@angular/router-deprecated'; +import { Router } from '@angular/router'; // #enddocregion import-router import { Hero } from './hero'; @@ -36,7 +36,7 @@ export class DashboardComponent implements OnInit { // #docregion goto-detail gotoDetail(hero: Hero) { - let link = ['HeroDetail', { id: hero.id }]; + let link = ['/detail', hero.id]; this.router.navigate(link); } // #enddocregion goto-detail diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts index 96eb8aa93f..61edccb90e 100644 --- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts @@ -1,11 +1,11 @@ // #docplaster // #docregion // #docregion import-oninit, v2 -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; // #enddocregion import-oninit -// #docregion import-route-params -import { RouteParams } from '@angular/router-deprecated'; -// #enddocregion import-route-params +// #docregion import-activated-route +import { ActivatedRoute } from '@angular/router'; +// #enddocregion import-activated-route import { Hero } from './hero'; // #docregion import-hero-service @@ -23,27 +23,36 @@ import { HeroService } from './hero.service'; }) // #enddocregion extract-template // #docregion implement -export class HeroDetailComponent implements OnInit { +export class HeroDetailComponent implements OnInit, OnDestroy { // #enddocregion implement hero: Hero; + sub: any; // #docregion ctor constructor( private heroService: HeroService, - private routeParams: RouteParams) { + private route: ActivatedRoute) { } // #enddocregion ctor // #docregion ng-oninit ngOnInit() { // #docregion get-id - let id = +this.routeParams.get('id'); + this.sub = this.route.params.subscribe(params => { + let id = +params['id']; + this.heroService.getHero(id) + .then(hero => this.hero = hero); + }); // #enddocregion get-id - this.heroService.getHero(id) - .then(hero => this.hero = hero); } // #enddocregion ng-oninit + // #docregion ng-ondestroy + ngOnDestroy() { + this.sub.unsubscribe(); + } + // #enddocregion ng-ondestroy + // #docregion go-back goBack() { window.history.back(); diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.ts b/public/docs/_examples/toh-5/ts/app/heroes.component.ts index cd43e03b86..c0dbd9c8e7 100644 --- a/public/docs/_examples/toh-5/ts/app/heroes.component.ts +++ b/public/docs/_examples/toh-5/ts/app/heroes.component.ts @@ -1,7 +1,7 @@ // #docplaster // #docregion import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router-deprecated'; +import { Router } from '@angular/router'; import { Hero } from './hero'; import { HeroService } from './hero.service'; @@ -36,7 +36,7 @@ export class HeroesComponent implements OnInit { onSelect(hero: Hero) { this.selectedHero = hero; } gotoDetail() { - this.router.navigate(['HeroDetail', { id: this.selectedHero.id }]); + this.router.navigate(['/detail', this.selectedHero.id]); } // #docregion heroes-component-renaming } diff --git a/public/docs/_examples/toh-5/ts/app/main.ts b/public/docs/_examples/toh-5/ts/app/main.ts index ad256f0823..da35003df1 100644 --- a/public/docs/_examples/toh-5/ts/app/main.ts +++ b/public/docs/_examples/toh-5/ts/app/main.ts @@ -1,5 +1,9 @@ +// #docregion import { bootstrap } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; +import { APP_ROUTER_PROVIDERS } from './app.routes'; -bootstrap(AppComponent); +bootstrap(AppComponent, [ + APP_ROUTER_PROVIDERS +]); diff --git a/public/docs/_examples/toh-5/ts/plnkr.json b/public/docs/_examples/toh-5/ts/plnkr.json index 019630c28f..fbed287e3f 100644 --- a/public/docs/_examples/toh-5/ts/plnkr.json +++ b/public/docs/_examples/toh-5/ts/plnkr.json @@ -3,7 +3,7 @@ "files":[ "!**/*.d.ts", "!**/*.js", - "!**/*.[1,2].*" + "!**/*.[1,2,3].*" ], "tags": ["tutorial", "tour", "heroes", "router"] } diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index 9500cc490f..160672fb9a 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -2,12 +2,12 @@ include ../_util-fns :marked # Routing Around the App - We received new requirements for our Tour of Heroes application: + We received new requirements for our Tour of Heroes application: * Add a *Dashboard* view. * Navigate between the *Heroes* and *Dashboard* views. * Clicking on a hero in either view navigates to a detail view of the selected hero. - * Clicking a *deep link* in an email opens the detail view for a particular hero; - + * Clicking a *deep link* in an email opens the detail view for a particular hero; + When we’re done, users will be able to navigate the app like this: figure.image-display img(src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations") @@ -15,21 +15,21 @@ figure.image-display We'll add Angular’s *Component Router* to our app to satisfy these requirements. .l-sub-section :marked - The [Routing and Navigation](../guide/router-deprecated.html) chapter covers the router in more detail - than we will in this tutorial. + The [Routing and Navigation](../guide/router.html) chapter covers the router in more detail + than we will in this tutorial. p Run the #[+liveExampleLink2('', 'toh-5')] for this part. .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 - To see the URL changes in the browser address bar, + To see the URL changes in the browser address bar, pop out the preview window by clicking the blue 'X' button in the upper right corner: .l-main-section :marked ## Where We Left Off - Before we continue with our Tour of Heroes, let’s verify that we have the following structure after adding our hero service + Before we continue with our Tour of Heroes, let’s verify that we have the following structure after adding our hero service and hero detail component. If not, we’ll need to go back and follow the previous chapters. .filetree @@ -44,7 +44,7 @@ p Run the #[+liveExampleLink2('', 'toh-5')] for this part. .file main.ts .file mock-heroes.ts .file node_modules ... - .file typings ... + .file typings ... .file index.html .file package.json .file styles.css @@ -64,7 +64,7 @@ code-example(language="bash"). ## Action plan Here's our plan: - + * Turn `AppComponent` into an application shell that only handles navigation * Relocate the *Heroes* concerns within the current `AppComponent` to a separate `HeroesComponent` * Add routing @@ -74,13 +74,13 @@ code-example(language="bash"). .l-sub-section :marked *Routing* is another name for *navigation*. The *router* is the mechanism for navigating from view to view. - -.l-main-section + +.l-main-section :marked ## Splitting the *AppComponent* - + Our current app loads `AppComponent` and immediately displays the list of heroes. - + Our revised app should present a shell with a choice of views (*Dashboard* and *Heroes*) and then default to one of them. The `AppComponent` should only handle navigation. @@ -101,11 +101,11 @@ code-example(language="bash"). :marked ## Create *AppComponent* - The new `AppComponent` will be the application shell. + The new `AppComponent` will be the application shell. It will have some navigation links at the top and a display area below for the pages we navigate to. - + The initial steps are: - + * create a new file named `app.component.ts`. * define an `AppComponent` class. * `export` it so we can reference it during bootstrapping in `main.ts`. @@ -116,7 +116,7 @@ code-example(language="bash"). * add the `HeroesComponent` to the `directives` array so Angular recognizes the `` tags. * add the `HeroService` to the `providers` array because we'll need it in every other view. * add the supporting `import` statements. - + Our first draft looks like this: +makeExample('toh-5/ts/app/app.component.1.ts', null, 'app/app.component.ts (v1)') :marked @@ -127,104 +127,99 @@ code-example(language="bash"). We are *promoting* this service from the `HeroesComponent` to the `AppComponent`. We ***do not want two copies*** of this service at two different levels of our app. :marked - The app still runs and still displays heroes. + The app still runs and still displays heroes. Our refactoring of `AppComponent` into a new `AppComponent` and a `HeroesComponent` worked! We have done no harm. :marked ## Add Routing - - We're ready to take the next step. + + We're ready to take the next step. Instead of displaying heroes automatically, we'd like to show them *after* the user clicks a button. In other words, we'd like to navigate to the list of heroes. - + We'll need the Angular *Component Router*. - + ### Set the base tag - Open the `index.html` and add `` at the top of the `` section. + Open the `index.html` and add `` at the top of the `` section. +makeExample('toh-5/ts/index.html', 'base-href', 'index.html (base href)')(format=".") .callout.is-important header base href is essential :marked - See the *base href* section of the [Router](../guide/router-deprecated.html#!#base-href) chapter to learn why this matters. + See the *base href* section of the [Router](../guide/router.html#!#base-href) chapter to learn why this matters. :marked - ### Make the router available. - The *Component Router* is a service. Like any service, we have to import it and make it - available to the application by adding it to the `providers` array. - - The Angular router is a combination of multiple services (`ROUTER_PROVIDERS`), multiple directives (`ROUTER_DIRECTIVES`), - and a configuration decorator (`RouteConfig`). We'll import them all together: -+makeExample('toh-5/ts/app/app.component.2.ts', 'import-router', 'app/app.component.ts (router imports)')(format=".") -:marked - Next we update the `directives` and `providers` metadata arrays to *include* the router assets. -+makeExample('toh-5/ts/app/app.component.2.ts', 'directives-and-providers', 'app/app.component.ts (directives and providers)')(format=".") -:marked - Notice that we also removed the `HeroesComponent` from the `directives` array. - `AppComponent` no longer shows heroes; that will be the router's job. - We'll soon remove `` from the template too. - - ### Add and configure the router - - The `AppComponent` doesn't have a router yet. We'll use the `@RouteConfig` decorator to simultaneously - (a) assign a router to the component and (b) configure that router with *routes*. - - *Routes* tell the router which views to display when a user clicks a link or + The Angular router is a combination of multiple provided services (`provideRouter`), multiple directives (`ROUTER_DIRECTIVES`), + and a configuration (`RouterConfig`). We'll configure our routes first: + + ### Configure and add the router + + Our application doesn't have a router yet. We'll create a configuration file for our routes that + does two things + (a) configure that router with *routes*. (b) provide an export to add the router to our bootstrap + + *Routes* tell the router which views to display when a user clicks a link or pastes a URL into the browser address bar. Let's define our first route, a route to the `HeroesComponent`. -+makeExample('toh-5/ts/app/app.component.2.ts', 'route-config', 'app/app.component.ts (RouteConfig for heroes)')(format=".") ++makeExample('toh-5/ts/app/app.routes.2.ts', '', 'app/app.routes.ts')(format=".") :marked - `@RouteConfig` takes an array of *route definitions*. - We have only one route definition at the moment but rest assured, we'll add more. - - This *route definition* has three parts: + The `RouterConfig` is an array of *route definitions*. + We have only one route definition at the moment but rest assured, we'll add more. + + This *route definition* has two parts: * **path**: the router matches this route's path to the URL in the browser address bar (`/heroes`). - - * **name**: the official name of the route; it *must* begin with a capital letter to avoid confusion with the *path* (`Heroes`). - + * **component**: the component that the router should create when navigating to this route (`HeroesComponent`). .l-sub-section :marked - Learn more about defining routes with @RouteConfig in the [Routing](../guide/router-deprecated.html) chapter. + Learn more about defining routes with RouterConfig in the [Routing](../guide/router.html) chapter. + +:marked + ### Make the router available. + The *Component Router* is a service. We have to import our `APP_ROUTER_PROVIDERS` which + contains our configured router and make it available to the application by adding it to + the `bootstrap` array. ++makeExample('toh-5/ts/app/main.ts', '', 'app/main.ts')(format=".") + :marked ### Router Outlet - If we paste the path, `/heroes`, into the browser address bar, + If we paste the path, `/heroes`, into the browser address bar, the router should match it to the `'Heroes'` route and display the `HeroesComponent`. But where? - + We have to ***tell it where*** by adding `` marker tags to the bottom of the template. `RouterOutlet` is one of the `ROUTER_DIRECTIVES`. The router displays each component immediately below the `` as we navigate through the application. - + ### Router Links We don't really expect users to paste a route URL into the address bar. We add an anchor tag to the template which, when clicked, triggers navigation to the `HeroesComponent`. - + The revised template looks like this: +makeExample('toh-5/ts/app/app.component.2.ts', 'template', 'app/app.component.ts (template v1)')(format=".") :marked - Notice the `[routerLink]` binding in the anchor tag. + Notice the `[routerLink]` binding in the anchor tag. We bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to an array that tells the router where to navigate when the user clicks the link. - + We define a *routing instruction* with a *link parameters array*. - The array only has one element in our little sample, the quoted ***name* of the route** to follow. - Looking back at the route configuration, we confirm that `'Heroes'` is the name of the route to the `HeroesComponent`. + The array only has one element in our little sample, the quoted ***path* of the route** to follow. + Looking back at the route configuration, we confirm that `'/heroes'` is the path of the route to the `HeroesComponent`. .l-sub-section :marked - Learn about the *link parameters array* in the [Routing](../guide/router-deprecated.html#link-parameters-array) chapter. + Learn about the *link parameters array* in the [Routing](../guide/router.html#link-parameters-array) chapter. :marked - Refresh the browser. We see only the app title. We don't see the heroes list. + Refresh the browser. We see only the app title. We don't see the heroes list. .l-sub-section :marked - The browser's address bar shows `/`. - The route path to `HeroesComponent` is `/heroes`, not `/`. + The browser's address bar shows `/`. + The route path to `HeroesComponent` is `/heroes`, not `/`. We don't have a route that matches the path `/`, so there is nothing to show. That's something we'll want to fix. :marked - We click the "Heroes" navigation link, the browser bar updates to `/heroes`, + We click the "Heroes" navigation link, the browser bar updates to `/heroes`, and now we see the list of heroes. We are navigating at last! At this stage, our `AppComponent` looks like this. @@ -238,73 +233,77 @@ code-example(language="bash"). :marked ## Add a *Dashboard* Routing only makes sense when we have multiple views. We need another view. - + Create a placeholder `DashboardComponent` that gives us something to navigate to and from. +makeExample('toh-5/ts/app/dashboard.component.1.ts',null, 'app/dashboard.component.ts (v1)')(format=".") :marked We’ll come back and make it more useful later. ### Configure the dashboard route - Go back to `app.component.ts` and teach it to navigate to the dashboard. - - Import the `DashboardComponent` so we can reference it in the dashboard route definition. - - Add the following `'Dashboard'` route definition to the `@RouteConfig` array of definitions. -+makeExample('toh-5/ts/app/app.component.ts','dashboard-route', 'app/app.component.ts (Dashboard route)')(format=".") + Go back to `app.routes.ts` and teach it to navigate to the dashboard. + + Import the `DashboardComponent` so we can reference it in the dashboard route definition. + + Add the following `'Dashboard'` route definition to the `RouterConfig` array of definitions. ++makeExample('toh-5/ts/app/app.routes.1.ts','dashboard-route', 'app/app.routes.ts (Dashboard route)')(format=".") .l-sub-section :marked - **useAsDefault** - - We want the app to show the dashboard when it starts and + **Redirect** + + We want the app to show the dashboard when it starts and we want to see a nice URL in the browser address bar that says `/dashboard`. - Remember that the browser launches with `/` in the address bar. - We don't have a route for that path and we'd rather not create one. - - Fortunately we can add the `useAsDefault: true` property to the *route definition* and the - router will display the dashboard when the browser URL doesn't match an existing route. + Remember that the browser launches with `/` in the address bar. + We can use a redirect route to make this happen. + ++makeExample('toh-5/ts/app/app.routes.1.ts','redirect-route', 'app/app.routes.ts (Redirect route)')(format=".") + +.l-sub-section + :marked + Learn about the *redirects* in the [Routing](../guide/router.html#!#redirect) chapter. + :marked Finally, add a dashboard navigation link to the template, just above the *Heroes* link. +makeExample('toh-5/ts/app/app.component.ts','template', 'app/app.component.ts (template)')(format=".") .l-sub-section :marked - We nestled the two links within `