docs(router): document new router and samples - phase 2

This commit is contained in:
Ward Bell 2016-05-03 12:19:50 -06:00
parent 596825a8b1
commit 2842058a30
11 changed files with 20 additions and 18 deletions

View File

@ -92,7 +92,8 @@ describe('Router', function () {
function crisisCenterEdit(index, shouldSave) {
var page = getPageStruct();
var crisisEle, crisisText;
page.crisisHref.click().then(function () {
page.crisisHref.click()
.then(function () {
crisisEle = page.crisisList.get(index);
return crisisEle.getText();
}).then(function (text) {

View File

@ -14,7 +14,7 @@ import { HeroListComponent } from './hero-list.component';
selector: 'my-app',
// #docregion template
template: `
<h1>Component Router</h1>
<h1>Component Router (Deprecated)</h1>
<nav>
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
<a [routerLink]="['Heroes']">Heroes</a>

View File

@ -26,7 +26,7 @@ import {HeroService} from './heroes/hero.service';
@Component({
selector: 'my-app',
template: `
<h1>Component Router</h1>
<h1>Component Router (Deprecated)</h1>
<nav>
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
<a [routerLink]="['Heroes']">Heroes</a>

View File

@ -35,7 +35,7 @@ import {HeroService} from './heroes/hero.service';
*/
// #docregion template
template: `
<h1 class="title">Component Router</h1>
<h1 class="title">Component Router (Deprecated)</h1>
<nav>
<a [routerLink]="['CrisisCenter', 'CrisisList']">Crisis Center</a>
<a [routerLink]="['CrisisCenter', 'CrisisDetail', {id:1}]">Dragon Crisis</a>

View File

@ -14,7 +14,7 @@ import {HeroService} from './heroes/hero.service';
selector: 'my-app',
// #docregion template
template: `
<h1 class="title">Component Router</h1>
<h1 class="title">Component Router (Deprecated)</h1>
<nav>
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
<a [routerLink]="['Heroes']">Heroes</a>

View File

@ -5,7 +5,7 @@
<!-- #docregion base-href -->
<base href="/">
<!-- #enddocregion base-href -->
<title>Router Sample v.1</title>
<title>Router (Deprecated) Sample v.1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">

View File

@ -3,7 +3,7 @@
<html>
<head>
<base href="/">
<title>Router Sample v.2</title>
<title>Router (Deprecated) Sample v.2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">

View File

@ -3,7 +3,7 @@
<html>
<head>
<base href="/">
<title>Router Sample v.3</title>
<title>Router (Deprecated) Sample v.3</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">

View File

@ -4,7 +4,7 @@
<head>
<!-- Set the base href -->
<base href="/">
<title>Router Sample</title>
<title>Router (Deprecated) Sample</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">

View File

@ -92,7 +92,8 @@ describe('Router', function () {
function crisisCenterEdit(index, shouldSave) {
var page = getPageStruct();
var crisisEle, crisisText;
page.crisisHref.click().then(function () {
page.crisisHref.click()
.then(function () {
crisisEle = page.crisisList.get(index);
return crisisEle.getText();
}).then(function (text) {

View File

@ -40,17 +40,17 @@ include ../_util-fns
We'll learn many router details in this chapter which covers
* Setting the [base href](#base-href)
* Importing from the [router library](#import)
* setting the [base href](#base-href)
* importing from the [router library](#import)
* [configuring a router](#route-config)
* the [link parameters array](#link-parameters-array) that propels router navigation
* navigating when the user clicks a data-bound [RouterLink](#router-link)
* navigating under [program control](#navigate)
* embedding critical information in the URL with [route parameters](#route-parameters)
* embedding critical information in the URL with [positional parameters](#positional-parameters)
* creating a [child router](#child-router) with its own routes
* setting a [default route](#default)
* confirming or canceling navigation with [router lifecycle hooks](#lifecycle-hooks)
* passing optional information in [query parameters](#query-parameters)
* passing optional information in [matrix parameters](#matrix-parameters)
* choosing the "HTML5" or "hash" [URL style](#browser-url-styles)
We proceed in phases marked by milestones building from a simple two-pager with placeholder views
@ -604,7 +604,7 @@ code-example(format="." language="bash").
This array is similar to the *link parameters array* we met [earlier](#shell-template) in an anchor tag while
binding to the `RouterLink` directive. This time we see it in code rather than in HTML.
<a id="route-parameters"></id>
<a id="positional-parameters"></id>
### Setting the route parameters object
We're navigating to the `HeroDetailComponent` where we expect to see the details of the selected hero.
@ -1013,13 +1013,13 @@ code-example(format="").
`)
<a id="query-parameters"></a>
<a id="matrix-parameters"></a>
<a id="query-parameter"></a>
.l-main-section
:marked
## Milestone #4: Query Parameters
We use [*route parameters*](#route-parameters) to specify a *required* parameterized value *within* the route URL
We use [*route parameters*](#positional-parameters) to specify a *required* parameterized value *within* the route URL
as we do when navigating to the `HeroDetailComponent` in order to view-and-edit the hero with *id:15*.
code-example(format="." language="bash").
localhost:3000/hero/15
@ -1060,7 +1060,7 @@ figure.image-display
* the value is optional.
* the value is complex and/or multi-variate.
<a id="route-parameters-object"></a>
<a id="positional-parameters-object"></a>
### Route parameters object
When navigating to the `HeroDetailComponent` we specified the `id` of the hero-to-edit in the
*route parameters object* and made it the second item of the [*link parameters array*](#link-parameters-array).