diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade index b0e6ca5c62..6ae2060457 100644 --- a/public/docs/ts/latest/tutorial/toh-pt6.jade +++ b/public/docs/ts/latest/tutorial/toh-pt6.jade @@ -34,13 +34,14 @@ block start-server-and-watch ## Keep the app transpiling and running Enter the following command in the terminal window: -code-example(language="sh" class="code-shell"). - npm start + code-example(language="sh" class="code-shell"). + npm start + + :marked + This command runs the TypeScript compiler in "watch mode", recompiling automatically when the code changes. + The command simultaneously launches the app in a browser and refreshes the browser when the code changes. :marked - This command runs the TypeScript compiler in "watch mode", recompiling automatically when the code changes. - The command simultaneously launches the app in a browser and refreshes the browser when the code changes. - You can keep building the Tour of Heroes without pausing to recompile or refresh the browser. .l-main-section#http-providers @@ -54,7 +55,7 @@ block http-library You're ready to import from `@angular/http` because `systemjs.config` configured *SystemJS* to load that library when you need it. :marked - ### Register for HTTP services + ## Register for HTTP services block http-providers :marked @@ -73,16 +74,9 @@ block http-providers :marked ## Simulate the web API - We recommend registering app-wide services in the root - `!{_AppModuleVsAppComp}` *providers*. Here you're - registering in `main` for a special reason. - Until you have a web server that can handle requests for hero data, the HTTP client will fetch and save data from a mock service, the *in-memory web API*. - The app itself doesn't need to know - about this, so you can slip the in-memory web API into the - configuration above the `AppComponent`. Update !{_appModuleTsVsMainTs} with this version, which uses the mock service: @@ -205,7 +199,7 @@ block get-heroes-details - var rejected_promise = _docsFor == 'dart' ? 'propagated exception' : 'rejected promise'; :marked - In this demo service, you log the error to the console; in real life, + This demo service logs the error to the console; in real life, you would handle the error in code. For a demo, this works. The code also includes an error to @@ -220,11 +214,11 @@ block get-heroes-details That's fine for a simulation, but it's wasteful to ask a real server for all heroes when you only want one. Most web APIs support a _get-by-id_ request in the form `api/hero/:id` (such as `api/hero/11`). - Update the `HeroService.getHero` method to make a _get-by-id_ request: + Update the `HeroService.getHero()` method to make a _get-by-id_ request: +makeExcerpt('src/app/hero.service.ts', 'getHero', 'src/app/hero.service.ts') :marked - This request is almost the same as `getHeroes`. + This request is almost the same as `getHeroes()`. The hero id in the URL identifies which hero the server should update. Also, the `data` in the response is a single hero object rather than !{_an} !{_array}. @@ -255,21 +249,21 @@ block get-heroes-details ### Add the ability to save hero details At the end of the hero detail template, add a save button with a `click` event - binding that invokes a new component method named `save`. + binding that invokes a new component method named `save()`. +makeExcerpt('src/app/hero-detail.component.html', 'save') :marked - Add the following `save` method, which persists hero name changes using the hero service - `update` method and then navigates back to the previous view. + Add the following `save()` method, which persists hero name changes using the hero service + `update()` method and then navigates back to the previous view. +makeExcerpt('src/app/hero-detail.component.ts', 'save') :marked - ### Add a hero service _update_ method + ### Add a hero service _update()_ method - The overall structure of the `update` method is similar to that of - `getHeroes`, but it uses an HTTP `put()` to persist server-side changes. + The overall structure of the `update()` method is similar to that of + `getHeroes()`, but it uses an HTTP `put()` to persist server-side changes. +makeExcerpt('src/app/hero.service.ts', 'update') @@ -305,7 +299,7 @@ block get-heroes-details When the given name is non-blank, the handler delegates creation of the named hero to the hero service, and then adds the new hero to the !{_array}. - Implement the `create` method in the `HeroService` class. + Implement the `create()` method in the `HeroService` class. +makeExcerpt('src/app/hero.service.ts', 'create') :marked @@ -318,7 +312,7 @@ block get-heroes-details Each hero in the heroes view should have a delete button. Add the following button element to the heroes component HTML, after the hero - name in the repeated `
map()
,
to extract heroes from the response data.
-
RxJS operator chaining makes response processing easy and readable.
- See the [discussion below about operators](#rxjs-imports).
+ See the [discussion below about operators](#rxjs-imports).
:marked
### HeroSearchComponent
@@ -439,7 +432,7 @@ block observables-section-intro
:marked
#### Search terms
- Focus on the `!{_priv}searchTerms`:
+ Focus on `!{_priv}searchTerms`:
+makeExcerpt('src/app/hero-search.component.ts', 'searchTerms', '')
@@ -471,8 +464,8 @@ block observable-transformers
* `debounceTime(300)` waits until the flow of new string events pauses for 300 milliseconds
before passing along the latest string. You'll never make requests more frequently than 300ms.
- * `distinctUntilChanged` ensures that a request is sent only if the filter text changed.
- * `switchMap()` calls the search service for each search term that makes it through `debounce` and `distinctUntilChanged`.
+ * `distinctUntilChanged()` ensures that a request is sent only if the filter text changed.
+ * `switchMap()` calls the search service for each search term that makes it through `debounceTime()` and `distinctUntilChanged()`.
It cancels and discards previous search observables, returning only the latest search service observable.
.l-sub-section