diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index ffc32d864b..10a8bf85ac 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -34,7 +34,7 @@ include ../../../../_includes/_util-fns * passing optional information in [query parameters](#query-parameters) * choosing the "HTML5" or "hash" [URL style](#browser-url-styles) - We proceed in phases marked by milestones building rom 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. Try that [live final version](/resources/live-examples/router/ts/plnkr.html). @@ -205,11 +205,11 @@ table figure.image-display img(src='/resources/images/devguide/router/hero-list.png' alt="Hero List" width="250") :marked - We select one and the applications takes us to a hero editing screen. + We select one and the application takes us to a hero editing screen. figure.image-display img(src='/resources/images/devguide/router/hero-detail.png' alt="Crisis Center Detail" width="250") :marked - Our changes take affect immediately. We click the "Back" button and the + Our changes take effect immediately. We click the "Back" button and the app returns us to the Heroes list. We could have clicked the browser's back button instead. @@ -220,13 +220,12 @@ figure.image-display figure.image-display img(src='/resources/images/devguide/router/crisis-center-list.png' alt="Crisis Center List" ) :marked - We select one and the applications takes us to a crisis editing screen. + We select one and the application takes us to a crisis editing screen. figure.image-display img(src='/resources/images/devguide/router/crisis-center-detail.png' alt="Crisis Center Detail") :marked This is a bit different from the *Hero Detail*. *Hero Detail* saves the changes as we type. - In *Crisis Detail* our changes are temporary until we either save or discard them - with by pressing the "Save" or "Cancel" buttons. + In *Crisis Detail* our changes are temporary until we either save or discard them by pressing the "Save" or "Cancel" buttons. Both buttons navigate back to the *Crisis Center* and its list of crises. Suppose we click a crisis, make a change, but ***do not click either button***. @@ -494,7 +493,7 @@ figure.image-display We also copy the `hero-detail.component.ts` and the `hero.service.ts` files into the `heroes/` folder. - When were done organizing, we have three *Hero Management* files: + When we're done organizing, we have three *Hero Management* files: .filetree .file app/heroes @@ -536,7 +535,7 @@ figure.image-display We added a new route definition for the `HeroDetailComponent` — and this definition has a twist. +makeExample('router/ts/app/app.component.2.ts','hero-detail-route')(format=".") :marked - Notice the `:id` token in the the path. That creates a slot in the path for a **Route Parameter**. + Notice the `:id` token in the path. That creates a slot in the path for a **Route Parameter**. In this case, we're expecting the router to insert the `id` of a hero into that slot. If we tell the router to navigate to the detail component and display "Magneta", we expect hero `id` (15) to appear in the @@ -808,7 +807,7 @@ code-example(format=""). *We* make it a child component of our application by reconfiguring the routes of the top level `AppComponent`. :marked ### Parent Route Configuration - Here is is the revised route configuration for the parent `AppComponent`: + Here is the revised route configuration for the parent `AppComponent`: +makeExample('router/ts/app/app.component.ts', 'route-config', 'app/app.component.ts (routes only)' ) :marked The last two *Hero* routes haven't changed. @@ -1391,14 +1390,14 @@ code-example(format=".", language="bash"). could be rendered on the server and delivered to the user's device in less than a second. - Thist option is only available if application URLs look like normal web URLs + This option is only available if application URLs look like normal web URLs without hashes (#) in the middle. Stick with the default unless you have a compelling reason to resort to hash routes. ### HTML 5 URLs and the *<base href>* - While the router use the "[HTML 5 pushState](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries)" + While the router uses the "[HTML 5 pushState](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries)" style by default, we *must* configure that strategy with a **base href** The preferred way to configure the strategy is to add a @@ -1406,7 +1405,7 @@ code-example(format=".", language="bash"). in the `` of the `index.html`. +makeExample('router/ts/index.html','base-href')(format=".") :marked - Without that tag, the browser may not be be able to load resources + Without that tag, the browser may not be able to load resources (images, css, scripts) when "deep linking" into the app. Bad things could happen when someone pastes an application link into the browser's address bar or clicks such a link in an email link.