+ + +
`, // #enddocregion template diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts index f3d8a38312..e217651033 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts @@ -17,8 +17,10 @@ import {DialogService} from '../dialog.service'; - - ++ + +
`, styles: ['input {width: 20em}'] diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts index d6fb07ddf9..2f3fd761ec 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts @@ -31,10 +31,10 @@ export class CrisisService { } var crises = [ - new Crisis(1, 'Princess Held Captive'), - new Crisis(2, 'Dragon Burning Cities'), + new Crisis(1, 'Dragon Burning Cities'), + new Crisis(2, 'Sky Rains Great White Sharks'), new Crisis(3, 'Giant Asteroid Heading For Earth'), - new Crisis(4, 'Release Deadline Looms') + new Crisis(4, 'Procrastinators Meeting Delayed Again'), ]; var crisesPromise = Promise.resolve(crises); diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts index 96627686d5..bf189d7e1c 100644 --- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts +++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts @@ -14,7 +14,9 @@ import {RouteParams, Router} from 'angular2/router'; - ++ +
`, }) diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts index eeccb1836b..b13c15c8d8 100644 --- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts +++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts @@ -14,7 +14,9 @@ import {RouteParams, Router} from 'angular2/router'; - ++ +
`, }) diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index 4548b606e5..32ccfef2e1 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -10,10 +10,8 @@ include ../../../../_includes/_util-fns 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 - - + pop out the preview window by clicking the blue 'X' button in the upper right corner. + .l-main-section :marked ## Overview @@ -289,9 +287,6 @@ figure.image-display the Angular core script. +makeExample('router/ts/index.html','router-lib')(format=".") -.l-sub-section - :marked - Internet Explorer requires additional polyfill libraries as described [below](#ie-polyfills) :marked ### Set the *<base href>* @@ -1011,7 +1006,7 @@ code-example(format="." language="bash"). For example, the `HeroListComponent` doesn't need help to display a list of heroes. But it might be nice if the previously-viewed hero were pre-selected when returning from the `HeroDetailComponent`. figure.image-display - img(src='/resources/images/devguide/router/selected-hero.png' alt="Selected hero" width="175") + img(src='/resources/images/devguide/router/selected-hero.png' alt="Selected hero") :marked That becomes possible if we can include hero Magneta's `id` in the URL when we return from the `HeroDetailComponent`, a scenario we'll pursue in a moment. @@ -1070,17 +1065,15 @@ figure.image-display :marked The application still works. Clicking "back" returns to the hero list view. - Look at the browser address bar. It should look something like this: + Look at the browser address bar. +.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 + When running in plunker, pop out the preview window by clicking the blue 'X' button in the upper right corner. +:marked + It should look something like this, depending on where you run it: code-example(format="." language="bash"). localhost:3000/heroes?id=15&foo=foo -.l-sub-section - :marked - Unfortunately, the browser address bar does not change when running the live example in plunker. - - You can take our word for it or - download the sample from within plunker, unzip it, and browse to `index.html`. - You may have to launch it in a local server such as - [http-server](https://www.npmjs.com/package/http-server) or [lite-server](https://github.com/johnpapa/lite-server). :marked The `id` value appears in the query string (`?id=15&foo=foo`), not in the URL path. The path for the "Heroes" route doesn't have an `:id` token. @@ -1130,7 +1123,7 @@ code-example(format="." language="bash"). :marked When the user navigates from the heroes list to the "Magneta" hero and back, "Magneta" appears selected: figure.image-display - img(src='/resources/images/devguide/router/selected-hero.png' alt="Selected List" width="250") + img(src='/resources/images/devguide/router/selected-hero.png' alt="Selected List" ) :marked The `foo` query string parameter is harmless and continues to be ignored. @@ -1209,20 +1202,18 @@ code-example(format="." language="bash"). .file tsconfig.json .file typings.json :marked - The top level application files are + The pertinent top level application files are +makeTabs( `router/ts/app/app.component.ts, router/ts/app/main.ts, router/ts/app/dialog.service.ts, - router/ts/index.html, - router/ts/styles.css + router/ts/index.html `, null, `app.component.ts, main.ts, dialog.service.ts, - index.html, - styles.css + index.html `) :marked @@ -1319,16 +1310,16 @@ code-example(format="." language="bash"). Let's take it a step further. This time we'll build a link parameters array that navigates from the root of the application - down to the "Princess Crisis". + down to the "Dragon Crisis". * The first item in the array identifies the parent route ('CrisisCenter'). * There are no parameters for this parent route so we're done with it. * The second item identifies the child route for details about a particular crisis ('CrisisDetail'). * The details child route requires an `id` route parameter - * We add the "Princess Crisis" id as the third item in the array (`{id:1}`) + * We add `id` of the *Dragon Crisis* as the third item in the array (`{id:1}`) It looks like this! -+makeExample('router/ts/app/app.component.3.ts', 'princess-anchor')(format=".") ++makeExample('router/ts/app/app.component.3.ts', 'Dragon-anchor')(format=".") :marked If we wanted to, we could redefine our `AppComponent` template with *Crisis Center* routes exclusively: +makeExample('router/ts/app/app.component.3.ts', 'template')(format=".") @@ -1340,7 +1331,7 @@ code-example(format="." language="bash"). We can do that! We compose a 3-item link parameters array following the recipe we just created. - This time we set the id to the "Asteroid Crisis" (`{id:3}`). + This time we set the id to the *Asteroid Crisis* (`{id:3}`). We can't define a normal route because that requires setting a target component. We're not defining a *route to a component*. We're defining a *route to a route*. A *route to a route* is a **redirect**. @@ -1478,17 +1469,3 @@ code-example(format=".", language="bash"). Then *override* the default strategy defined in `ROUTE_PROVIDERS` by providing the `HashLocationStrategy` later in the `bootstrap` providers array argument: +makeExample('router/ts/app/main.2.ts','', 'main.ts (hash URL strategy)') - - -.l-main-section -:marked - ## Appendix: Internet Explorer polyfills - A routed application relies on ES2015 promises and dynamic module loading. - IE needs help with that. - Make sure the following polyfill libraries are loaded in the `index.html` - ***above*** the Angular polyfill: -+makeExample('router/ts/index.html','ie-polyfills')(format=".") -:marked - We could substitute the following libraries from a CDN: -+makeExample('router/ts/index.1.html','ie-cdn-polyfills')(format=".") -:marked diff --git a/public/resources/images/devguide/router/complete-nav.png b/public/resources/images/devguide/router/complete-nav.png index 1dca8a7fe7..ad00cf91e4 100644 Binary files a/public/resources/images/devguide/router/complete-nav.png and b/public/resources/images/devguide/router/complete-nav.png differ diff --git a/public/resources/images/devguide/router/crisis-center-detail.png b/public/resources/images/devguide/router/crisis-center-detail.png index 1c1275c2f7..e7b4002008 100644 Binary files a/public/resources/images/devguide/router/crisis-center-detail.png and b/public/resources/images/devguide/router/crisis-center-detail.png differ diff --git a/public/resources/images/devguide/router/crisis-center-list.png b/public/resources/images/devguide/router/crisis-center-list.png index 5c91b597dc..14181482fb 100644 Binary files a/public/resources/images/devguide/router/crisis-center-list.png and b/public/resources/images/devguide/router/crisis-center-list.png differ diff --git a/public/resources/images/devguide/router/hero-detail.png b/public/resources/images/devguide/router/hero-detail.png index a5d9335763..0e0d13151e 100644 Binary files a/public/resources/images/devguide/router/hero-detail.png and b/public/resources/images/devguide/router/hero-detail.png differ diff --git a/public/resources/images/devguide/router/hero-list.png b/public/resources/images/devguide/router/hero-list.png index 9c902ba774..68f215729b 100644 Binary files a/public/resources/images/devguide/router/hero-list.png and b/public/resources/images/devguide/router/hero-list.png differ diff --git a/public/resources/images/devguide/router/router-1-anim.gif b/public/resources/images/devguide/router/router-1-anim.gif index f5992a65e1..8402849d56 100644 Binary files a/public/resources/images/devguide/router/router-1-anim.gif and b/public/resources/images/devguide/router/router-1-anim.gif differ diff --git a/public/resources/images/devguide/router/router-2-anim.gif b/public/resources/images/devguide/router/router-2-anim.gif index 86a6bb266e..1a0fef8af6 100644 Binary files a/public/resources/images/devguide/router/router-2-anim.gif and b/public/resources/images/devguide/router/router-2-anim.gif differ diff --git a/public/resources/images/devguide/router/router-anim.gif b/public/resources/images/devguide/router/router-anim.gif index 319ffe0bf1..01a6345d54 100644 Binary files a/public/resources/images/devguide/router/router-anim.gif and b/public/resources/images/devguide/router/router-anim.gif differ diff --git a/public/resources/images/devguide/router/selected-crisis.png b/public/resources/images/devguide/router/selected-crisis.png index 8b625c31c8..83f74c4357 100644 Binary files a/public/resources/images/devguide/router/selected-crisis.png and b/public/resources/images/devguide/router/selected-crisis.png differ diff --git a/public/resources/images/devguide/router/selected-hero.png b/public/resources/images/devguide/router/selected-hero.png index d4ebd0aaed..f75d81d688 100644 Binary files a/public/resources/images/devguide/router/selected-hero.png and b/public/resources/images/devguide/router/selected-hero.png differ diff --git a/public/resources/images/devguide/router/shell-and-outlet.png b/public/resources/images/devguide/router/shell-and-outlet.png index c9e8da0b32..6edde3a43e 100644 Binary files a/public/resources/images/devguide/router/shell-and-outlet.png and b/public/resources/images/devguide/router/shell-and-outlet.png differ