docs(router): document new router and samples - phase 2
This commit is contained in:
parent
596825a8b1
commit
2842058a30
|
@ -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) {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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).
|
||||
|
|
Loading…
Reference in New Issue