diff --git a/public/docs/_examples/styles.css b/public/docs/_examples/styles.css index b5fddefe30..054b417f6f 100644 --- a/public/docs/_examples/styles.css +++ b/public/docs/_examples/styles.css @@ -125,7 +125,7 @@ nav a.router-link-active { display: inline-block; font-size: small; color: white; - padding: 0.8em 0.7em 0em 0.7em; + padding: 0.8em 0.7em 0 0.7em; background-color: #607D8B; line-height: 1em; position: relative; diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index 74b5c4bb89..4548b606e5 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -1,16 +1,30 @@ include ../../../../_includes/_util-fns :marked - In most applications, users navigate from one [view](./glossary.html#view) to the next - as they perform application tasks. - + The Angular ***Component Router*** enables navigation from one [view](./glossary.html#view) to the next + 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. We enter a URL in the address bar and the browser navigates to a corresponding page. We click links on the page and the browser navigates to a new page. We click the browser's back and forward buttons and the browser navigates 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 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. @@ -37,14 +51,6 @@ include ../../../../_includes/_util-fns 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. - 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: - - pop out the window -:marked But first, an overview of router basics. .l-main-section diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index ae17d4b68c..167e565e56 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -20,11 +20,10 @@ figure.image-display :marked [Run the live example](/resources/live-examples/toh-5/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 - 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: - - pop out the window + 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: .l-main-section :marked diff --git a/public/resources/images/devguide/plunker-separate-window-button.png b/public/resources/images/devguide/plunker-separate-window-button.png index c428796583..bc8cc9ae28 100644 Binary files a/public/resources/images/devguide/plunker-separate-window-button.png and b/public/resources/images/devguide/plunker-separate-window-button.png differ