docs(router): fix plunker preview image; move plunker link to top

This commit is contained in:
Ward Bell 2016-02-28 13:55:37 -08:00
parent d59b05adde
commit 12500ebc29
4 changed files with 22 additions and 17 deletions

View File

@ -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;

View File

@ -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

View File

@ -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