Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 2fbca28

Browse files
chalinwardbell
authored andcommitted
docs(server-comm): copyedits (#3373)
- Minor prose copyedits. - Renamed `HeroService.addHero()` to `create()`, so as to match the ToH sample.
1 parent e6741ef commit 2fbca28

File tree

3 files changed

+32
-31
lines changed

3 files changed

+32
-31
lines changed

public/docs/_examples/server-communication/ts/src/app/toh/hero-list.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@ export class HeroListComponent implements OnInit {
3131
// #enddocregion getHeroes
3232

3333
// #docregion addHero
34-
addHero (name: string) {
34+
addHero(name: string) {
3535
if (!name) { return; }
36-
this.heroService.addHero(name)
36+
this.heroService.create(name)
3737
.subscribe(
3838
hero => this.heroes.push(hero),
3939
error => this.errorMessage = <any>error);

public/docs/_examples/server-communication/ts/src/app/toh/hero.service.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -21,32 +21,32 @@ import { Hero } from './hero';
2121
@Injectable()
2222
export class HeroService {
2323
// #docregion endpoint
24-
private heroesUrl = 'app/heroes'; // URL to web API
24+
private heroesUrl = 'api/heroes'; // URL to web API
2525
// #enddocregion endpoint
2626

2727
// #docregion ctor
2828
constructor (private http: Http) {}
2929
// #enddocregion ctor
3030

3131
// #docregion methods, error-handling, http-get
32-
getHeroes (): Observable<Hero[]> {
32+
getHeroes(): Observable<Hero[]> {
3333
return this.http.get(this.heroesUrl)
3434
.map(this.extractData)
3535
.catch(this.handleError);
3636
}
3737
// #enddocregion error-handling, http-get, v1
3838

39-
// #docregion addhero, addhero-sig
40-
addHero (name: string): Observable<Hero> {
41-
// #enddocregion addhero-sig
39+
// #docregion create, create-sig
40+
create(name: string): Observable<Hero> {
41+
// #enddocregion create-sig
4242
let headers = new Headers({ 'Content-Type': 'application/json' });
4343
let options = new RequestOptions({ headers: headers });
4444

4545
return this.http.post(this.heroesUrl, { name }, options)
4646
.map(this.extractData)
4747
.catch(this.handleError);
4848
}
49-
// #enddocregion addhero
49+
// #enddocregion create
5050

5151
// #docregion v1, extract-data
5252
private extractData(res: Response) {

public/docs/ts/latest/guide/server-communication.jade

+24-23
Original file line numberDiff line numberDiff line change
@@ -110,33 +110,33 @@ block http-providers
110110
The newcomers are the `HttpModule` and the `JsonpModule` from the !{_Angular_http_library}. For more information about imports and related terminology, see the [MDN reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) on the `import` statement.
111111

112112
To add these modules to the application, pass them to the `imports` array in the root `@NgModule`.
113-
.l-sub-section
114-
:marked
115-
The `HttpModule` is necessary for making HTTP calls.
116-
Though the `JsonpModule` isn't necessary for plain HTTP,
117-
there is a JSONP demo later in this page.
118-
Loading its module now saves time.
119-
.l-main-section#http-client
113+
.l-sub-section
114+
:marked
115+
The `HttpModule` is necessary for making HTTP calls.
116+
Though the `JsonpModule` isn't necessary for plain HTTP,
117+
there is a JSONP demo later in this page.
118+
Loading its module now saves time.
119+
.l-main-section#http-client
120120
:marked
121121
## The Tour of Heroes HTTP client demo
122122

123123
The first demo is a mini-version of the [tutorial](../tutorial)'s "Tour of Heroes" (ToH) application.
124124
This version gets some heroes from the server, displays them in a list, lets the user add new heroes, and saves them to the server.
125-
The app uses the !{_Angular_Http} client to communicate via `XMLHttpRequest (XHR)`.
125+
The app uses the !{_Angular_Http} client to communicate via **XMLHttpRequest (XHR)**.
126126

127127
It works like this:
128128
figure.image-display
129129
img(src='/resources/images/devguide/server-communication/http-toh.gif' alt="ToH mini app" width="250")
130130
:marked
131131
This demo has a single component, the `HeroListComponent`. Here's its template:
132-
+makeExample('server-communication/ts/src/app/toh/hero-list.component.html', null, 'src/app/toh/hero-list.component.html (template)')
132+
+makeExample('server-communication/ts/src/app/toh/hero-list.component.html', null, 'src/app/toh/hero-list.component.html')
133133
:marked
134134
It presents the list of heroes with an `ngFor`.
135135
Below the list is an input box and an *Add Hero* button where you can enter the names of new heroes
136136
and add them to the database.
137137
A [template reference variable](template-syntax.html#ref-vars), `newHeroName`, accesses the
138138
value of the input box in the `(click)` event binding.
139-
When the user clicks the button, that value passes to the component's `addHero` method and then
139+
When the user clicks the button, that value is passed to the component's `addHero` method and then
140140
the event binding clears it to make it ready for a new hero name.
141141

142142
Below the button is an area for an error message.
@@ -166,9 +166,9 @@ a#HeroListComponent
166166
This is a *best practice*.
167167
Components are easier to test and debug when their constructors are simple, and all real work
168168
(especially calling a remote server) is handled in a separate method.
169-
block getheroes-and-addhero
169+
block getheroes-and-create
170170
:marked
171-
The service's `getHeroes()` and `addHero()` methods return an `Observable` of hero data that the !{_Angular_Http} client fetched from the server.
171+
The service's `getHeroes()` and `create()` methods return an `Observable` of hero data that the !{_Angular_Http} client fetched from the server.
172172

173173
Think of an `Observable` as a stream of events published by some source.
174174
To listen for events in this stream, ***subscribe*** to the `Observable`.
@@ -285,7 +285,7 @@ a#no-return-response-object
285285
:marked
286286
### Do not return the response object
287287
The `getHeroes()` method _could_ have returned the HTTP response but this wouldn't
288-
be a best practice.
288+
follow best practices.
289289
The point of a data service is to hide the server interaction details from consumers.
290290
The component that calls the `HeroService` only wants heroes and is kept separate
291291
from getting them, the code dealing with where they come from, and the response object.
@@ -334,6 +334,7 @@ block hlc-error-handling
334334
Want to see it fail? In the `HeroService`, reset the api endpoint to a bad value. Afterward, remember to restore it.
335335

336336

337+
<a id="create"></a>
337338
<a id="update"></a>
338339
<a id="post"></a>
339340
.l-main-section
@@ -343,10 +344,10 @@ block hlc-error-handling
343344
So far you've seen how to retrieve data from a remote location using an HTTP service.
344345
Now you'll add the ability to create new heroes and save them in the backend.
345346

346-
You'll write a method for the `HeroListComponent` to call, an `addHero()` method, that takes
347+
You'll write a method for the `HeroListComponent` to call, a `create()` method, that takes
347348
just the name of a new hero and returns an `Observable` of `Hero`. It begins like this:
348349

349-
+makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'addhero-sig')(format=".")
350+
+makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'create-sig')(format=".")
350351

351352
:marked
352353
To implement it, you must know the server's API for creating heroes.
@@ -365,11 +366,11 @@ code-example(format="." language="javascript").
365366
of the new hero including its generated id. The hero arrives tucked inside a response object
366367
with its own `data` property.
367368

368-
Now that you know how the API works, implement `addHero()` as follows:
369+
Now that you know how the API works, implement `create()` as follows:
369370

370371
+ifDocsFor('ts')
371372
+makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'import-request-options', 'src/app/toh/hero.service.ts (additional imports)')(format=".")
372-
+makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'addhero', 'src/app/toh/hero.service.ts (addHero)')(format=".")
373+
+makeExcerpt('src/app/toh/hero.service.ts', 'create')
373374

374375
a#headers
375376
:marked
@@ -394,7 +395,7 @@ a#json-results
394395

395396
block hero-list-comp-add-hero
396397
:marked
397-
Back in the `HeroListComponent`, *its* `addHero()` method subscribes to the Observable returned by the *service's* `addHero()` method.
398+
Back in the `HeroListComponent`, its `addHero()` method subscribes to the Observable returned by the service's `create()` method.
398399
When the data arrive it pushes the new hero object into its `heroes` array for presentation to the user.
399400
+makeExample('server-communication/ts/src/app/toh/hero-list.component.ts', 'addHero', 'src/app/toh/hero-list.component.ts (addHero)')(format=".")
400401

@@ -455,7 +456,7 @@ block hero-list-comp-add-hero
455456
h2#cors Cross-Origin Requests: Wikipedia example
456457
:marked
457458
You just learned how to make `XMLHttpRequests` using the !{_Angular_Http} service.
458-
This is the most common approach for server communication, but it doesn't work in all scenarios.
459+
This is the most common approach to server communication, but it doesn't work in all scenarios.
459460

460461
For security reasons, web browsers block `XHR` calls to a remote server whose origin is different from the origin of the web page.
461462
The *origin* is the combination of URI scheme, hostname, and port number.
@@ -685,18 +686,18 @@ a#override-default-request-options
685686
:marked
686687
Remember to include this provider during setup when unit testing the app's HTTP services.
687688
:marked
688-
After this change, the `header` option setting in `HeroService.addHero()` is no longer necessary,
689+
After this change, the `header` option setting in `HeroService.create()` is no longer necessary,
689690

690-
+makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'addhero', 'src/app/toh/hero.service.ts (addHero)')(format=".")
691+
+makeExcerpt('src/app/toh/hero.service.ts', 'create')
691692
:marked
692693
You can confirm that `DefaultRequestOptions` is working by examing HTTP requests in the browser developer tools' network tab.
693694
If you're short-circuiting the server call with something like the [_in-memory web api_](#in-mem-web-api),
694-
try commenting-out the `addHero` header option,
695+
try commenting-out the `create` header option,
695696
set a breakpoint on the POST call, and step through the request processing
696697
to verify the header is there.
697698

698699
Individual requests options, like this one, take precedence over the default `RequestOptions`.
699-
It might be wise to keep the `addHero` request header setting for extra safety.
700+
It might be wise to keep the `create` request header setting for extra safety.
700701

701702
a#in-mem-web-api
702703
.l-main-section

0 commit comments

Comments
 (0)