docs(aio): rename http guide

This commit is contained in:
Jesus Rodriguez 2017-04-20 12:26:55 +02:00 committed by Pete Bacon Darwin
parent 800b1b060e
commit ccb6c45466
28 changed files with 89 additions and 88 deletions

View File

@ -1,8 +1,8 @@
@title @title
HTTP Client HTTP
@intro @intro
Use an HTTP Client to talk to a remote server. Use HTTP to talk to a remote server.
@description @description
@ -30,52 +30,52 @@ The Angular HTTP library simplifies application programming with the **XHR** and
# Contents # Contents
* [Demos](guide/server-communication#demos) * [Demos](guide/http#demos)
* [Providing HTTP Services](guide/server-communication#http-providers) * [Providing HTTP Services](guide/http#http-providers)
* [The Tour of Heroes *HTTP* client demo](guide/server-communication#http-client) * [The Tour of Heroes *HTTP* client demo](guide/http#http-client)
* [The `HeroListComponent` class](guide/server-communication#HeroListComponent) * [The `HeroListComponent` class](guide/http#HeroListComponent)
* [Fetch data with `http.get()`](guide/server-communication#fetch-data) * [Fetch data with `http.get()`](guide/http#fetch-data)
<li>[RxJS library](guide/server-communication#rxjs-library) <li>[RxJS library](guide/http#rxjs-library)
<ul> <ul>
<li> [Enable RxJS operators](guide/server-communication#enable-rxjs-operators)</li> <li> [Enable RxJS operators](guide/http#enable-rxjs-operators)</li>
</ul> </ul>
</li> </li>
* [Process the response object](guide/server-communication#extract-data) * [Process the response object](guide/http#extract-data)
* [Parse to `JSON`](guide/server-communication#parse-to-json) * [Parse to `JSON`](guide/http#parse-to-json)
* [Do not return the response object](guide/server-communication#no-return-response-object) * [Do not return the response object](guide/http#no-return-response-object)
* [Always handle errors](guide/server-communication#error-handling) * [Always handle errors](guide/http#error-handling)
* [`HeroListComponent` error handling](guide/server-communication#hero-list-component) * [`HeroListComponent` error handling](guide/http#hero-list-component)
* [Send data to the server](guide/server-communication#update) * [Send data to the server](guide/http#update)
* [Headers](guide/server-communication#headers) * [Headers](guide/http#headers)
* [JSON results](guide/server-communication#json-results) * [JSON results](guide/http#json-results)
<ul><li> [Fall back to promises](guide/server-communication#promises)</ul> <ul><li> [Fall back to promises](guide/http#promises)</ul>
* [Cross-Origin Requests: Wikipedia example](guide/server-communication#cors) * [Cross-Origin Requests: Wikipedia example](guide/http#cors)
<ul> <ul>
<li> [Search Wikipedia](guide/server-communication#search-wikipedia)</li> <li> [Search Wikipedia](guide/http#search-wikipedia)</li>
<li> [Search parameters](guide/server-communication#search-parameters)</li> <li> [Search parameters](guide/http#search-parameters)</li>
<li> [The WikiComponent](guide/server-communication#wikicomponent)</li> <li> [The WikiComponent](guide/http#wikicomponent)</li>
</ul> </ul>
* [A wasteful app](guide/server-communication#wasteful-app) * [A wasteful app](guide/http#wasteful-app)
<li> [More fun with Observables](guide/server-communication#more-observables) <li> [More fun with Observables](guide/http#more-observables)
<ul> <ul>
<li> [Create a stream of search terms](guide/server-communication#create-stream)</li> <li> [Create a stream of search terms](guide/http#create-stream)</li>
<li> [Listen for search terms](guide/server-communication#listen-for-search-terms)</li> <li> [Listen for search terms](guide/http#listen-for-search-terms)</li>
</ul> </ul>
</li> </li>
* [Guarding against Cross-Site Request Forgery](guide/server-communication#xsrf) * [Guarding against Cross-Site Request Forgery](guide/http#xsrf)
* [Override default request headers (and other request options)](guide/server-communication#override-default-request-options) * [Override default request headers (and other request options)](guide/http#override-default-request-options)
* [Appendix: Tour of Heroes _in-memory web api_](guide/server-communication#in-mem-web-api) * [Appendix: Tour of Heroes _in-memory web api_](guide/http#in-mem-web-api)
A <live-example>live example</live-example> illustrates these topics. A <live-example>live example</live-example> illustrates these topics.
@ -90,15 +90,15 @@ This page describes server communication with the help of the following demos:
* [The Tour of Heroes *HTTP* client demo](guide/server-communication#http-client). * [The Tour of Heroes *HTTP* client demo](guide/http#http-client).
* [Fall back to Promises](guide/server-communication#promises). * [Fall back to Promises](guide/http#promises).
* [Cross-Origin Requests: Wikipedia example](guide/server-communication#cors). * [Cross-Origin Requests: Wikipedia example](guide/http#cors).
* [More fun with Observables](guide/server-communication#more-observables). * [More fun with Observables](guide/http#more-observables).
The root `AppComponent` orchestrates these demos: The root `AppComponent` orchestrates these demos:
<code-example path="server-communication/src/app/app.component.ts" title="src/app/app.component.ts"> <code-example path="http/src/app/app.component.ts" title="src/app/app.component.ts">
</code-example> </code-example>
@ -143,7 +143,7 @@ Read about providers in the [Dependency Injection](guide/dependency-injection) p
Register providers by importing other NgModules to the root NgModule in `app.module.ts`. Register providers by importing other NgModules to the root NgModule in `app.module.ts`.
<code-example path="server-communication/src/app/app.module.1.ts" title="src/app/app.module.ts (v1)" linenums="false"> <code-example path="http/src/app/app.module.1.ts" title="src/app/app.module.ts (v1)" linenums="false">
</code-example> </code-example>
@ -178,14 +178,14 @@ The app uses the Angular <code>Http</code> client to communicate via **XMLHttpRe
It works like this: It works like this:
<figure class='image-display'> <figure class='image-display'>
<img src='assets/images/devguide/server-communication/http-toh.gif' alt="ToH mini app" width="250"></img> <img src='assets/images/devguide/http/http-toh.gif' alt="ToH mini app" width="250"></img>
</figure> </figure>
This demo has a single component, the `HeroListComponent`. Here's its template: This demo has a single component, the `HeroListComponent`. Here's its template:
<code-example path="server-communication/src/app/toh/hero-list.component.html" title="src/app/toh/hero-list.component.html"> <code-example path="http/src/app/toh/hero-list.component.html" title="src/app/toh/hero-list.component.html">
</code-example> </code-example>
@ -211,7 +211,7 @@ Below the button is an area for an error message.
### The *HeroListComponent* class ### The *HeroListComponent* class
Here's the component class: Here's the component class:
<code-example path="server-communication/src/app/toh/hero-list.component.ts" region="component" title="src/app/toh/hero-list.component.ts (class)"> <code-example path="http/src/app/toh/hero-list.component.ts" region="component" title="src/app/toh/hero-list.component.ts (class)">
</code-example> </code-example>
@ -272,7 +272,7 @@ returning mock heroes in a service like this one:
You can revise that `HeroService` to get the heroes from the server using the Angular <code>Http</code> client service: You can revise that `HeroService` to get the heroes from the server using the Angular <code>Http</code> client service:
<code-example path="server-communication/src/app/toh/hero.service.ts" region="v1" title="src/app/toh/hero.service.ts (revised)"> <code-example path="http/src/app/toh/hero.service.ts" region="v1" title="src/app/toh/hero.service.ts (revised)">
</code-example> </code-example>
@ -281,7 +281,7 @@ You can revise that `HeroService` to get the heroes from the server using the An
Notice that the Angular <code>Http</code> client service is Notice that the Angular <code>Http</code> client service is
[injected](guide/dependency-injection) into the `HeroService` constructor. [injected](guide/dependency-injection) into the `HeroService` constructor.
<code-example path="server-communication/src/app/toh/hero.service.ts" region="ctor" title="src/app/toh/hero.service.ts"> <code-example path="http/src/app/toh/hero.service.ts" region="ctor" title="src/app/toh/hero.service.ts">
</code-example> </code-example>
@ -289,7 +289,7 @@ Notice that the Angular <code>Http</code> client service is
Look closely at how to call `http.get`: Look closely at how to call `http.get`:
<code-example path="server-communication/src/app/toh/hero.service.ts" region="http-get" title="src/app/toh/hero.service.ts (getHeroes)" linenums="false"> <code-example path="http/src/app/toh/hero.service.ts" region="http-get" title="src/app/toh/hero.service.ts (getHeroes)" linenums="false">
</code-example> </code-example>
@ -302,11 +302,11 @@ You pass the resource URL to `get` and it calls the server which returns heroes.
The server returns heroes once you've set up the [in-memory web api](guide/server-communication#in-mem-web-api) The server returns heroes once you've set up the [in-memory web api](guide/http#in-mem-web-api)
described in the appendix below. described in the appendix below.
Alternatively, you can temporarily target a JSON file by changing the endpoint URL: Alternatively, you can temporarily target a JSON file by changing the endpoint URL:
<code-example path="server-communication/src/app/toh/hero.service.ts" region="endpoint-json" title="src/app/toh/hero.service.ts" linenums="false"> <code-example path="http/src/app/toh/hero.service.ts" region="endpoint-json" title="src/app/toh/hero.service.ts" linenums="false">
</code-example> </code-example>
@ -350,7 +350,7 @@ You should include only necessary features.
Each code file should add the operators it needs by importing from an RxJS library. Each code file should add the operators it needs by importing from an RxJS library.
The `getHeroes()` method needs the `map()` and `catch()` operators so it imports them like this. The `getHeroes()` method needs the `map()` and `catch()` operators so it imports them like this.
<code-example path="server-communication/src/app/toh/hero.service.ts" region="rxjs-imports" title="src/app/app.component.ts (import rxjs)" linenums="false"> <code-example path="http/src/app/toh/hero.service.ts" region="rxjs-imports" title="src/app/app.component.ts (import rxjs)" linenums="false">
</code-example> </code-example>
@ -363,7 +363,7 @@ The `getHeroes()` method needs the `map()` and `catch()` operators so it imports
## Process the response object ## Process the response object
Remember that the `getHeroes()` method used an `extractData()` helper method to map the `http.get` response object to heroes: Remember that the `getHeroes()` method used an `extractData()` helper method to map the `http.get` response object to heroes:
<code-example path="server-communication/src/app/toh/hero.service.ts" region="extract-data" title="src/app/toh/hero.service.ts (excerpt)" linenums="false"> <code-example path="http/src/app/toh/hero.service.ts" region="extract-data" title="src/app/toh/hero.service.ts (excerpt)" linenums="false">
</code-example> </code-example>
@ -449,7 +449,7 @@ from getting them, the code dealing with where they come from, and the response
The `http.get` does **not send the request just yet.** This Observable is The `http.get` does **not send the request just yet.** This Observable is
[*cold*](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/creating.md#cold-vs-hot-observables), [*cold*](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/creating.md#cold-vs-hot-observables),
which means that the request won't go out until something *subscribes* to the Observable. which means that the request won't go out until something *subscribes* to the Observable.
That *something* is the [HeroListComponent](guide/server-communication#subscribe). That *something* is the [HeroListComponent](guide/http#subscribe).
</div> </div>
@ -469,7 +469,7 @@ but only if it says something that the user can understand and act upon.
This simple app conveys that idea, albeit imperfectly, in the way it handles a `getHeroes` error. This simple app conveys that idea, albeit imperfectly, in the way it handles a `getHeroes` error.
<code-example path="server-communication/src/app/toh/hero.service.ts" region="error-handling" title="src/app/toh/hero.service.ts (excerpt)" linenums="false"> <code-example path="http/src/app/toh/hero.service.ts" region="error-handling" title="src/app/toh/hero.service.ts (excerpt)" linenums="false">
</code-example> </code-example>
@ -499,7 +499,7 @@ the `subscribe` function has a second function parameter to handle the error mes
It sets an `errorMessage` variable that's bound conditionally in the `HeroListComponent` template. It sets an `errorMessage` variable that's bound conditionally in the `HeroListComponent` template.
<code-example path="server-communication/src/app/toh/hero-list.component.ts" region="getHeroes" title="src/app/toh/hero-list.component.ts (getHeroes)" linenums="false"> <code-example path="http/src/app/toh/hero-list.component.ts" region="getHeroes" title="src/app/toh/hero-list.component.ts (getHeroes)" linenums="false">
</code-example> </code-example>
@ -529,7 +529,7 @@ You'll write a method for the `HeroListComponent` to call, a `create()` method,
just the name of a new hero and returns an `Observable` of `Hero`. It begins like this: just the name of a new hero and returns an `Observable` of `Hero`. It begins like this:
<code-example path="server-communication/src/app/toh/hero.service.ts" region="create-sig" title="src/app/toh/hero.service.ts" linenums="false"> <code-example path="http/src/app/toh/hero.service.ts" region="create-sig" title="src/app/toh/hero.service.ts" linenums="false">
</code-example> </code-example>
@ -537,7 +537,7 @@ just the name of a new hero and returns an `Observable` of `Hero`. It begins lik
To implement it, you must know the server's API for creating heroes. To implement it, you must know the server's API for creating heroes.
[This sample's data server](guide/server-communication#in-mem-web-api) follows typical REST guidelines. [This sample's data server](guide/http#in-mem-web-api) follows typical REST guidelines.
It expects a [`POST`](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) request It expects a [`POST`](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) request
at the same endpoint as `GET` heroes. at the same endpoint as `GET` heroes.
It expects the new hero data to arrive in the body of the request, It expects the new hero data to arrive in the body of the request,
@ -558,13 +558,13 @@ with its own `data` property.
Now that you know how the API works, implement `create()` as follows: Now that you know how the API works, implement `create()` as follows:
<code-example path="server-communication/src/app/toh/hero.service.ts" region="import-request-options" title="src/app/toh/hero.service.ts (additional imports)" linenums="false"> <code-example path="http/src/app/toh/hero.service.ts" region="import-request-options" title="src/app/toh/hero.service.ts (additional imports)" linenums="false">
</code-example> </code-example>
<code-example path="server-communication/src/app/toh/hero.service.ts" linenums="false" title="src/app/toh/hero.service.ts (create)" region="create"> <code-example path="http/src/app/toh/hero.service.ts" linenums="false" title="src/app/toh/hero.service.ts (create)" region="create">
</code-example> </code-example>
@ -590,7 +590,7 @@ In the `return` statement, `options` is the *third* argument of the `post()` met
### JSON results ### JSON results
As with `getHeroes()`, use the `extractData()` helper to [extract the data](guide/server-communication#extract-data) As with `getHeroes()`, use the `extractData()` helper to [extract the data](guide/http#extract-data)
from the response. from the response.
@ -598,7 +598,7 @@ from the response.
Back in the `HeroListComponent`, its `addHero()` method subscribes to the Observable returned by the service's `create()` method. Back in the `HeroListComponent`, its `addHero()` method subscribes to the Observable returned by the service's `create()` method.
When the data arrive it pushes the new hero object into its `heroes` array for presentation to the user. When the data arrive it pushes the new hero object into its `heroes` array for presentation to the user.
<code-example path="server-communication/src/app/toh/hero-list.component.ts" region="addHero" title="src/app/toh/hero-list.component.ts (addHero)" linenums="false"> <code-example path="http/src/app/toh/hero-list.component.ts" region="addHero" title="src/app/toh/hero-list.component.ts (addHero)" linenums="false">
</code-example> </code-example>
@ -631,11 +631,11 @@ highlighting just the parts that are different.
<code-tabs> <code-tabs>
<code-pane title="src/app/toh/hero.service.promise.ts (promise-based)" path="server-communication/src/app/toh/hero.service.promise.ts" region="methods"> <code-pane title="src/app/toh/hero.service.promise.ts (promise-based)" path="http/src/app/toh/hero.service.promise.ts" region="methods">
</code-pane> </code-pane>
<code-pane title="src/app/toh/hero.service.ts (observable-based)" path="server-communication/src/app/toh/hero.service.ts" region="methods"> <code-pane title="src/app/toh/hero.service.ts (observable-based)" path="http/src/app/toh/hero.service.ts" region="methods">
</code-pane> </code-pane>
@ -659,11 +659,11 @@ You have to adjust the calling component to expect a `Promise` instead of an `Ob
<code-tabs> <code-tabs>
<code-pane title="src/app/toh/hero-list.component.promise.ts (promise-based)" path="server-communication/src/app/toh/hero-list.component.promise.ts" region="methods"> <code-pane title="src/app/toh/hero-list.component.promise.ts (promise-based)" path="http/src/app/toh/hero-list.component.promise.ts" region="methods">
</code-pane> </code-pane>
<code-pane title="src/app/toh/hero-list.component.ts (observable-based)" path="server-communication/src/app/toh/hero-list.component.ts" region="methods"> <code-pane title="src/app/toh/hero-list.component.ts (observable-based)" path="http/src/app/toh/hero-list.component.ts" region="methods">
</code-pane> </code-pane>
@ -716,7 +716,7 @@ This is called the [same-origin policy](https://en.wikipedia.org/wiki/Same-origi
Modern browsers do allow `XHR` requests to servers from a different origin if the server supports the Modern browsers do allow `XHR` requests to servers from a different origin if the server supports the
[CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) protocol. [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) protocol.
If the server requires user credentials, enable them in the [request headers](guide/server-communication#headers). If the server requires user credentials, enable them in the [request headers](guide/http#headers).
</div> </div>
@ -746,7 +746,7 @@ types in a text box:
<figure class='image-display'> <figure class='image-display'>
<img src='assets/images/devguide/server-communication/wiki-1.gif' alt="Wikipedia search app (v.1)" width="250"></img> <img src='assets/images/devguide/http/wiki-1.gif' alt="Wikipedia search app (v.1)" width="250"></img>
</figure> </figure>
@ -759,7 +759,7 @@ All other HTTP methods throw an error because `JSONP` is a read-only facility.
As always, wrap the interaction with an Angular data access client service inside a dedicated service, here called `WikipediaService`. As always, wrap the interaction with an Angular data access client service inside a dedicated service, here called `WikipediaService`.
<code-example path="server-communication/src/app/wiki/wikipedia.service.ts" title="src/app/wiki/wikipedia.service.ts"> <code-example path="http/src/app/wiki/wikipedia.service.ts" title="src/app/wiki/wikipedia.service.ts">
</code-example> </code-example>
@ -791,7 +791,7 @@ All of this happens under the hood.
If you're looking for articles with the word "Angular", you could construct the query string by hand and call `jsonp` like this: If you're looking for articles with the word "Angular", you could construct the query string by hand and call `jsonp` like this:
<code-example path="server-communication/src/app/wiki/wikipedia.service.1.ts" region="query-string" title="src/app/wiki/wikipedia.service.ts" linenums="false"> <code-example path="http/src/app/wiki/wikipedia.service.1.ts" region="query-string" title="src/app/wiki/wikipedia.service.ts" linenums="false">
</code-example> </code-example>
@ -799,7 +799,7 @@ If you're looking for articles with the word "Angular", you could construct the
In more parameterized examples you could build the query string with the Angular `URLSearchParams` helper: In more parameterized examples you could build the query string with the Angular `URLSearchParams` helper:
<code-example path="server-communication/src/app/wiki/wikipedia.service.ts" region="search-parameters" title="src/app/wiki/wikipedia.service.ts (search parameters)" linenums="false"> <code-example path="http/src/app/wiki/wikipedia.service.ts" region="search-parameters" title="src/app/wiki/wikipedia.service.ts (search parameters)" linenums="false">
</code-example> </code-example>
@ -807,7 +807,7 @@ In more parameterized examples you could build the query string with the Angular
This time you call `jsonp` with *two* arguments: the `wikiUrl` and an options object whose `search` property is the `params` object. This time you call `jsonp` with *two* arguments: the `wikiUrl` and an options object whose `search` property is the `params` object.
<code-example path="server-communication/src/app/wiki/wikipedia.service.ts" region="call-jsonp" title="src/app/wiki/wikipedia.service.ts (call jsonp)" linenums="false"> <code-example path="http/src/app/wiki/wikipedia.service.ts" region="call-jsonp" title="src/app/wiki/wikipedia.service.ts (call jsonp)" linenums="false">
</code-example> </code-example>
@ -822,7 +822,7 @@ to the server.
Now that you have a service that can query the Wikipedia API, Now that you have a service that can query the Wikipedia API,
turn your attention to the component (template and class) that takes user input and displays search results. turn your attention to the component (template and class) that takes user input and displays search results.
<code-example path="server-communication/src/app/wiki/wiki.component.ts" title="src/app/wiki/wiki.component.ts"> <code-example path="http/src/app/wiki/wiki.component.ts" title="src/app/wiki/wiki.component.ts">
</code-example> </code-example>
@ -865,7 +865,7 @@ It should only make requests when the user *stops typing*.
Here's how it will work after refactoring: Here's how it will work after refactoring:
<figure class='image-display'> <figure class='image-display'>
<img src='assets/images/devguide/server-communication/wiki-2.gif' alt="Wikipedia search app (v.2)" width="250"></img> <img src='assets/images/devguide/http/wiki-2.gif' alt="Wikipedia search app (v.2)" width="250"></img>
</figure> </figure>
@ -904,11 +904,11 @@ Here's the `WikiSmartComponent`, shown next to the original `WikiComponent`:
<code-tabs> <code-tabs>
<code-pane title="src/app/wiki/wiki-smart.component.ts" path="server-communication/src/app/wiki/wiki-smart.component.ts"> <code-pane title="src/app/wiki/wiki-smart.component.ts" path="http/src/app/wiki/wiki-smart.component.ts">
</code-pane> </code-pane>
<code-pane title="src/app/wiki/wiki.component.ts" path="server-communication/src/app/wiki/wiki.component.ts"> <code-pane title="src/app/wiki/wiki.component.ts" path="http/src/app/wiki/wiki.component.ts">
</code-pane> </code-pane>
@ -919,7 +919,7 @@ Here's the `WikiSmartComponent`, shown next to the original `WikiComponent`:
While the templates are virtually identical, While the templates are virtually identical,
there's a lot more RxJS in the "smart" version, there's a lot more RxJS in the "smart" version,
starting with `debounceTime`, `distinctUntilChanged`, and `switchMap` operators, starting with `debounceTime`, `distinctUntilChanged`, and `switchMap` operators,
imported as [described above](guide/server-communication#rxjs-library). imported as [described above](guide/http#rxjs-library).
{@a create-stream} {@a create-stream}
@ -932,7 +932,7 @@ The `WikiComponent` passes a new search term directly to the `WikipediaService`
The `WikiSmartComponent` class turns the user's keystrokes into an Observable _stream of search terms_ The `WikiSmartComponent` class turns the user's keystrokes into an Observable _stream of search terms_
with the help of a `Subject`, which you import from RxJS: with the help of a `Subject`, which you import from RxJS:
<code-example path="server-communication/src/app/wiki/wiki-smart.component.ts" region="import-subject" title="src/app/wiki/wiki-smart.component.ts" linenums="false"> <code-example path="http/src/app/wiki/wiki-smart.component.ts" region="import-subject" title="src/app/wiki/wiki-smart.component.ts" linenums="false">
</code-example> </code-example>
@ -942,7 +942,7 @@ The component creates a `searchTermStream` as a `Subject` of type `string`.
The `search()` method adds each new search box value to that stream via the subject's `next()` method. The `search()` method adds each new search box value to that stream via the subject's `next()` method.
<code-example path="server-communication/src/app/wiki/wiki-smart.component.ts" region="subject" title="src/app/wiki/wiki-smart.component.ts" linenums="false"> <code-example path="http/src/app/wiki/wiki-smart.component.ts" region="subject" title="src/app/wiki/wiki-smart.component.ts" linenums="false">
</code-example> </code-example>
@ -956,7 +956,7 @@ The `search()` method adds each new search box value to that stream via the subj
The `WikiSmartComponent` listens to the *stream of search terms* and The `WikiSmartComponent` listens to the *stream of search terms* and
processes that stream _before_ calling the service. processes that stream _before_ calling the service.
<code-example path="server-communication/src/app/wiki/wiki-smart.component.ts" region="observable-operators" title="src/app/wiki/wiki-smart.component.ts" linenums="false"> <code-example path="http/src/app/wiki/wiki-smart.component.ts" region="observable-operators" title="src/app/wiki/wiki-smart.component.ts" linenums="false">
</code-example> </code-example>
@ -1020,7 +1020,7 @@ This sample creates a class that sets the default `Content-Type` header to JSON.
It exports a constant with the necessary `RequestOptions` provider to simplify registration in `AppModule`. It exports a constant with the necessary `RequestOptions` provider to simplify registration in `AppModule`.
<code-example path="server-communication/src/app/default-request-options.service.ts" title="src/app/default-request-options.service.ts" linenums="false"> <code-example path="http/src/app/default-request-options.service.ts" title="src/app/default-request-options.service.ts" linenums="false">
</code-example> </code-example>
@ -1028,7 +1028,7 @@ It exports a constant with the necessary `RequestOptions` provider to simplify r
Then it registers the provider in the root `AppModule`. Then it registers the provider in the root `AppModule`.
<code-example path="server-communication/src/app/app.module.ts" region="provide-default-request-options" title="src/app/app.module.ts (provide default request header)" linenums="false"> <code-example path="http/src/app/app.module.ts" region="provide-default-request-options" title="src/app/app.module.ts (provide default request header)" linenums="false">
</code-example> </code-example>
@ -1047,14 +1047,14 @@ Remember to include this provider during setup when unit testing the app's HTTP
After this change, the `header` option setting in `HeroService.create()` is no longer necessary, After this change, the `header` option setting in `HeroService.create()` is no longer necessary,
<code-example path="server-communication/src/app/toh/hero.service.ts" linenums="false" title="src/app/toh/hero.service.ts (create)" region="create"> <code-example path="http/src/app/toh/hero.service.ts" linenums="false" title="src/app/toh/hero.service.ts (create)" region="create">
</code-example> </code-example>
You can confirm that `DefaultRequestOptions` is working by examing HTTP requests in the browser developer tools' network tab. You can confirm that `DefaultRequestOptions` is working by examing HTTP requests in the browser developer tools' network tab.
If you're short-circuiting the server call with something like the [_in-memory web api_](guide/server-communication#in-mem-web-api), If you're short-circuiting the server call with something like the [_in-memory web api_](guide/http#in-mem-web-api),
try commenting-out the `create` header option, try commenting-out the `create` header option,
set a breakpoint on the POST call, and step through the request processing set a breakpoint on the POST call, and step through the request processing
to verify the header is there. to verify the header is there.
@ -1086,7 +1086,7 @@ posed by top-level JSON arrays.
You'd set the endpoint to the JSON file like this: You'd set the endpoint to the JSON file like this:
<code-example path="server-communication/src/app/toh/hero.service.ts" region="endpoint-json" title="src/app/toh/hero.service.ts" linenums="false"> <code-example path="http/src/app/toh/hero.service.ts" region="endpoint-json" title="src/app/toh/hero.service.ts" linenums="false">
</code-example> </code-example>
@ -1122,7 +1122,7 @@ are arrays of objects in those collections.
Here's the class for this sample, based on the JSON data: Here's the class for this sample, based on the JSON data:
<code-example path="server-communication/src/app/hero-data.ts" title="src/app/hero-data.ts" linenums="false"> <code-example path="http/src/app/hero-data.ts" title="src/app/hero-data.ts" linenums="false">
</code-example> </code-example>
@ -1130,7 +1130,7 @@ Here's the class for this sample, based on the JSON data:
Ensure that the `HeroService` endpoint refers to the web API: Ensure that the `HeroService` endpoint refers to the web API:
<code-example path="server-communication/src/app/toh/hero.service.ts" region="endpoint" title="src/app/toh/hero.service.ts" linenums="false"> <code-example path="http/src/app/toh/hero.service.ts" region="endpoint" title="src/app/toh/hero.service.ts" linenums="false">
</code-example> </code-example>
@ -1141,7 +1141,7 @@ Finally, redirect client HTTP requests to the in-memory web API by
adding the `InMemoryWebApiModule` to the `AppModule.imports` list. adding the `InMemoryWebApiModule` to the `AppModule.imports` list.
At the same time, call its `forRoot()` configuration method with the `HeroData` class. At the same time, call its `forRoot()` configuration method with the `HeroData` class.
<code-example path="server-communication/src/app/app.module.ts" region="in-mem-web-api" title="src/app/app.module.ts" linenums="false"> <code-example path="http/src/app/app.module.ts" region="in-mem-web-api" title="src/app/app.module.ts" linenums="false">
</code-example> </code-example>
@ -1170,7 +1170,7 @@ while setting the metadata for the root `AppModule`. Don't call it again.
Here is the final, revised version of <code>src/app/app.module.ts</code>, demonstrating these steps. Here is the final, revised version of <code>src/app/app.module.ts</code>, demonstrating these steps.
<code-example path="server-communication/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (excerpt)"> <code-example path="http/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (excerpt)">
</code-example> </code-example>

View File

@ -226,9 +226,9 @@
]}, ]},
{ {
"url": "guide/server-communication", "url": "guide/http",
"title": "HTTP Client", "title": "HTTP",
"tooltip": "Use an HTTP Client to talk to a remote server." "tooltip": "Use HTTP to talk to a remote server."
}, },
{ {

View File

@ -6,10 +6,11 @@
"public": "dist", "public": "dist",
"cleanUrls": true, "cleanUrls": true,
"redirects": [ "redirects": [
// cli-quickstart.html glossary.html, quickstart.html // cli-quickstart.html glossary.html, quickstart.html, server-communication.html
{"type": 301, "source": "/docs/ts/latest/cli-quickstart.html", "destination": "/guide/cli-quickstart"}, {"type": 301, "source": "/docs/ts/latest/cli-quickstart.html", "destination": "/guide/cli-quickstart"},
{"type": 301, "source": "/docs/ts/latest/glossary.html", "destination": "/guide/glossary"}, {"type": 301, "source": "/docs/ts/latest/glossary.html", "destination": "/guide/glossary"},
{"type": 301, "source": "/docs/ts/latest/quickstart.html", "destination": "/guide/quickstart"}, {"type": 301, "source": "/docs/ts/latest/quickstart.html", "destination": "/guide/quickstart"},
{"type": 301, "source": "/docs/ts/latest/guide/server-communication.html", "destination": "/guide/http"},
// cookbook, cookbook/, cookbook/index.html // cookbook, cookbook/, cookbook/index.html
{"type": 301, "source": "/docs/ts/latest/cookbook", "destination": "/guide/cb-index"}, {"type": 301, "source": "/docs/ts/latest/cookbook", "destination": "/guide/cb-index"},

View File

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

Before

Width:  |  Height:  |  Size: 172 KiB

After

Width:  |  Height:  |  Size: 172 KiB

View File

Before

Width:  |  Height:  |  Size: 242 KiB

After

Width:  |  Height:  |  Size: 242 KiB

View File

Before

Width:  |  Height:  |  Size: 156 KiB

After

Width:  |  Height:  |  Size: 156 KiB