docs(toh-5): add file to cache (#2102)
* toh-pt5: cached version before new router was introduced * toh-pt5: refreshed cached copy from latest (post-RC5)
This commit is contained in:
Patrice Chalin
Kathy Walrath
parent
dfd46af604
commit
35b54383c2
|
|
@ -0,0 +1,740 @@
|
|||
include ../_util-fns
|
||||
|
||||
:marked
|
||||
# Routing Around the App
|
||||
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;
|
||||
|
||||
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")
|
||||
:marked
|
||||
We'll add Angular’s *Component Router* to our app to satisfy these requirements.
|
||||
.l-sub-section
|
||||
:marked
|
||||
The [Routing and Navigation](../guide/router.html) chapter covers the router in more detail
|
||||
than we will in this tutorial.
|
||||
|
||||
:marked
|
||||
Run the <live-example></live-example> 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,
|
||||
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
|
||||
and hero detail component. If not, we’ll need to go back and follow the previous chapters.
|
||||
|
||||
.filetree
|
||||
.file angular2-tour-of-heroes
|
||||
.children
|
||||
.file app
|
||||
.children
|
||||
.file app.component.ts
|
||||
.file app.module.ts
|
||||
.file hero.ts
|
||||
.file hero-detail.component.ts
|
||||
.file hero.service.ts
|
||||
.file main.ts
|
||||
.file mock-heroes.ts
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file styles.css
|
||||
.file systemjs.config.js
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
:marked
|
||||
### Keep the app transpiling and running
|
||||
Open a terminal/console window and enter the following command to
|
||||
start the TypeScript compiler, start the server, and watch for changes:
|
||||
|
||||
code-example(language="bash").
|
||||
npm start
|
||||
|
||||
:marked
|
||||
The application runs and updates automatically as we continue to build the Tour of Heroes.
|
||||
|
||||
## 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
|
||||
* 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*
|
||||
|
||||
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.
|
||||
Let's move the display of *Heroes* out of `AppComponent` and into its own `HeroesComponent`.
|
||||
|
||||
### *HeroesComponent*
|
||||
`AppComponent` is already dedicated to *Heroes*.
|
||||
Instead of moving anything out of `AppComponent`, we'll just rename it `HeroesComponent`
|
||||
and create a new `AppComponent` shell separately.
|
||||
|
||||
The steps are to rename:
|
||||
* `app.component.ts` file to `heroes.component.ts`
|
||||
* `AppComponent` class to `HeroesComponent`
|
||||
* Selector `my-app` to `my-heroes`
|
||||
|
||||
:marked
|
||||
+makeExample('toh-5/ts/app/heroes.component.ts', 'heroes-component-renaming', 'app/heroes.component.ts (showing renamings only)')(format=".")
|
||||
|
||||
:marked
|
||||
## Create *AppComponent*
|
||||
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 `app.module.ts`.
|
||||
* expose an application `title` property.
|
||||
* add the `@Component` metadata decorator above the class with a `my-app` selector.
|
||||
* add a template with `<h1>` tags surrounding a binding to the `title` property.
|
||||
* add the `<my-heroes>` tags to the template so we still see the heroes.
|
||||
* add the `HeroesComponent` to the root NgModule's `declarations` array so Angular recognizes the `<my-heroes>` tags.
|
||||
* add the `HeroService` to the root NgModule's `providers` array because we'll need it in every other view.
|
||||
* add the supporting `import` statements.
|
||||
|
||||
Our first draft looks like this:
|
||||
+makeTabs(
|
||||
`toh-5/ts/app/app.component.1.ts,
|
||||
toh-5/ts/app/app.module.1.ts`,
|
||||
',',
|
||||
`app/app.component.ts (v1),
|
||||
app/app.module.ts (v1)`)
|
||||
|
||||
:marked
|
||||
.callout.is-critical
|
||||
header Remove <i>HeroService</i> from the <i>HeroesComponent</i> providers
|
||||
:marked
|
||||
Go back to the `HeroesComponent` and **remove the `HeroService`** from its `providers` array.
|
||||
We are *promoting* this service from the `HeroesComponent` to the root `NgModule`.
|
||||
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.
|
||||
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.
|
||||
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 `<base href="/">` at the top of the `<head>` 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.html#!#base-href) chapter to learn why this matters.
|
||||
:marked
|
||||
The Angular router is a combination of multiple provided services (`RouterModule`), multiple directives (`RouterOutlet,
|
||||
RouterLink, RouterLinkActive`), and a configuration (`Routes`). We'll configure our routes first:
|
||||
|
||||
### Configure the routes
|
||||
|
||||
The *Component Router* is an external, optional Angular NgModule called `RouterModule`.
|
||||
|
||||
Our application doesn't have any routes yet.
|
||||
Start by creating a configuration file for the application routes.
|
||||
*Routes* tell the router which views to display when a user clicks a link or
|
||||
pastes a URL into the browser address bar.
|
||||
|
||||
Our first route goes to the `HeroesComponent`.
|
||||
+makeExample('toh-5/ts/app/app.routing.1.ts', 'routing-config', 'app/app.routing.ts (heroes route)')(format=".")
|
||||
:marked
|
||||
The `Routes` are 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`).
|
||||
|
||||
* **component**: the component that the router should create when navigating to this route (`HeroesComponent`).
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
Learn more about defining routes with Routes in the [Routing](../guide/router.html) chapter.
|
||||
|
||||
:marked
|
||||
We'll export the `routing` constant using the **RouterModule.forRoot** method with our array of routes.
|
||||
This returns a configured router module we'll add to our root NgModule, `AppModule`.
|
||||
|
||||
+makeExample('toh-5/ts/app/app.routing.1.ts', 'routing-export', 'app/app.routing.ts (routing export)')(format=".")
|
||||
.l-sub-section
|
||||
:marked
|
||||
We call the `forRoot` method because we're providing a configured router at the _root_ of the application.
|
||||
The `forRoot` method gives us the Router service providers and directives needed for routing.
|
||||
|
||||
:marked
|
||||
### Make the router available.
|
||||
We've setup our initial routes in our `app.routing.ts` file. Now we'll add it to our root NgModule.
|
||||
|
||||
We'll import our `routing` constant from our `app.routing.ts` file and add it root NgModule's `imports` array.
|
||||
|
||||
We'll also import our `HeroesComponent` and add it to our `declarations` array.
|
||||
|
||||
+makeExample('toh-5/ts/app/app.module.2.ts', '', 'app/app.module.ts')(format=".")
|
||||
|
||||
:marked
|
||||
### Router Outlet
|
||||
|
||||
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 `<router-outlet>` marker tags to the bottom of the template.
|
||||
`RouterOutlet` is one of the directives provided by the `RouterModule`.
|
||||
The router displays each component immediately below the `<router-outlet>` 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.
|
||||
We bind the `RouterLink` directive (another of the `RouterModule` directives) to a string
|
||||
that tells the router where to navigate when the user clicks the link.
|
||||
|
||||
Since our link is not dynamic, we define a *routing instruction* with a **one-time binding** to our route **path**.
|
||||
Looking back at the route configuration, we confirm that `'/heroes'` is the path of the route to the `HeroesComponent`.
|
||||
.l-sub-section
|
||||
:marked
|
||||
For more dynamic router links, 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.
|
||||
.l-sub-section
|
||||
:marked
|
||||
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`,
|
||||
and now we see the list of heroes. We are navigating at last!
|
||||
|
||||
At this stage, our `AppComponent` looks like this.
|
||||
+makeExample('toh-5/ts/app/app.component.2.ts',null, 'app/app.component.ts (v2)')
|
||||
:marked
|
||||
The *AppComponent* is now attached to a router and displaying routed views.
|
||||
For this reason and to distinguish it from other kinds of components,
|
||||
we call this type of component a *Router Component*.
|
||||
|
||||
|
||||
: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.routing.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 `Routes` array of definitions.
|
||||
+makeExample('toh-5/ts/app/app.routing.2.ts','dashboard-route', 'app/app.routing.ts (Dashboard route)')(format=".")
|
||||
|
||||
:marked
|
||||
We also need to add the `DashboardComponent` to our root NgModule's `declarations`.
|
||||
|
||||
+makeExample('toh-5/ts/app/app.module.3.ts','dashboard-declaration', 'app/app.module.ts (Dashboard declaration)')(format=".")
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
**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 can use a redirect route to make this happen.
|
||||
|
||||
+makeExample('toh-5/ts/app/app.routing.2.ts','redirect-route', 'app/app.routing.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.3.ts','template', 'app/app.component.ts (template)')(format=".")
|
||||
.l-sub-section
|
||||
:marked
|
||||
We nestled the two links within `<nav>` tags.
|
||||
They don't do anything yet but they'll be convenient when we style the links a little later in the chapter.
|
||||
:marked
|
||||
Refresh the browser. The app displays the dashboard and
|
||||
we can navigate between the dashboard and the heroes.
|
||||
|
||||
## Dashboard Top Heroes
|
||||
Let’s spice up the dashboard by displaying the top four heroes at a glance.
|
||||
|
||||
Replace the `template` metadata with a `templateUrl` property that points to a new
|
||||
template file.
|
||||
|
||||
+makeExample('toh-5/ts/app/dashboard.component.ts', 'template-url', 'app/dashboard.component.ts (templateUrl)')(format=".")
|
||||
.l-sub-section
|
||||
:marked
|
||||
We specify the path _all the way back to the application root_ — `app/` in this case —
|
||||
because Angular doesn't support relative paths _by default_.
|
||||
We _can_ switch to [component-relative paths](../cookbook/component-relative-paths.html) if we prefer.
|
||||
:marked
|
||||
Create that file with these contents:
|
||||
+makeExample('toh-5/ts/app/dashboard.component.html', null, 'app/dashboard.component.html')(format=".")
|
||||
:marked
|
||||
We use `*ngFor` once again to iterate over a list of heroes and display their names.
|
||||
We added extra `<div>` elements to help with styling later in this chapter.
|
||||
|
||||
There's a `(click)` binding to a `gotoDetail` method we haven't written yet and
|
||||
we're displaying a list of heroes that we don't have.
|
||||
We have work to do, starting with those heroes.
|
||||
|
||||
### Share the *HeroService*
|
||||
|
||||
We'd like to re-use the `HeroService` to populate the component's `heroes` array.
|
||||
|
||||
Recall earlier in the chapter that we removed the `HeroService` from the `providers` array of the `HeroesComponent`
|
||||
and added it to the `providers` array of the root `NgModule`.
|
||||
|
||||
That move created a singleton `HeroService` instance, available to *all* components of the application.
|
||||
Angular will inject `HeroService` and we'll use it here in the `DashboardComponent`.
|
||||
|
||||
### Get heroes
|
||||
Open the `dashboard.component.ts` and add the requisite `import` statements.
|
||||
+makeExample('toh-5/ts/app/dashboard.component.2.ts','imports', 'app/dashboard.component.ts (imports)')(format=".")
|
||||
:marked
|
||||
We need `OnInit` interface because we'll initialize the heroes in the `ngOnInit` method as we've done before.
|
||||
We need the `Hero` and `HeroService` symbols in order to reference those types.
|
||||
|
||||
Now implement the `DashboardComponent` class like this:
|
||||
+makeExample('toh-5/ts/app/dashboard.component.2.ts','component', 'app/dashboard.component.ts (class)')
|
||||
|
||||
:marked
|
||||
We saw this kind of logic before in the `HeroesComponent`.
|
||||
* create a `heroes` array property
|
||||
* inject the `HeroService` in the constructor and hold it in a private `heroService` field.
|
||||
* call the service to get heroes inside the Angular `ngOnInit` lifecycle hook.
|
||||
|
||||
The noteworthy differences: we cherry-pick four heroes (2nd, 3rd, 4th, and 5th) with *slice*
|
||||
and stub the `gotoDetail` method until we're ready to implement it.
|
||||
|
||||
Refresh the browser and see four heroes in the new dashboard.
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Navigate to Hero Details
|
||||
|
||||
Although we display the details of a selected hero at the bottom of the `HeroesComponent`,
|
||||
we don't yet *navigate* to the `HeroDetailComponent` in the three ways specified in our requirements:
|
||||
1. from the *Dashboard* to a selected hero.
|
||||
1. from the *Heroes* list to a selected hero.
|
||||
1. from a "deep link" URL pasted into the browser address bar.
|
||||
|
||||
Adding a `'HeroDetail'` route seem an obvious place to start.
|
||||
|
||||
### Routing to a hero detail
|
||||
|
||||
We'll add a route to the `HeroDetailComponent` in the `app.routing.ts` where our other routes are configured.
|
||||
|
||||
The new route is a bit unusual in that we must tell the `HeroDetailComponent` *which hero to show*.
|
||||
We didn't have to tell the `HeroesComponent` or the `DashboardComponent` anything.
|
||||
|
||||
At the moment the parent `HeroesComponent` sets the component's `hero` property to a hero object with a binding like this.
|
||||
code-example(format='').
|
||||
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
|
||||
:marked
|
||||
That clearly won't work in any of our routing scenarios.
|
||||
Certainly not the last one; we can't embed an entire hero object in the URL! Nor would we want to.
|
||||
|
||||
### Parameterized route
|
||||
We *can* add the hero's `id` to the URL. When routing to the hero whose `id` is 11, we could expect to see an URL such as this:
|
||||
code-example(format='').
|
||||
/detail/11
|
||||
:marked
|
||||
The `/detail/` part of that URL is constant. The trailing numeric `id` part changes from hero to hero.
|
||||
We need to represent that variable part of the route with a *parameter* (or *token*) that stands for the hero's `id`.
|
||||
|
||||
### Configure a Route with a Parameter
|
||||
|
||||
Here's the *route definition* we'll use.
|
||||
+makeExample('toh-5/ts/app/app.routing.2.ts','hero-detail-route', 'app/app.routing.ts (route to HeroDetailComponent)')(format=".")
|
||||
:marked
|
||||
The colon (:) in the path indicates that `:id` is a placeholder to be filled with a specific hero `id`
|
||||
when navigating to the `HeroDetailComponent`.
|
||||
.l-sub-section
|
||||
:marked
|
||||
Of course we have to import the `HeroDetailComponent` before we create this route:
|
||||
+makeExample('toh-5/ts/app/app.routing.2.ts','hero-detail-import')(format=".")
|
||||
:marked
|
||||
Add the `HeroDetailComponent` to our root NgModule's `declarations`.
|
||||
|
||||
+makeExample('toh-5/ts/app/app.module.3.ts','hero-detail-declaration', 'app/app.module.ts (Hero Detail declaration)')(format=".")
|
||||
|
||||
:marked
|
||||
We're finished with the application routes.
|
||||
|
||||
We won'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* whether that hero is displayed on the dashboard or in the heroes list.
|
||||
|
||||
We'll get to those *hero* clicks later in the chapter.
|
||||
There's no point in working on them until the `HeroDetailComponent`
|
||||
is ready to be navigated *to*.
|
||||
|
||||
That will require an `HeroDetailComponent` overhaul.
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Revise the *HeroDetailComponent*
|
||||
|
||||
Before we rewrite the `HeroDetailComponent`, let's review what it looks like now:
|
||||
+makeExample('toh-4/ts/app/hero-detail.component.ts', null, 'app/hero-detail.component.ts (current)')
|
||||
:marked
|
||||
The template won't change. We'll display a hero the same way. The big changes are driven by how we get the hero.
|
||||
|
||||
We will 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`.
|
||||
|
||||
We need an import statement to reference the `ActivatedRoute` and `Params` types.
|
||||
+makeExample('toh-5/ts/app/hero-detail.component.ts', 'import-activated-route')(format=".")
|
||||
:marked
|
||||
We import the `HeroService`so we can fetch a hero.
|
||||
+makeExample('toh-5/ts/app/hero-detail.component.ts', 'import-hero-service')(format=".")
|
||||
:marked
|
||||
We import the `OnInit` interface because we'll call the `HeroService` inside the `ngOnInit` component lifecycle hook.
|
||||
+makeExample('toh-5/ts/app/hero-detail.component.ts', 'import-oninit')(format=".")
|
||||
:marked
|
||||
We inject the both the `ActivatedRoute` service and the `HeroService` into the constructor as we've done before,
|
||||
making private variables for both:
|
||||
+makeExample('toh-5/ts/app/hero-detail.component.ts', 'ctor', 'app/hero-detail.component.ts (constructor)')(format=".")
|
||||
:marked
|
||||
We tell the class that we want to implement the `OnInit` interface.
|
||||
+makeExample('toh-5/ts/app/hero-detail.component.ts', 'implement')(format=".")
|
||||
:marked
|
||||
Inside the `ngOnInit` lifecycle hook, we use the `params` observable to
|
||||
extract the `id` parameter value from the `ActivateRoute` service
|
||||
and use the `HeroService` to fetch the hero with that `id`.
|
||||
+makeExample('toh-5/ts/app/hero-detail.component.ts', 'ng-oninit', 'app/hero-detail.component.ts (ngOnInit)')(format=".")
|
||||
:marked
|
||||
Notice how we extract the `id` by calling the `forEach` method
|
||||
which will deliver our array of route parameters.
|
||||
+makeExample('toh-5/ts/app/hero-detail.component.ts', 'get-id')(format=".")
|
||||
:marked
|
||||
The hero `id` is a number. Route parameters are *always strings*.
|
||||
So we convert the route parameter value to a number with the JavaScript (+) operator.
|
||||
|
||||
### Add *HeroService.getHero*
|
||||
The problem with this bit of code is that `HeroService` doesn't have a `getHero` method!
|
||||
We better fix that quickly before someone notices that we broke the app.
|
||||
|
||||
Open `HeroService` and add a `getHero` method that filters the heroes list from `getHeroes` by `id`:
|
||||
+makeExample('toh-5/ts/app/hero.service.ts', 'get-hero', 'app/hero.service.ts (getHero)')(format=".")
|
||||
:marked
|
||||
Return to the `HeroDetailComponent` to clean up loose ends.
|
||||
|
||||
### Find our way back
|
||||
|
||||
We can navigate *to* the `HeroDetailComponent` in several ways.
|
||||
How do we navigate somewhere else when we're done?
|
||||
|
||||
The user could click one of the two links in the `AppComponent`. Or click the browser's back button.
|
||||
We'll add a third option, a `goBack` method that navigates backward one step in the browser's history stack
|
||||
|
||||
+makeExample('toh-5/ts/app/hero-detail.component.ts', 'go-back', 'app/hero-detail.component.ts (goBack)')(format=".")
|
||||
.l-sub-section
|
||||
:marked
|
||||
Going back too far could take us out of the application.
|
||||
That's acceptable in a demo. We'd guard against it in a real application,
|
||||
perhaps with the [*CanDeactivate* guard](../api/router/index/CanDeactivate-interface.html).
|
||||
:marked
|
||||
Then we wire this method with an event binding to a *Back* button that we add to the bottom of the component template.
|
||||
+makeExample('toh-5/ts/app/hero-detail.component.html', 'back-button')(format=".")
|
||||
:marked
|
||||
Modifing the template to add this button spurs us to take one more incremental improvement and migrate the template to its own file
|
||||
called `hero-detail.component.html`
|
||||
+makeExample('toh-5/ts/app/hero-detail.component.html', '', 'app/hero-detail.component.html')(format=".")
|
||||
:marked
|
||||
We update the component metadata with a `templateUrl` pointing to the template file that we just created.
|
||||
+makeExample('toh-5/ts/app/hero-detail.component.ts', 'template-url', 'app/hero-detail.component.ts (templateUrl)')(format=".")
|
||||
:marked
|
||||
Here's the (nearly) finished `HeroDetailComponent`:
|
||||
+makeExample('toh-5/ts/app/hero-detail.component.ts', 'v2', 'app/hero-detail.component.ts (latest)')(format=".")
|
||||
|
||||
.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.
|
||||
|
||||
In the dashboard template we bound each hero's click event to the `gotoDetail` method, passing along the selected `hero` entity.
|
||||
+makeExample('toh-5/ts/app/dashboard.component.html','click', 'app/dashboard.component.html (click binding)')(format=".")
|
||||
:marked
|
||||
We stubbed the `gotoDetail` method when we rewrote the `DashboardComponent`.
|
||||
Now we give it a real implementation.
|
||||
+makeExample('toh-5/ts/app/dashboard.component.ts','goto-detail', 'app/dashboard.component.ts (gotoDetail)')(format=".")
|
||||
:marked
|
||||
The `gotoDetail` method navigates in two steps:
|
||||
1. set a route *link parameters array*
|
||||
1. pass the array to the router's navigate method.
|
||||
|
||||
We wrote *link parameters arrays* in the `AppComponent` for the navigation links.
|
||||
Those arrays had only one element, the path of the destination route.
|
||||
|
||||
This array has two elements, the ***path*** of the destination route and a ***route parameter***
|
||||
with an `id` field set to the value of the selected hero's `id`.
|
||||
|
||||
The two array items align with the ***path*** and ***:id*** token in the parameterized `HeroDetail` route configuration we added to `app.routing.ts` earlier in the chapter.
|
||||
+makeExample('toh-5/ts/app/app.routing.2.ts','hero-detail-route', 'app/app.routing.ts (hero detail route)')(format=".")
|
||||
:marked
|
||||
The `DashboardComponent` doesn't have the router yet. We obtain it in the usual way:
|
||||
import the `router` reference and inject it in the constructor (along with the `HeroService`):
|
||||
|
||||
+makeExample('toh-5/ts/app/dashboard.component.ts','import-router', 'app/dashboard.component.ts (excerpts)')(format=".")
|
||||
+makeExample('toh-5/ts/app/dashboard.component.ts','ctor')(format=".")
|
||||
:marked
|
||||
Refresh the browser and select a hero from the dashboard; the app should navigate directly to that hero’s details.
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Select a Hero in the *HeroesComponent*
|
||||
We'll do something similar in the `HeroesComponent`.
|
||||
|
||||
That component's 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/app/app.component.ts','template', 'app/heroes.component.ts (current template)')(format=".")
|
||||
:marked
|
||||
Delete the last line of the template with the `<my-hero-detail>` tags.
|
||||
|
||||
We'll no longer show the full `HeroDetailComponent` here.
|
||||
We're going to display the hero detail on its own page and route to it as we did in the dashboard.
|
||||
|
||||
But we'll throw in a small twist for variety.
|
||||
When the user selects a hero from the list, we *won't* go to the detail page.
|
||||
We'll show a *mini-detail* on *this* page instead and make the user 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 `<my-hero-detail>` used to be:
|
||||
+makeExample('toh-5/ts/app/heroes.component.html','mini-detail')(format=".")
|
||||
:marked
|
||||
After clicking a hero, the user 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 *UpperCasePipe*
|
||||
|
||||
Notice that the hero's name is displayed in CAPITAL LETTERS. That's the effect of the `UpperCasePipe`
|
||||
that we slipped into the interpolation binding. Look for it right after the pipe operator ( | ).
|
||||
+makeExample('toh-5/ts/app/heroes.component.html','pipe')(format=".")
|
||||
:marked
|
||||
Pipes are a good way to format strings, currency amounts, dates and other display data.
|
||||
Angular ships with several pipes and we can write our own.
|
||||
.l-sub-section
|
||||
:marked
|
||||
Learn about pipes in the [Pipes](../guide/pipes.html) chapter.
|
||||
:marked
|
||||
### Move content out of the component file
|
||||
We are not done. We still have to update the component class to support navigation to the
|
||||
`HeroDetailComponent` when the user clicks the *View Details* button.
|
||||
|
||||
This component file is really big. Most of it is either template or CSS styles.
|
||||
It's difficult to find the component logic amidst the noise of HTML and CSS.
|
||||
|
||||
Let's migrate the template and the styles to their own files before we make any more changes:
|
||||
1. *Cut-and-paste* the template contents into a new `heroes.component.html` file.
|
||||
1. *Cut-and-paste* the styles contents into a new `heroes.component.css` file.
|
||||
1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.
|
||||
|
||||
+makeExample('toh-5/ts/app/heroes.component.ts', 'metadata', 'app/heroes.component.ts (revised metadata)')(format=".")
|
||||
:marked
|
||||
Now we can see what's going on as we update the component class along the same lines as the dashboard:
|
||||
1. Import the `router`
|
||||
1. Inject the `router` in the constructor (along with the `HeroService`)
|
||||
1. Implement the `gotoDetail` method by calling the `router.navigate` method
|
||||
with a two-part `HeroDetail` *link parameters array*.
|
||||
|
||||
Here's the revised component class:
|
||||
+makeExample('toh-5/ts/app/heroes.component.ts', 'class', 'app/heroes.component.ts (class)')
|
||||
:marked
|
||||
Refresh the browser and start clicking.
|
||||
We can navigate around the app, from the dashboard to hero details and back,
|
||||
for heroes list to the mini-detail to the hero details and back to the heroes again.
|
||||
We can jump back and forth between the dashboard and the heroes.
|
||||
|
||||
We've met all of the navigational requirements that propelled this chapter.
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Styling the App
|
||||
The app is functional but pretty ugly.
|
||||
Our creative designer team provided some CSS files to make it look better.
|
||||
|
||||
### A Dashboard with Style
|
||||
The designers think we should display the dashboard heroes in a row of rectangles.
|
||||
They've given us ~60 lines of CSS for this purpose including some simple media queries for responsive design.
|
||||
|
||||
If we paste these ~60 lines into the component `styles` metadata,
|
||||
they'll completely obscure the component logic.
|
||||
Let's not do that. It's easier to edit CSS in a separate `*.css` file anyway.
|
||||
|
||||
Add a `dashboard.component.css` file to the `app` folder and reference
|
||||
that file in the component metadata's `styleUrls` array property like this:
|
||||
+makeExample('toh-5/ts/app/dashboard.component.ts', 'css', 'app/dashboard.component.ts (styleUrls)')(format=".")
|
||||
:marked
|
||||
.l-sub-section
|
||||
:marked
|
||||
The `styleUrls` property is an array of style file names (with paths).
|
||||
We could list multiple style files from different locations if we needed them.
|
||||
As with `templateUrl`, we must specify the path _all the way back to the application root_.
|
||||
:marked
|
||||
### Stylish Hero Details
|
||||
The designers also gave us CSS styles specifically for the `HeroDetailComponent`.
|
||||
|
||||
Add a `hero-detail.component.css` to the `app` folder and refer to that file inside
|
||||
the `styleUrls` array as we did for `DashboardComponent`.
|
||||
|
||||
Here's the content for the aforementioned component CSS files.
|
||||
+makeTabs(
|
||||
`toh-5/ts/app/hero-detail.component.css,
|
||||
toh-5/ts/app/dashboard.component.css`,
|
||||
null,
|
||||
`app/hero-detail.component.css,
|
||||
app/dashboard.component.css`)
|
||||
:marked
|
||||
### Style the Navigation Links
|
||||
The designers gave us CSS to make the navigation links in our `AppComponent` look more like selectable buttons.
|
||||
We cooperated by surrounding those links in `<nav>` tags.
|
||||
|
||||
Add a `app.component.css` file to the `app` folder with the following content.
|
||||
+makeExample('toh-5/ts/app/app.component.css', '', 'app/app.component.css (navigation styles)')
|
||||
.l-sub-section
|
||||
:marked
|
||||
**The *routerLinkActive* directive**
|
||||
|
||||
The Angular Router provides a `routerLinkActive` directive we can use to
|
||||
add a class to the HTML navigation element whose route matches the active route.
|
||||
All we have to do is define the style for it. Sweet!
|
||||
+makeExample('toh-5/ts/app/app.component.ts', 'template', 'app/app.component.ts (active router links)')(format=".")
|
||||
:marked
|
||||
Set the `AppComponent`’s `styleUrls` property to this CSS file.
|
||||
+makeExample('toh-5/ts/app/app.component.ts','style-urls', 'app/app.component.ts (styleUrls)')(format=".")
|
||||
:marked
|
||||
### Global application styles
|
||||
When we add styles to a component, we're keeping everything a component needs
|
||||
— HTML, the CSS, the code — together in one convenient place.
|
||||
It's pretty easy to package it all up and re-use the component somewhere else.
|
||||
|
||||
We can also create styles at the *application level* outside of any component.
|
||||
|
||||
Our designers provided some basic styles to apply to elements across the entire app.
|
||||
These correspond to the full set of master styles that we
|
||||
introduced earlier (see
|
||||
[QuickStart, "Add some style"](../quickstart.html#!#add-some-style)).
|
||||
Here is an excerpt.
|
||||
|
||||
+makeExample('toh-5/ts/styles.1.css', 'toh-excerpt', 'styles.css (app styles excerpt)')(format=".")
|
||||
|
||||
- var styles_css = 'https://raw.githubusercontent.com/angular/angular.io/master/public/docs/_examples/styles.css'
|
||||
|
||||
:marked
|
||||
Add a new file named `styles.css` in the root folder, if there isn't one already.
|
||||
Ensure that it contains the [master styles given here](!{styles_css}).
|
||||
|
||||
If necessary, also edit `index.html` to refer to this stylesheet.
|
||||
+makeExample('toh-5/ts/index.html','css', 'index.html (link ref)')(format=".")
|
||||
:marked
|
||||
Look at the app now. Our dashboard, heroes, and navigation links are styling!
|
||||
|
||||
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 chapter.
|
||||
Verify that we have the following structure:
|
||||
|
||||
.filetree
|
||||
.file angular2-tour-of-heroes
|
||||
.children
|
||||
.file app
|
||||
.children
|
||||
.file app.component.ts
|
||||
.file app.component.css
|
||||
.file app.module.ts
|
||||
.file app.routing.ts
|
||||
.file dashboard.component.css
|
||||
.file dashboard.component.html
|
||||
.file dashboard.component.ts
|
||||
.file hero.ts
|
||||
.file hero-detail.component.css
|
||||
.file hero-detail.component.html
|
||||
.file hero-detail.component.ts
|
||||
.file hero.service.ts
|
||||
.file heroes.component.css
|
||||
.file heroes.component.html
|
||||
.file heroes.component.ts
|
||||
.file main.ts
|
||||
.file mock-heroes.ts
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file styles.css
|
||||
.file systemjs.config.json
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Recap
|
||||
|
||||
### The Road Behind
|
||||
We travelled a great distance in this chapter.
|
||||
- We added the Angular *Component Router* to navigate among different components.
|
||||
- We learned how to create router links to represent navigation menu items.
|
||||
- We used router parameters to navigate to the details of user selected hero.
|
||||
- We shared the `HeroService` among multiple components.
|
||||
- We moved HTML and CSS out of the component file and into their own files.
|
||||
- We added the `uppercase` pipe to format data.
|
||||
|
||||
### The Road Ahead
|
||||
We have much of the foundation we need to build an application.
|
||||
We're still missing a key piece: remote data access.
|
||||
|
||||
In the next chapter,
|
||||
we’ll replace our mock data with data retrieved from a server using http.
|
||||
|
|
@ -21,6 +21,7 @@ guide/structural-directives.jade
|
|||
guide/template-syntax.jade
|
||||
glossary.jade
|
||||
quickstart.jade
|
||||
tutorial/toh-pt5.jade
|
||||
tutorial/toh-pt6.jade"
|
||||
|
||||
function cacheRefresh() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue