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:
parent
53d94a8723
commit
e9a6001d60
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user