angular-cn/public/docs/ts/latest/tutorial/toh-pt5.jade

- var _example = 'toh-5';

block includes
  include ../_util-fns
  - var _appRoutingTsVsAppComp = 'app.module.ts'
  - var _RoutesVsAtRouteConfig = 'Routes'
  - var _RouterModuleVsRouterDirectives = 'RouterModule'
  - var _redirect = 'redirect'

:marked
  There are new requirements for the Tour of Heroes app:

  * Add a *Dashboard* view.
  * Add the ability to navigate between the *Heroes* and *Dashboard* views.
  * When users click a hero name in either view, navigate to a detail view of the selected hero.
  * When users click a *deep link* in an email, open the detail view for a particular hero.

  When you’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")

:marked
  To satisfy these requirements, you'll add Angular’s router to the app.

.l-sub-section
  :marked
    For more information about the router, read the [Routing and Navigation](../guide/router.html) page.

:marked
  When you're done with this page, the app should look like this <live-example></live-example>.

+ifDocsFor('ts|js')
  include ../../../_includes/_see-addr-bar

.l-main-section
:marked
  ## Where you left off
  Before continuing with the Tour of Heroes, verify that you have the following structure.

block intro-file-tree
  .filetree
    .file angular-tour-of-heroes
    .children
      .file src
      .children
        .file app
        .children
          .file app.component.ts
          .file app.module.ts
          .file hero.service.ts
          .file hero.ts
          .file hero-detail.component.ts
          .file mock-heroes.ts
        .file main.ts
        .file index.html
        .file styles.css
        .file systemjs.config.js
        .file tsconfig.json
      .file node_modules ...
      .file package.json

block keep-app-running
  :marked
    ## Keep the app transpiling and running
    Enter the following command in the terminal window:

  code-example(language="sh" class="code-shell").
    npm start

  :marked
    This command runs the TypeScript compiler in "watch mode", recompiling automatically when the code changes.
    The command simultaneously launches the app in a browser and refreshes the browser when the code changes.

:marked
  You can keep building the Tour of Heroes without pausing to recompile or refresh the browser.

  ## Action plan

  Here's the 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.
  * Create a new `DashboardComponent`.
  * Tie the *Dashboard* into the navigation structure.

.l-sub-section
  :marked
    *Routing* is another name for *navigation*. The router is the mechanism for navigating from view to view.

.l-main-section
:marked
  ## Splitting the *AppComponent*

  The current app loads `AppComponent` and immediately displays the list of heroes.

  The 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, so you'll
  move the display of *Heroes* out of `AppComponent` and into its own `HeroesComponent`.

  ### *HeroesComponent*

  `AppComponent` is already dedicated to *Heroes*.
  Instead of moving the code out of `AppComponent`, rename it to `HeroesComponent`
  and create a separate `AppComponent` shell.

  Do the following:
  * Rename the <span ngio-ex>app.component.ts</span> file to <span ngio-ex>heroes.component.ts</span>.
  * Rename the `AppComponent` class to `HeroesComponent` (rename locally, _only_ in this file).
  * Rename the selector `my-app` to `my-heroes`.

+makeExcerpt('src/app/heroes.component.ts (showing renamings only)', 'renaming')

:marked
  ### Create *AppComponent*

  The new `AppComponent` is the application shell.
  It will have some navigation links at the top and a display area below.

  Perform these steps:

  * Create the file <span ngio-ex>src/app/app.component.ts</span>.
  * Define an <span if-docs="ts">exported</span> `AppComponent` class.
  * Add an `@Component` !{_decorator} above the class with a `my-app` selector.
  * Move the following from `HeroesComponent` to `AppComponent`:
    * `title` class property.
    * `@Component` template `<h1>` element, which contains a binding to  `title`.
  * Add a `<my-heroes>` element to the app template just below the heading so you still see the heroes.
  * Add `HeroesComponent` to the `!{_declsVsDirectives}` !{_array} of `!{_AppModuleVsAppComp}` so Angular recognizes the `<my-heroes>` tags.
  * Add `HeroService` to the  `providers` !{_array} of `!{_AppModuleVsAppComp}` because you'll need it in every other view.
  * Remove `HeroService` from the `HeroesComponent` `providers` !{_array} since it was promoted.
  * Add the supporting `import` statements for `AppComponent`.

  The first draft looks like this:

