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
Ward Bell
parent
53d94a8723
commit
e9a6001d60
|
|
@ -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*. <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,
|
||||
the HTTP client will fetch and save data from
|
||||
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:
|
||||
|
||||
|
|
@ -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 `<li>` tag.
|
||||
name in the repeated `<li>` 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, <code>map()</code>,
|
||||
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).</span>
|
||||
|
||||
: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
|
||||
|
|
|
|||
Loading…
Reference in New Issue