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 `
  • ` tag. + name in the repeated `
  • ` element. +makeExcerpt('src/app/heroes.component.html', 'delete', '') @@ -344,12 +338,12 @@ block get-heroes-details :marked To place the delete button at the far right of the hero entry, - add this additional CSS: + add this CSS: +makeExcerpt('src/app/heroes.component.css', 'additions') :marked - ### Hero service `delete()` method + ### Hero service _delete()_ method Add the hero service's `delete()` method, which uses the `delete()` HTTP method to remove the hero from the server: @@ -388,8 +382,8 @@ block observables-section-intro But requests aren't always done only once. You may start one request, cancel it, and make a different request before the server has responded to the first request. - A *request-cancel-new-request* sequence is difficult to implement with *!{Promise}s*, but - easy with *!{Observable}s*. + A *request-cancel-new-request* sequence is difficult to implement with *!{_Promise}s*, but + easy with *!{_Observable}s*. ### Add the ability to search by name You're going to add a *hero search* feature to the Tour of Heroes. @@ -407,9 +401,8 @@ block observables-section-intro Instead you return the *Observable* from the the `htttp.get()`, after chaining it to another RxJS operator, 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