docs(toh-6): copyedits (#3434)

- Remove statement that doesn't apply: "We recommend registering
app-wide services in the root
  `AppModule` *providers*" - but that isn't being done.
- Adding parentheses after method names; a few were missed in the
previous pass.
- `debounce()` --> `debounceTime()`
- Remove obsolete Dart prose.
- Fix heading indentation.
- Added missing closing `</span>`.
- Fix misnamed Jade variables.

cc @kapunahelewong
This commit is contained in:
Patrice Chalin 2017-03-30 09:39:48 -07:00 committed by Ward Bell
parent 53d94a8723
commit e9a6001d60

View File

@ -41,6 +41,7 @@ code-example(language="sh" class="code-shell").
This command runs the TypeScript compiler in "watch mode", recompiling automatically when the code changes. 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. The command simultaneously launches the app in a browser and refreshes the browser when the code changes.
:marked
You can keep building the Tour of Heroes without pausing to recompile or refresh the browser. You can keep building the Tour of Heroes without pausing to recompile or refresh the browser.
.l-main-section#http-providers .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. You're ready to import from `@angular/http` because `systemjs.config` configured *SystemJS* to load that library when you need it.
:marked :marked
### Register for HTTP services ## Register for HTTP services
block http-providers block http-providers
:marked :marked
@ -73,16 +74,9 @@ block http-providers
:marked :marked
## Simulate the web API ## Simulate the web API
We recommend registering app-wide services in the root
`!{_AppModuleVsAppComp}` *providers*. <span if-docs="dart">Here you're
registering in `main` for a special reason.</span>
Until you have a web server that can handle requests for hero data, Until you have a web server that can handle requests for hero data,
the HTTP client will fetch and save data from the HTTP client will fetch and save data from
a mock service, the *in-memory web API*. a mock service, the *in-memory web API*.
<span if-docs="dart"> 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`.</span>
Update <span ngio-ex>!{_appModuleTsVsMainTs}</span> with this version, which uses the mock service: Update <span ngio-ex>!{_appModuleTsVsMainTs}</span> 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'; - var rejected_promise = _docsFor == 'dart' ? 'propagated exception' : 'rejected promise';
:marked :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. you would handle the error in code. For a demo, this works.
The code also includes an error to 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. 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`). 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') +makeExcerpt('src/app/hero.service.ts', 'getHero', 'src/app/hero.service.ts')
:marked :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. 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}. 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 ### Add the ability to save hero details
At the end of the hero detail template, add a save button with a `click` event 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') +makeExcerpt('src/app/hero-detail.component.html', 'save')
:marked :marked
Add the following `save` method, which persists hero name changes using the hero service Add the following `save()` method, which persists hero name changes using the hero service
`update` method and then navigates back to the previous view. `update()` method and then navigates back to the previous view.
+makeExcerpt('src/app/hero-detail.component.ts', 'save') +makeExcerpt('src/app/hero-detail.component.ts', 'save')
:marked :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 The overall structure of the `update()` method is similar to that of
`getHeroes`, but it uses an HTTP `put()` to persist server-side changes. `getHeroes()`, but it uses an HTTP `put()` to persist server-side changes.
+makeExcerpt('src/app/hero.service.ts', 'update') +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 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}. 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') +makeExcerpt('src/app/hero.service.ts', 'create')
:marked :marked
@ -318,7 +312,7 @@ block get-heroes-details
Each hero in the heroes view should have a delete button. Each hero in the heroes view should have a delete button.
Add the following button element to the heroes component HTML, after the hero Add the following button element to the heroes component HTML, after the hero
name in the repeated `<li>` tag. name in the repeated `<li>` element.
+makeExcerpt('src/app/heroes.component.html', 'delete', '') +makeExcerpt('src/app/heroes.component.html', 'delete', '')
@ -344,12 +338,12 @@ block get-heroes-details
:marked :marked
To place the delete button at the far right of the hero entry, 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') +makeExcerpt('src/app/heroes.component.css', 'additions')
:marked :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: 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. But requests aren't always done only once.
You may start one request, You may start one request,
cancel it, and make a different request before the server has responded to the first 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 A *request-cancel-new-request* sequence is difficult to implement with *!{_Promise}s*, but
easy with *!{Observable}s*. easy with *!{_Observable}s*.
### Add the ability to search by name ### Add the ability to search by name
You're going to add a *hero search* feature to the Tour of Heroes. 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()`, Instead you return the *Observable* from the the `htttp.get()`,
after chaining it to another RxJS operator, <code>map()</code>, after chaining it to another RxJS operator, <code>map()</code>,
to extract heroes from the response data. to extract heroes from the response data.
RxJS operator chaining makes response processing easy and readable. 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).</span>
:marked :marked
### HeroSearchComponent ### HeroSearchComponent
@ -439,7 +432,7 @@ block observables-section-intro
:marked :marked
#### Search terms #### Search terms
Focus on the `!{_priv}searchTerms`: Focus on `!{_priv}searchTerms`:
+makeExcerpt('src/app/hero-search.component.ts', '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 * `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. 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. * `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`. * `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. It cancels and discards previous search observables, returning only the latest search service observable.
.l-sub-section .l-sub-section