block app-comp-v1
  +makeTabs(
    `toh-5/ts/src/app/app.component.1.ts,
    toh-5/ts/src/app/app.module.1.ts`,
    ',',
    `src/app/app.component.ts (v1),
    src/app/app.module.ts (v1)`)

:marked
  The app still runs and displays heroes.

:marked
  ## Add routing

  Instead of displaying automatically, heroes should display after users click a button.
  In other words, users should be able to navigate to the list of heroes.

  Use the Angular router to enable navigation.

block angular-router
  :marked
    The Angular router is an external, optional Angular NgModule called `RouterModule`.
    The router is a combination of multiple provided services (`RouterModule`),
    multiple directives (`RouterOutlet, RouterLink, RouterLinkActive`),
    and a configuration (`Routes`). You'll configure the routes first.

:marked
  ### *&lt;base href>*

  Open `index.html` and ensure there is a `<base href="...">` element
  (or a script that dynamically sets this element)
  at the top of the `<head>` section.

+makeExcerpt('src/index.html', 'base-href')

.callout.is-important
  header base href is essential
  :marked
    For more information, see the [Set the base href](../guide/router.html#!#base-href)
    section of the [Routing and Navigation](../guide/router.html) page.


a#configure-routes
block router-config-intro
  :marked
    ### Configure routes

    Create a configuration file for the app routes.

:marked
  *Routes* tell the router which views to display when a user clicks a link or
  pastes a URL into the browser address bar.

  Define the first route as a route to the heroes component.

- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app.module.2.ts'
+makeExcerpt('src/app/' + _file + ' (heroes route)', 'heroes')

- var _are = _docsFor == 'dart' ? 'takes' : 'are'
- var _routePathPrefix = _docsFor == 'dart' ? '/' : ''
:marked
  The `!{_RoutesVsAtRouteConfig}` !{_are} !{_an} !{_array} of *route definitions*.

  This route definition has the following parts:

  - *Path*: The router matches this route's path to the URL in the browser address bar (`!{_routePathPrefix}heroes`).
  <li if-docs="dart"> *Name*: The official name of the route;
   it must begin with a capital letter to avoid confusion with the path (`Heroes`).</li>
  - *Component*: The component that the router should create when navigating to this route (`HeroesComponent`).


.l-sub-section
  :marked
    Read more about defining routes with `!{_RoutesVsAtRouteConfig}` in the [Routing & Navigation](../guide/router.html) page.

+ifDocsFor('ts|js')
  :marked
    ### Make the router available

    Import the `RouterModule` and add it to the `AppModule` imports !{_array}.

  +makeExcerpt('src/app/app.module.2.ts (app routing)', '')

  .l-sub-section
    :marked
      The `forRoot()` method is called because a configured router is provided at the app's root.
      The `forRoot()` method supplies the Router service providers and directives needed for routing, and
      performs the initial navigation based on the current browser URL.

- var _heroesRoute = _docsFor == 'dart' ? "'Heroes'" : 'heroes'
:marked
  ### Router outlet

  If you paste the path, `/heroes`, into the browser address bar at the end of the URL,
  the router should match it to the `!{_heroesRoute}` route and display the `HeroesComponent`.
  However, you have to tell the router where to display the component.
  To do this, you can add a `<router-outlet>` element at the end of the template.
  `RouterOutlet` is one of the <span if-docs="ts">directives provided by</span> the `!{_RouterModuleVsRouterDirectives}`.
  The router displays each component immediately below the `<router-outlet>` as users navigate through the app.

  ### Router links

  Users shouldn't have to paste a route URL into the address bar.
  Instead, add an anchor tag to the template that, when clicked, triggers navigation to the `HeroesComponent`.

  The revised template looks like this:

+makeExcerpt('src/app/app.component.1.ts', 'template-v2')

block routerLink
  :marked
    Note the `routerLink` binding in the anchor tag.
    The `RouterLink` directive (another of the `RouterModule` directives) is bound to a string
    that tells the router where to navigate when the user clicks the link.

    Since the link is not dynamic, a routing instruction is defined with a one-time binding to the route path.
    Looking back at the route configuration, you can confirm that `'/heroes'` is the path of the route to the `HeroesComponent`.
  .l-sub-section
    :marked
      Read more about dynamic router links and the link parameters array
      in the [Appendix: Link Parameters Array](../guide/router.html#link-parameters-array) section of the
      [Routing & Navigation](../guide/router.html#) page.

:marked
  Refresh the browser. The browser displays the app title and heroes link, but not the heroes list.

.l-sub-section
  :marked
    The browser's address bar shows `/`.
    The route path to `HeroesComponent` is `/heroes`, not `/`.
    Soon you'll add a route that matches the path `/`.

:marked
  Click the *Heroes* navigation link. The address bar updates to `/heroes`
  and the list of heroes displays.

  `AppComponent` now looks like this:

+makeExample('src/app/app.component.1.ts', 'v2', 'src/app/app.component.ts (v2)')

:marked
  The  *AppComponent* is now attached to a router and displays routed views.
  For this reason, and to distinguish it from other kinds of components,
  this component type is called a *router component*.

:marked
  ## Add a dashboard

  Routing only makes sense when multiple views exist.
  To add another view, create a placeholder `DashboardComponent`, which users can navigate to and from.

+makeExcerpt('src/app/dashboard.component.1.ts (v1)', '')

:marked
  You'll make this component more useful later.

  ### Configure the dashboard route

  To teach `!{_appRoutingTsVsAppComp}` to navigate to the dashboard,
  import the dashboard component and
  add the following route definition to the `!{_RoutesVsAtRouteConfig}` !{_array} of definitions.

- var _file = _docsFor == 'dart' ? 'lib/app_component.dart' : 'src/app/app.module.3.ts'
+makeExcerpt(_file + ' (Dashboard route)', 'dashboard')

+ifDocsFor('ts|js')
  :marked
    Also import and add `DashboardComponent` to the `AppModule`'s `declarations`.

  +makeExcerpt('src/app/app.module.ts', 'dashboard')

:marked
  ### Add a !{_redirect} route

  Currently, the browser launches with `/` in the address bar.
  When the app starts, it should show the dashboard and
  display a `/dashboard` URL in the browser address bar.

block redirect-vs-use-as-default
  :marked
    To make this happen, use a redirect route. Add the following
    to the array of route definitions:

  +makeExcerpt('src/app/app.module.3.ts','redirect')

  .l-sub-section
    :marked
      Read more about *redirects* in the [Redirecting routes](../guide/router.html#!#redirect) section
      of the [Routing & Navigation](../guide/router.html#) page.

:marked
  ### Add navigation to the template

  Add a dashboard navigation link to the template, just above the *Heroes* link.

- var _vers = _docsFor == 'dart' ? '' : '.1'
+makeExcerpt('src/app/app.component' + _vers + '.ts', 'template-v3')

.l-sub-section
  :marked
    The `<nav>` tags don't do anything yet, but they'll be useful later when you style the links.

:marked
  In your browser, go to the application root (`/`) and reload.
  The app displays the dashboard and you can navigate between the dashboard and the heroes.

  ## Add heroes to the dashboard

  To make the dashboard more interesting, you'll display the top four heroes at a glance.

  Replace the `template` metadata with a `templateUrl` property that points to a new
  template file.

+makeExcerpt('src/app/dashboard.component.ts', 'metadata')

block templateUrl-path-resolution
  //- N/A for TS

:marked
  Create that file with this content:

+makeExample('src/app/dashboard.component.1.html', '', 'src/app/dashboard.component.html')

:marked
  `*ngFor` is used again to iterate over a list of heroes and display their names.
  The extra `<div>` elements will help with styling later.

  ### Sharing the *HeroService*

  To populate the component's `heroes` !{_array}, you can re-use the `HeroService`.

  Earlier, you removed the `HeroService` from the `providers` !{_array} of `HeroesComponent`
  and added it to the `providers` !{_array} of `!{_AppModuleVsAppComp}`.
  That move created a singleton `HeroService` instance, available to all components of the app.
  Angular injects `HeroService` and you can use it in the `DashboardComponent`.

  ### Get heroes

  In <span ngio-ex>dashboard.component.ts</span>, add the following `import` statements.

+makeExcerpt('src/app/dashboard.component.ts','imports')

:marked
  Now create the `DashboardComponent` class like this:

+makeExcerpt('src/app/dashboard.component.ts (class)', 'class')

:marked
  This kind of logic is also used in the `HeroesComponent`:

  * Define a `heroes` !{_array} property.
  * Inject the `HeroService` in the constructor and hold it in a private `!{_priv}heroService` field.
  * Call the service to get heroes inside the Angular `ngOnInit()` lifecycle hook.

  In this dashboard you specify four heroes (2nd, 3rd, 4th, and 5th)<span if-docs="ts"> with the `Array.slice()` method</span>.

  Refresh the browser to see four hero names in the new dashboard.

.l-main-section
:marked
  ## Navigating to hero details

  While the details of a selected hero displays at the bottom of the `HeroesComponent`,
  users should be able to navigate to the `HeroDetailComponent` in the following additional ways:

  * From the dashboard to a selected hero.
  * From the heroes list to a selected hero.
  * From a "deep link" URL pasted into the browser address bar.

  ### Routing to a hero detail

  You can add a route to the `HeroDetailComponent` in `!{_appRoutingTsVsAppComp}`, where the other routes are configured.

  The new route is unusual in that you must tell the `HeroDetailComponent` which hero to show.
  You didn't have to tell the `HeroesComponent` or the `DashboardComponent` anything.

  Currently, the parent `HeroesComponent` sets the component's `hero` property to a
  hero object with a binding like this:

code-example(language="html").
  &lt;hero-detail [hero]="selectedHero">&lt;/hero-detail>

:marked
  But this binding won't work in any of the routing scenarios.

  ### Parameterized route

  You can add the hero's `id` to the URL. When routing to the hero whose `id` is 11,
  you could expect to see a URL such as this:

code-example(format="nocode").
  /detail/11

:marked
  The `/detail/` part of the URL is constant. The trailing numeric `id` changes from hero to hero.
  You need to represent the variable part of the route with a *parameter* (or *token*) that stands for the hero's `id`.

  ### Configure a route with a parameter

  Use the following *route definition*.

- var _file = _docsFor == 'dart' ? 'src/app/app.component.ts' : 'src/app/app.module.3.ts'
+makeExcerpt(_file + ' (hero detail)','hero-detail')

:marked
  The colon (:) in the path indicates that `:id` is a placeholder for a specific hero `id`
  when navigating to the `HeroDetailComponent`.

+ifDocsFor('dart')
  .l-sub-section
    :marked
      Be sure to import the hero detail component before creating this route.

:marked
  You're finished with the app routes.

  You didn't add a `'Hero Detail'` link to the template because users
  don't click a navigation *link* to view a particular hero;
  they click a *hero name*, whether the name displays on the dashboard or in the heroes list.

  You don't need to add the hero clicks until the `HeroDetailComponent`
  is revised and ready to be navigated to.

.l-main-section
:marked
  ## Revise the *HeroDetailComponent*

  Here's what the `HeroDetailComponent` looks like now:

+makeExample('toh-4/ts/src/app/hero-detail.component.ts', null, 'src/app/hero-detail.component.ts (current)')

:marked
  The template won't change. Hero names will display the same way.
  The major changes are driven by how you get hero names.

block route-params
  :marked
    You'll no longer receive the hero in a parent component property binding.
    The new `HeroDetailComponent` should take the `id` parameter from the `params` Observable
    in the `ActivatedRoute` service and use the `HeroService` to fetch the hero with that `id`.

:marked
  Add the following imports:

- var _vers = _docsFor == 'dart' ? '' : '.1'
+makeExcerpt('src/app/hero-detail.component' + _vers + '.ts', 'added-imports', 'src/app/hero-detail.component')

- var _ActivatedRoute = _docsFor == 'dart' ? 'RouteParams' : 'ActivatedRoute'
:marked
  Inject the `!{_ActivatedRoute}`, `HeroService`, and `Location` services
  into the constructor, saving their values in private fields:

+makeExcerpt('src/app/hero-detail.component.ts (constructor)', 'ctor')

+ifDocsFor('ts')
  :marked
    Import the `switchMap` operator to use later with the route parameters `Observable`.

  +makeExcerpt('src/app/hero-detail.component.ts (switchMap import)', 'rxjs-import')

:marked
  Tell the class to implement the `OnInit` interface.

+makeExcerpt('src/app/hero-detail.component.ts', 'implement', 'src/app/hero-detail.component.ts')

block ngOnInit
  :marked
    Inside the `ngOnInit()` lifecycle hook, use the `params` Observable to
    extract the `id` parameter value from the `ActivatedRoute` service
    and use the `HeroService` to fetch the hero with that `id`.

+makeExcerpt('src/app/hero-detail.component.ts', 'ngOnInit', 'src/app/hero-detail.component.ts')


block extract-id
  :marked
    The `switchMap` operator maps the `id` in the Observable route parameters
    to a new `Observable`, the result of the `HeroService.getHero()` method.

    If a user re-navigates to this component while a `getHero` request is still processing,
    `switchMap` cancels the old request and then calls `HeroService.getHero()` again.

- var _str2int = _docsFor == 'dart' ? '<code>int.parse()</code> static method' : 'JavaScript (+) operator'
:marked
  The hero `id` is a number. Route parameters are always strings.
  So the route parameter value is converted to a number with the !{_str2int}.

+ifDocsFor('ts')
  .l-sub-section
    :marked
      ### Do you need to unsubscribe?

      As described in the [ActivatedRoute: the one-stop-shop for route information](../guide/router.html#activated-route)
      section of the [Routing & Navigation](../guide/router.html) page,
      the `Router` manages the observables it provides and localizes
      the subscriptions. The subscriptions are cleaned up when the component is destroyed, protecting against
      memory leaks, so you don't need to unsubscribe from the route `params` `Observable`.

:marked
  ### Add *HeroService.getHero()*

  In the previous code snippet, `HeroService` doesn't have a `getHero()` method. To fix this issue,
  open `HeroService` and add a `getHero()` method that filters the heroes list from `getHeroes()` by `id`.

+makeExcerpt('src/app/hero.service.ts', 'getHero')

:marked
  ### Find the way back

  Users have several ways to navigate *to* the `HeroDetailComponent`.

  To navigate somewhere else, users can click one of the two links in the `AppComponent` or click the browser's back button.
  Now add a third option, a `goBack()` method that navigates backward one step in the browser's history stack
  using the `Location` service you injected previously.

+makeExcerpt('src/app/hero-detail.component.ts', 'goBack')

- var _CanDeactivateGuard = _docsFor == 'dart' ? '<em>routerCanDeactivate()</em> hook' : '<em>CanDeactivate</em> guard'
.l-sub-section
  :marked
    Going back too far could take users out of the app.
    In a real app, you can prevent this issue with the !{_CanDeactivateGuard}.
    Read more on the [CanDeactivate](../api/router/index/CanDeactivate-interface.html) page.

:marked
  You'll wire this method with an event binding to a *Back* button that you'll add to the component template.

+makeExcerpt('src/app/hero-detail.component.html', 'back-button', '')

:marked
  Migrate the template to its own file
  called <span ngio-ex>hero-detail.component.html</span>:

+makeExample('src/app/hero-detail.component.html')

:marked
  Update the component metadata with a `templateUrl` pointing to the template file that you just created.


+makeExcerpt('src/app/hero-detail.component.ts', 'metadata')

:marked
  Refresh the browser and see the results.

.l-main-section
:marked
  ## Select a dashboard hero

  When a user selects a hero in the dashboard, the app should navigate to the `HeroDetailComponent` to view and edit the selected hero.

  Although the dashboard heroes are presented as button-like blocks, they should behave like anchor tags.
  When hovering over a hero block, the target URL should display in the browser status bar
  and the user should be able to copy the link or open the hero detail view in a new tab.

  To achieve this effect, reopen `dashboard.component.html` and replace the repeated `<div *ngFor...>` tags
  with `<a>` tags. Change the opening `<a>` tag to the following:

+makeExample('src/app/dashboard.component.html', 'click', 'src/app/dashboard.component.html (repeated <a> tag)')

- var _pathVsName = _docsFor == 'dart' ? 'name' : 'path'
:marked
  Notice the `[routerLink]` binding.
  As described in the [Router links](#router-links) section of this page,
  top-level navigation in the `AppComponent` template has router links set to fixed !{_pathVsName}s of the
  destination routes, "/dashboard" and "/heroes".

  This time, you're binding to an expression containing a *link parameters !{_array}*.
  The !{_array} has two elements: the *!{_pathVsName}* of
  the destination route and a *route parameter* set to the value of the current hero's `id`.

  The two !{_array} items align with the *!{_pathVsName}* and *:id*
  token in the parameterized hero detail route definition that you added to
  `!{_appRoutingTsVsAppComp}` earlier:

- var _file = _docsFor == 'dart' ? 'src/app/app.component.ts' : 'src/app/app.module.3.ts'
+makeExcerpt(_file + ' (hero detail)', 'hero-detail')

:marked
  Refresh the browser and select a hero from the dashboard; the app navigates to that hero’s details.

+ifDocsFor('ts')
  .l-main-section
  :marked
    ## Refactor routes to a _Routing Module_

    Almost 20 lines of `AppModule` are devoted to configuring four routes.
    Most applications have many more routes and they add guard services
    to protect against unwanted or unauthorized navigations.
    (Read more about guard services in the [Route Guards](../guide/router.html#guards)
    section of the [Routing & Navigation](../guide/router.html) page.)
    Routing considerations could quickly dominate this module and obscure its primary purpose, which is to
    establish key facts about the entire app for the Angular compiler.

    It's a good idea to refactor the routing configuration into its own class.
    The current `RouterModule.forRoot()` produces an Angular `ModuleWithProviders`,
    a class dedicated to routing should be a *routing module*.
    For more information, see the [Milestone #2: The Routing Module](../guide/router.html#routing-module)
    section of the [Routing & Navigation](../guide/router.html) page.

    By convention, a routing module name contains the word "Routing" and
    aligns with the name of the module that declares the components navigated to.

    Create an `app-routing.module.ts` file as a sibling to `app.module.ts`.
    Give it the following contents, extracted from the `AppModule` class:

  +makeExample('src/app/app-routing.module.ts')
  :marked
    The following points are typical of routing modules:
    * The Routing Module pulls the routes into a variable. The variable clarifies the
      routing module pattern in case you export the module in the future.
    * The Routing Module adds `RouterModule.forRoot(routes)` to `imports`.
    * The Routing Module adds `RouterModule` to `exports` so that the
    components in the companion module have access to Router declarables,
    such as `RouterLink` and `RouterOutlet`.
    * There are no `declarations`.  Declarations are the responsibility of the companion module.
    * If you have guard services, the Routing Module adds module `providers`. (There are none in this example.)

    ### Update *AppModule*

    Delete the routing configuration from `AppModule` and import the `AppRoutingModule`.
    Use an ES `import` statement *and* add it to the `NgModule.imports` list.

    Here is the revised `AppModule`, compared to its pre-refactor state:

  +makeTabs(
    `toh-5/ts/src/app/app.module.ts, toh-5/ts/src/app/app.module.3.ts`,
     null,
    `src/app/app.module.ts (after), src/app/app.module.ts (before)`)
  :marked
    The revised and simplified `AppModule` is focused on identifying the key pieces of the app.

.l-main-section
:marked
  ## Select a hero in the *HeroesComponent*

  In the `HeroesComponent`,
  the current template exhibits a "master/detail" style with the list of heroes
  at the top and details of the selected hero below.

+makeExample('toh-4/ts/src/app/app.component.ts','template', 'src/app/heroes.component.ts (current template)')(format=".")

:marked
  Delete the `<h1>` at the top.

  Delete the last line of the template with the `<hero-detail>` tags.

  You'll no longer show the full `HeroDetailComponent` here.
  Instead, you'll display the hero detail on its own page and route to it as you did in the dashboard.

  However, when users select a hero from the list, they won't go to the detail page.
  Instead, they'll see a mini detail on *this* page and have to click a button to navigate to the *full detail* page.

  ### Add the *mini detail*

  Add the following HTML fragment at the bottom of the template where the `<hero-detail>` used to be:

+makeExcerpt('src/app/heroes.component.html', 'mini-detail', 'src/app/heroes.component.ts')


:marked
  After clicking a hero, users should see something like this below the hero list:

figure.image-display
  img(src='/resources/images/devguide/toh/mini-hero-detail.png' alt="Mini Hero Detail" height="70")

:marked
  ### Format with the uppercase pipe

  The hero's name is displayed in capital letters because of the `uppercase` pipe
  that's included in the interpolation binding, right after the pipe operator ( | ).

+makeExcerpt('src/app/heroes.component.html', 'pipe', '')

:marked
  Pipes are a good way to format strings, currency amounts, dates and other display data.
  Angular ships with several pipes and you can write your own.

.l-sub-section
  :marked
    Read more about pipes on the [Pipes](../guide/pipes.html) page.

:marked
  ### Move content out of the component file

  You still have to update the component class to support navigation to the
  `HeroDetailComponent` when users click the *View Details* button.

  The component file is big.
  It's difficult to find the component logic amidst the noise of HTML and CSS.

  Before making any more changes, migrate the template and styles to their own files. 

  First, move the template contents from `heroes.component.ts` 
  into a new <span ngio-ex>heroes.component.html</span> file. 
  Don't copy the backticks. As for `heroes.component.ts`, you'll 
  come back to it in a minute. Next, move the 
  styles contents into a new <span ngio-ex>heroes.component.css</span> file.

  The two new files should look like this:

+makeTabs(
    `toh-5/ts/src/app/heroes.component.html, toh-5/ts/src/app/heroes.component.css`,
     null,
    `src/app/heroes.component.html, src/app/heroes.component.css`)

:marked
  Now, back in the component metadata for `heroes.component.ts`, 
  delete `template` and `styles`, replacing them with 
  `templateUrl` and `styleUrls` respectively.
  Set their properties to refer to the new files.

block heroes-component-cleanup
  //- Only relevant for Dart.

+makeExcerpt('src/app/heroes.component.ts (revised metadata)', 'metadata')

.l-sub-section
  :marked
    The `styleUrls` property is !{_an} !{_array} of style file names (with paths).
    You could list multiple style files from different locations if you needed them.

:marked
  ### Update the _HeroesComponent_ class

  The `HeroesComponent` navigates to the `HeroesDetailComponent` in response to a button click.
  The button's click event is bound to a `gotoDetail()` method that navigates _imperatively_
  by telling the router where to go.

  This approach requires the following changes to the component class:

  1. Import the `router` from the Angular router library.
  1. Inject the `router` in the constructor, along with the `HeroService`.
  1. Implement `gotoDetail()` by calling the router `navigate()` method.

+makeExcerpt('src/app/heroes.component.ts', 'gotoDetail')

:marked
  Note that you're passing a two-element *link parameters !{_array}*&mdash;a
  !{_pathVsName} and the route parameter&mdash;to
  the router `navigate()` method, just as you did in the `[routerLink]` binding
  back in the `DashboardComponent`.
  Here's the revised `HeroesComponent` class:

+makeExcerpt('src/app/heroes.component.ts', 'class')

:marked
  Refresh the browser and start clicking.
  Users can navigate around the app, from the dashboard to hero details and back,
  from heroes list to the mini detail to the hero details and back to the heroes again.

  You've met all of the navigational requirements that propelled this page.

.l-main-section
:marked
  ## Style the app

  The app is functional but it needs styling.
  The dashboard heroes should display in a row of rectangles.
  You've received around 60 lines of CSS for this purpose, including some simple media queries for responsive design.

  As you now know, adding the CSS to the component `styles` metadata
  would obscure the component logic.
  Instead, edit the CSS in a separate `*.css` file.

  Add a <span ngio-ex>dashboard.component.css</span> file to the `!{_appDir}` folder and reference
  that file in the component metadata's `styleUrls` !{_array} property like this:

+makeExcerpt('src/app/dashboard.component.ts (styleUrls)', 'css')

:marked
  ### Add stylish hero details

  You've also been provided with CSS styles specifically for the `HeroDetailComponent`.

  Add a <span ngio-ex>hero-detail.component.css</span> to the `!{_appDir}`
  folder and refer to that file inside
  the `styleUrls` !{_array} as you did for `DashboardComponent`.
  Also, in `hero-detail.component.ts`, remove the `hero` property `@Input` !{_decorator}
  <span if-docs="ts">and its import</span>.

  Here's the content for the component CSS files.

+makeTabs(
  `toh-5/ts/src/app/hero-detail.component.css,
  toh-5/ts/src/app/dashboard.component.css`,
  null,
  `src/app/hero-detail.component.css,
  src/app/dashboard.component.css`)

:marked
  ### Style the navigation links

  The provided CSS makes the navigation links in the `AppComponent` look more like selectable buttons.
  You'll surround those links in `<nav>` tags.

  Add an <span ngio-ex>app.component.css</span> file to the `!{_appDir}` folder with the following content.

+makeExcerpt('src/app/app.component.css (navigation styles)', '')

.l-sub-section
  block router-link-active
    :marked
      **The *routerLinkActive* directive**

      The Angular router provides a `routerLinkActive` directive you can use to
      add a class to the HTML navigation element whose route matches the active route.
      All you have to do is define the style for it.

    +makeExcerpt('src/app/app.component.ts (active router links)', 'template')

:marked
  Add a `styleUrls` property that refers to this CSS file as follows:

+makeExcerpt('src/app/app.component.ts','styleUrls')


:marked
  ### Global application styles

  When you add styles to a component, you keep everything a component needs&mdash;HTML,
  the CSS, the code&mdash;together in one convenient place.
  It's easy to package it all up and re-use the component somewhere else.

  You can also create styles at the *application level* outside of any component.

  The designers provided some basic styles to apply to elements across the entire app.
  These correspond to the full set of master styles that you installed earlier during [setup](../guide/setup.html).
  Here's an excerpt:

+makeExcerpt('src/styles.css (excerpt)', 'toh')

- var styles_css = 'https://raw.githubusercontent.com/angular/angular.io/master/public/docs/_examples/_boilerplate/src/styles.css'

:marked
  Create the file <span ngio-ex>styles.css</span>.
  Ensure that the file contains the [master styles provided here](!{styles_css}).
  Also edit <span ngio-ex>index.html</span> to refer to this stylesheet.

+makeExcerpt('src/index.html (link ref)', 'css')

:marked
  Look at the app now. The dashboard, heroes, and navigation links are styled.

figure.image-display
  img(src='/resources/images/devguide/toh/dashboard-top-heroes.png' alt="View navigations")

.l-main-section
:marked
  ## Application structure and code

  Review the sample source code in the <live-example></live-example> for this page.
  Verify that you have the following structure:

block file-tree-end
  .filetree
    .file angular-tour-of-heroes
    .children
      .file src
      .children
        .file app
        .children
          .file app.component.css
          .file app.component.ts
          .file app.module.ts
          .file app-routing.module.ts
          .file dashboard.component.css
          .file dashboard.component.html
          .file dashboard.component.ts
          .file hero.service.ts
          .file hero.ts
          .file hero-detail.component.css
          .file hero-detail.component.html
          .file hero-detail.component.ts
          .file heroes.component.css
          .file heroes.component.html
          .file heroes.component.ts
          .file mock-heroes.ts
        .file main.ts
        .file index.html
        .file styles.css
        .file systemjs.config.js
        .file tsconfig.json
      .file node_modules ...
      .file package.json

.l-main-section
:marked
  ## The road you’ve travelled
  Here's what you achieved in this page:

  - You added the Angular router to navigate among different components.
  - You learned how to create router links to represent navigation menu items.
  - You used router link parameters to navigate to the details of the user-selected hero.
  - You shared the `HeroService` among multiple components.
  - You moved HTML and CSS out of the component file and into their own files.
  - You added the `uppercase` pipe to format data.

  Your app should look like this <live-example></live-example>.

  ### The road ahead

  You have much of the foundation you need to build an app.
  You're still missing a key piece: remote data access.

  In the next page,
  you’ll replace the mock data with data retrieved from a server using http.