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) {
|
function crisisCenterEdit(index, shouldSave) {
|
||||||
var page = getPageStruct();
|
var page = getPageStruct();
|
||||||
var crisisEle, crisisText;
|
var crisisEle, crisisText;
|
||||||
page.crisisHref.click().then(function () {
|
page.crisisHref.click()
|
||||||
|
.then(function () {
|
||||||
crisisEle = page.crisisList.get(index);
|
crisisEle = page.crisisList.get(index);
|
||||||
return crisisEle.getText();
|
return crisisEle.getText();
|
||||||
}).then(function (text) {
|
}).then(function (text) {
|
||||||
|
|
|
@ -14,7 +14,7 @@ import { HeroListComponent } from './hero-list.component';
|
||||||
selector: 'my-app',
|
selector: 'my-app',
|
||||||
// #docregion template
|
// #docregion template
|
||||||
template: `
|
template: `
|
||||||
<h1>Component Router</h1>
|
<h1>Component Router (Deprecated)</h1>
|
||||||
<nav>
|
<nav>
|
||||||
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
|
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
|
||||||
<a [routerLink]="['Heroes']">Heroes</a>
|
<a [routerLink]="['Heroes']">Heroes</a>
|
||||||
|
|
|
@ -26,7 +26,7 @@ import {HeroService} from './heroes/hero.service';
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'my-app',
|
selector: 'my-app',
|
||||||
template: `
|
template: `
|
||||||
<h1>Component Router</h1>
|
<h1>Component Router (Deprecated)</h1>
|
||||||
<nav>
|
<nav>
|
||||||
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
|
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
|
||||||
<a [routerLink]="['Heroes']">Heroes</a>
|
<a [routerLink]="['Heroes']">Heroes</a>
|
||||||
|
|
|
@ -35,7 +35,7 @@ import {HeroService} from './heroes/hero.service';
|
||||||
*/
|
*/
|
||||||
// #docregion template
|
// #docregion template
|
||||||
template: `
|
template: `
|
||||||
<h1 class="title">Component Router</h1>
|
<h1 class="title">Component Router (Deprecated)</h1>
|
||||||
<nav>
|
<nav>
|
||||||
<a [routerLink]="['CrisisCenter', 'CrisisList']">Crisis Center</a>
|
<a [routerLink]="['CrisisCenter', 'CrisisList']">Crisis Center</a>
|
||||||
<a [routerLink]="['CrisisCenter', 'CrisisDetail', {id:1}]">Dragon Crisis</a>
|
<a [routerLink]="['CrisisCenter', 'CrisisDetail', {id:1}]">Dragon Crisis</a>
|
||||||
|
|
|
@ -14,7 +14,7 @@ import {HeroService} from './heroes/hero.service';
|
||||||
selector: 'my-app',
|
selector: 'my-app',
|
||||||
// #docregion template
|
// #docregion template
|
||||||
template: `
|
template: `
|
||||||
<h1 class="title">Component Router</h1>
|
<h1 class="title">Component Router (Deprecated)</h1>
|
||||||
<nav>
|
<nav>
|
||||||
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
|
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
|
||||||
<a [routerLink]="['Heroes']">Heroes</a>
|
<a [routerLink]="['Heroes']">Heroes</a>
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<!-- #docregion base-href -->
|
<!-- #docregion base-href -->
|
||||||
<base href="/">
|
<base href="/">
|
||||||
<!-- #enddocregion base-href -->
|
<!-- #enddocregion base-href -->
|
||||||
<title>Router Sample v.1</title>
|
<title>Router (Deprecated) Sample v.1</title>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<base href="/">
|
<base href="/">
|
||||||
<title>Router Sample v.2</title>
|
<title>Router (Deprecated) Sample v.2</title>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<base href="/">
|
<base href="/">
|
||||||
<title>Router Sample v.3</title>
|
<title>Router (Deprecated) Sample v.3</title>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<head>
|
<head>
|
||||||
<!-- Set the base href -->
|
<!-- Set the base href -->
|
||||||
<base href="/">
|
<base href="/">
|
||||||
<title>Router Sample</title>
|
<title>Router (Deprecated) Sample</title>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
|
|
@ -92,7 +92,8 @@ describe('Router', function () {
|
||||||
function crisisCenterEdit(index, shouldSave) {
|
function crisisCenterEdit(index, shouldSave) {
|
||||||
var page = getPageStruct();
|
var page = getPageStruct();
|
||||||
var crisisEle, crisisText;
|
var crisisEle, crisisText;
|
||||||
page.crisisHref.click().then(function () {
|
page.crisisHref.click()
|
||||||
|
.then(function () {
|
||||||
crisisEle = page.crisisList.get(index);
|
crisisEle = page.crisisList.get(index);
|
||||||
return crisisEle.getText();
|
return crisisEle.getText();
|
||||||
}).then(function (text) {
|
}).then(function (text) {
|
||||||
|
|
|
@ -40,17 +40,17 @@ include ../_util-fns
|
||||||
|
|
||||||
We'll learn many router details in this chapter which covers
|
We'll learn many router details in this chapter which covers
|
||||||
|
|
||||||
* Setting the [base href](#base-href)
|
* setting the [base href](#base-href)
|
||||||
* Importing from the [router library](#import)
|
* importing from the [router library](#import)
|
||||||
* [configuring a router](#route-config)
|
* [configuring a router](#route-config)
|
||||||
* the [link parameters array](#link-parameters-array) that propels router navigation
|
* the [link parameters array](#link-parameters-array) that propels router navigation
|
||||||
* navigating when the user clicks a data-bound [RouterLink](#router-link)
|
* navigating when the user clicks a data-bound [RouterLink](#router-link)
|
||||||
* navigating under [program control](#navigate)
|
* 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
|
* creating a [child router](#child-router) with its own routes
|
||||||
* setting a [default route](#default)
|
* setting a [default route](#default)
|
||||||
* confirming or canceling navigation with [router lifecycle hooks](#lifecycle-hooks)
|
* 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)
|
* 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
|
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
|
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.
|
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
|
### Setting the route parameters object
|
||||||
|
|
||||||
We're navigating to the `HeroDetailComponent` where we expect to see the details of the selected hero.
|
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>
|
<a id="query-parameter"></a>
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Milestone #4: Query Parameters
|
## 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*.
|
as we do when navigating to the `HeroDetailComponent` in order to view-and-edit the hero with *id:15*.
|
||||||
code-example(format="." language="bash").
|
code-example(format="." language="bash").
|
||||||
localhost:3000/hero/15
|
localhost:3000/hero/15
|
||||||
|
@ -1060,7 +1060,7 @@ figure.image-display
|
||||||
* the value is optional.
|
* the value is optional.
|
||||||
* the value is complex and/or multi-variate.
|
* the value is complex and/or multi-variate.
|
||||||
|
|
||||||
<a id="route-parameters-object"></a>
|
<a id="positional-parameters-object"></a>
|
||||||
### Route parameters object
|
### Route parameters object
|
||||||
When navigating to the `HeroDetailComponent` we specified the `id` of the hero-to-edit in the
|
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).
|
*route parameters object* and made it the second item of the [*link parameters array*](#link-parameters-array).
|
||||||
|
|
Loading…
Reference in New Issue