docs(router): fix plunker preview image; move plunker link to top
This commit is contained in:
parent
d59b05adde
commit
12500ebc29
|
@ -125,7 +125,7 @@ nav a.router-link-active {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: small;
|
font-size: small;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 0.8em 0.7em 0em 0.7em;
|
padding: 0.8em 0.7em 0 0.7em;
|
||||||
background-color: #607D8B;
|
background-color: #607D8B;
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
@ -1,8 +1,22 @@
|
||||||
include ../../../../_includes/_util-fns
|
include ../../../../_includes/_util-fns
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
In most applications, users navigate from one [view](./glossary.html#view) to the next
|
The Angular ***Component Router*** enables navigation from one [view](./glossary.html#view) to the next
|
||||||
as they perform application tasks.
|
as users perform application tasks.
|
||||||
|
|
||||||
|
We cover the router's primary features in this chapter, illustrating them through the evolution
|
||||||
|
of a small application that we can [run live](/resources/live-examples/router/ts/plnkr.html).
|
||||||
|
.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:
|
||||||
|
:marked
|
||||||
|
|
||||||
|
|
||||||
|
.l-main-section
|
||||||
|
:marked
|
||||||
|
## Overview
|
||||||
|
|
||||||
The browser is a familiar model of application navigation.
|
The browser is a familiar model of application navigation.
|
||||||
We enter a URL in the address bar and the browser navigates to a corresponding page.
|
We enter a URL in the address bar and the browser navigates to a corresponding page.
|
||||||
|
@ -10,7 +24,7 @@ include ../../../../_includes/_util-fns
|
||||||
We click the browser's back and forward buttons and the browser navigates
|
We click the browser's back and forward buttons and the browser navigates
|
||||||
backward and forward through the history of pages we've seen.
|
backward and forward through the history of pages we've seen.
|
||||||
|
|
||||||
The Angular "**Component Router**" ("the router") borrows from this model.
|
The Angular ***Component Router*** ("the router") borrows from this model.
|
||||||
It can interpret a browser URL as an instruction
|
It can interpret a browser URL as an instruction
|
||||||
to navigate to a client-generated view and pass optional parameters along to the supporting view component
|
to navigate to a client-generated view and pass optional parameters along to the supporting view component
|
||||||
to help it decide what specific content to present.
|
to help it decide what specific content to present.
|
||||||
|
@ -37,14 +51,6 @@ include ../../../../_includes/_util-fns
|
||||||
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
|
||||||
up to a modular, multi-view design with child routes.
|
up to a modular, multi-view design with child routes.
|
||||||
|
|
||||||
Try that [live final version](/resources/live-examples/router/ts/plnkr.html).
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
In plunker, to see routing changes in the browser address bar,
|
|
||||||
pop out the preview window by clicking this blue button in the upper right corner:
|
|
||||||
|
|
||||||
<img src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" width='200'/>
|
|
||||||
:marked
|
|
||||||
But first, an overview of router basics.
|
But first, an overview of router basics.
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
|
|
|
@ -20,11 +20,10 @@ figure.image-display
|
||||||
:marked
|
:marked
|
||||||
[Run the live example](/resources/live-examples/toh-5/ts/plnkr.html).
|
[Run the live example](/resources/live-examples/toh-5/ts/plnkr.html).
|
||||||
.l-sub-section
|
.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
|
:marked
|
||||||
In plunker, to see routing changes in the browser address bar,
|
To see the URL changes in the browser address bar,
|
||||||
pop out the preview window by clicking this blue button in the upper right corner:
|
pop out the preview window by clicking the blue 'X' button in the upper right corner:
|
||||||
|
|
||||||
<img src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" width='200'/>
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 6.9 KiB |
Loading…
Reference in New Issue