diff --git a/aio/content/examples/server-communication/e2e-spec.ts b/aio/content/examples/http/e2e-spec.ts similarity index 100% rename from aio/content/examples/server-communication/e2e-spec.ts rename to aio/content/examples/http/e2e-spec.ts diff --git a/aio/content/examples/server-communication/example-config.json b/aio/content/examples/http/example-config.json similarity index 100% rename from aio/content/examples/server-communication/example-config.json rename to aio/content/examples/http/example-config.json diff --git a/aio/content/examples/server-communication/plnkr.json b/aio/content/examples/http/plnkr.json similarity index 100% rename from aio/content/examples/server-communication/plnkr.json rename to aio/content/examples/http/plnkr.json diff --git a/aio/content/examples/server-communication/src/app/app.component.ts b/aio/content/examples/http/src/app/app.component.ts similarity index 100% rename from aio/content/examples/server-communication/src/app/app.component.ts rename to aio/content/examples/http/src/app/app.component.ts diff --git a/aio/content/examples/server-communication/src/app/app.module.1.ts b/aio/content/examples/http/src/app/app.module.1.ts similarity index 100% rename from aio/content/examples/server-communication/src/app/app.module.1.ts rename to aio/content/examples/http/src/app/app.module.1.ts diff --git a/aio/content/examples/server-communication/src/app/app.module.ts b/aio/content/examples/http/src/app/app.module.ts similarity index 100% rename from aio/content/examples/server-communication/src/app/app.module.ts rename to aio/content/examples/http/src/app/app.module.ts diff --git a/aio/content/examples/server-communication/src/app/default-request-options.service.ts b/aio/content/examples/http/src/app/default-request-options.service.ts similarity index 100% rename from aio/content/examples/server-communication/src/app/default-request-options.service.ts rename to aio/content/examples/http/src/app/default-request-options.service.ts diff --git a/aio/content/examples/server-communication/src/app/hero-data.ts b/aio/content/examples/http/src/app/hero-data.ts similarity index 100% rename from aio/content/examples/server-communication/src/app/hero-data.ts rename to aio/content/examples/http/src/app/hero-data.ts diff --git a/aio/content/examples/server-communication/src/app/heroes.json b/aio/content/examples/http/src/app/heroes.json similarity index 100% rename from aio/content/examples/server-communication/src/app/heroes.json rename to aio/content/examples/http/src/app/heroes.json diff --git a/aio/content/examples/server-communication/src/app/toh/hero-list.component.html b/aio/content/examples/http/src/app/toh/hero-list.component.html similarity index 100% rename from aio/content/examples/server-communication/src/app/toh/hero-list.component.html rename to aio/content/examples/http/src/app/toh/hero-list.component.html diff --git a/aio/content/examples/server-communication/src/app/toh/hero-list.component.promise.ts b/aio/content/examples/http/src/app/toh/hero-list.component.promise.ts similarity index 100% rename from aio/content/examples/server-communication/src/app/toh/hero-list.component.promise.ts rename to aio/content/examples/http/src/app/toh/hero-list.component.promise.ts diff --git a/aio/content/examples/server-communication/src/app/toh/hero-list.component.ts b/aio/content/examples/http/src/app/toh/hero-list.component.ts similarity index 100% rename from aio/content/examples/server-communication/src/app/toh/hero-list.component.ts rename to aio/content/examples/http/src/app/toh/hero-list.component.ts diff --git a/aio/content/examples/server-communication/src/app/toh/hero.service.promise.ts b/aio/content/examples/http/src/app/toh/hero.service.promise.ts similarity index 100% rename from aio/content/examples/server-communication/src/app/toh/hero.service.promise.ts rename to aio/content/examples/http/src/app/toh/hero.service.promise.ts diff --git a/aio/content/examples/server-communication/src/app/toh/hero.service.ts b/aio/content/examples/http/src/app/toh/hero.service.ts similarity index 100% rename from aio/content/examples/server-communication/src/app/toh/hero.service.ts rename to aio/content/examples/http/src/app/toh/hero.service.ts diff --git a/aio/content/examples/server-communication/src/app/toh/hero.ts b/aio/content/examples/http/src/app/toh/hero.ts similarity index 100% rename from aio/content/examples/server-communication/src/app/toh/hero.ts rename to aio/content/examples/http/src/app/toh/hero.ts diff --git a/aio/content/examples/server-communication/src/app/wiki/wiki-smart.component.ts b/aio/content/examples/http/src/app/wiki/wiki-smart.component.ts similarity index 100% rename from aio/content/examples/server-communication/src/app/wiki/wiki-smart.component.ts rename to aio/content/examples/http/src/app/wiki/wiki-smart.component.ts diff --git a/aio/content/examples/server-communication/src/app/wiki/wiki.component.ts b/aio/content/examples/http/src/app/wiki/wiki.component.ts similarity index 100% rename from aio/content/examples/server-communication/src/app/wiki/wiki.component.ts rename to aio/content/examples/http/src/app/wiki/wiki.component.ts diff --git a/aio/content/examples/server-communication/src/app/wiki/wikipedia.service.1.ts b/aio/content/examples/http/src/app/wiki/wikipedia.service.1.ts similarity index 100% rename from aio/content/examples/server-communication/src/app/wiki/wikipedia.service.1.ts rename to aio/content/examples/http/src/app/wiki/wikipedia.service.1.ts diff --git a/aio/content/examples/server-communication/src/app/wiki/wikipedia.service.ts b/aio/content/examples/http/src/app/wiki/wikipedia.service.ts similarity index 100% rename from aio/content/examples/server-communication/src/app/wiki/wikipedia.service.ts rename to aio/content/examples/http/src/app/wiki/wikipedia.service.ts diff --git a/aio/content/examples/server-communication/src/index.html b/aio/content/examples/http/src/index.html similarity index 100% rename from aio/content/examples/server-communication/src/index.html rename to aio/content/examples/http/src/index.html diff --git a/aio/content/examples/server-communication/src/main.ts b/aio/content/examples/http/src/main.ts similarity index 100% rename from aio/content/examples/server-communication/src/main.ts rename to aio/content/examples/http/src/main.ts diff --git a/aio/content/guide/server-communication.md b/aio/content/guide/http.md similarity index 78% rename from aio/content/guide/server-communication.md rename to aio/content/guide/http.md index dd70b6a28d..b633eefb8b 100644 --- a/aio/content/guide/server-communication.md +++ b/aio/content/guide/http.md @@ -1,8 +1,8 @@ @title -HTTP Client +HTTP @intro -Use an HTTP Client to talk to a remote server. +Use HTTP to talk to a remote server. @description @@ -30,52 +30,52 @@ The Angular HTTP library simplifies application programming with the **XHR** and # Contents -* [Demos](guide/server-communication#demos) -* [Providing HTTP Services](guide/server-communication#http-providers) -* [The Tour of Heroes *HTTP* client demo](guide/server-communication#http-client) +* [Demos](guide/http#demos) +* [Providing HTTP Services](guide/http#http-providers) +* [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) -
  • [RxJS library](guide/server-communication#rxjs-library) +* [Fetch data with `http.get()`](guide/http#fetch-data) +
  • [RxJS library](guide/http#rxjs-library)
    • -* [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) - * [Do not return the response object](guide/server-communication#no-return-response-object) - * [Always handle errors](guide/server-communication#error-handling) - * [`HeroListComponent` error handling](guide/server-communication#hero-list-component) + * [Parse to `JSON`](guide/http#parse-to-json) + * [Do not return the response object](guide/http#no-return-response-object) + * [Always handle errors](guide/http#error-handling) + * [`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) - * [JSON results](guide/server-communication#json-results) + * [Headers](guide/http#headers) + * [JSON results](guide/http#json-results) - + -* [Cross-Origin Requests: Wikipedia example](guide/server-communication#cors) +* [Cross-Origin Requests: Wikipedia example](guide/http#cors) -* [A wasteful app](guide/server-communication#wasteful-app) -
  • [More fun with Observables](guide/server-communication#more-observables) +* [A wasteful app](guide/http#wasteful-app) +
  • [More fun with Observables](guide/http#more-observables)
    • -* [Guarding against Cross-Site Request Forgery](guide/server-communication#xsrf) -* [Override default request headers (and other request options)](guide/server-communication#override-default-request-options) -* [Appendix: Tour of Heroes _in-memory web api_](guide/server-communication#in-mem-web-api) +* [Guarding against Cross-Site Request Forgery](guide/http#xsrf) +* [Override default request headers (and other request options)](guide/http#override-default-request-options) +* [Appendix: Tour of Heroes _in-memory web api_](guide/http#in-mem-web-api) A 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). -* [Fall back to Promises](guide/server-communication#promises). -* [Cross-Origin Requests: Wikipedia example](guide/server-communication#cors). -* [More fun with Observables](guide/server-communication#more-observables). +* [The Tour of Heroes *HTTP* client demo](guide/http#http-client). +* [Fall back to Promises](guide/http#promises). +* [Cross-Origin Requests: Wikipedia example](guide/http#cors). +* [More fun with Observables](guide/http#more-observables). The root `AppComponent` orchestrates these demos: - + @@ -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`. - + @@ -178,14 +178,14 @@ The app uses the Angular Http client to communicate via **XMLHttpRe It works like this:
    - ToH mini app + ToH mini app
    This demo has a single component, the `HeroListComponent`. Here's its template: - + @@ -211,7 +211,7 @@ Below the button is an area for an error message. ### The *HeroListComponent* class Here's the component class: - + @@ -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 Http client service: - + @@ -281,7 +281,7 @@ You can revise that `HeroService` to get the heroes from the server using the An Notice that the Angular Http client service is [injected](guide/dependency-injection) into the `HeroService` constructor. - + @@ -289,7 +289,7 @@ Notice that the Angular Http client service is Look closely at how to call `http.get`: - + @@ -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. Alternatively, you can temporarily target a JSON file by changing the endpoint URL: - + @@ -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. The `getHeroes()` method needs the `map()` and `catch()` operators so it imports them like this. - + @@ -363,7 +363,7 @@ The `getHeroes()` method needs the `map()` and `catch()` operators so it imports ## Process the response object Remember that the `getHeroes()` method used an `extractData()` helper method to map the `http.get` response object to heroes: - + @@ -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 [*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. -That *something* is the [HeroListComponent](guide/server-communication#subscribe). +That *something* is the [HeroListComponent](guide/http#subscribe). @@ -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. - + @@ -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. - + @@ -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: - + @@ -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. -[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 at the same endpoint as `GET` heroes. 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: - + - + @@ -590,7 +590,7 @@ In the `return` statement, `options` is the *third* argument of the `post()` met ### 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. @@ -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. When the data arrive it pushes the new hero object into its `heroes` array for presentation to the user. - + @@ -631,11 +631,11 @@ highlighting just the parts that are different. - + - + @@ -659,11 +659,11 @@ You have to adjust the calling component to expect a `Promise` instead of an `Ob - + - + @@ -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 [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). @@ -746,7 +746,7 @@ types in a text box:
    - Wikipedia search app (v.1) + Wikipedia search app (v.1)
    @@ -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`. - + @@ -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: - + @@ -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: - + @@ -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. - + @@ -822,7 +822,7 @@ to the server. 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. - + @@ -865,7 +865,7 @@ It should only make requests when the user *stops typing*. Here's how it will work after refactoring:
    - Wikipedia search app (v.2) + Wikipedia search app (v.2)
    @@ -904,11 +904,11 @@ Here's the `WikiSmartComponent`, shown next to the original `WikiComponent`: - + - + @@ -919,7 +919,7 @@ Here's the `WikiSmartComponent`, shown next to the original `WikiComponent`: While the templates are virtually identical, there's a lot more RxJS in the "smart" version, 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} @@ -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_ with the help of a `Subject`, which you import from RxJS: - + @@ -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. - + @@ -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 processes that stream _before_ calling the service. - + @@ -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`. - + @@ -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`. - + @@ -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, - + 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, set a breakpoint on the POST call, and step through the request processing 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: - + @@ -1122,7 +1122,7 @@ are arrays of objects in those collections. Here's the class for this sample, based on the JSON data: - + @@ -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: - + @@ -1141,7 +1141,7 @@ Finally, redirect client HTTP requests to the in-memory web API by adding the `InMemoryWebApiModule` to the `AppModule.imports` list. At the same time, call its `forRoot()` configuration method with the `HeroData` class. - + @@ -1170,7 +1170,7 @@ while setting the metadata for the root `AppModule`. Don't call it again. Here is the final, revised version of src/app/app.module.ts, demonstrating these steps. - + diff --git a/aio/content/navigation.json b/aio/content/navigation.json index bbcd84b14f..597607d958 100644 --- a/aio/content/navigation.json +++ b/aio/content/navigation.json @@ -226,9 +226,9 @@ ]}, { - "url": "guide/server-communication", - "title": "HTTP Client", - "tooltip": "Use an HTTP Client to talk to a remote server." + "url": "guide/http", + "title": "HTTP", + "tooltip": "Use HTTP to talk to a remote server." }, { diff --git a/aio/firebase.json b/aio/firebase.json index 38c3fa162c..e535054d22 100644 --- a/aio/firebase.json +++ b/aio/firebase.json @@ -6,10 +6,11 @@ "public": "dist", "cleanUrls": true, "redirects": [ - // cli-quickstart.html glossary.html, quickstart.html - {"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/quickstart.html", "destination": "/guide/quickstart"}, + // 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/glossary.html", "destination": "/guide/glossary"}, + {"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 {"type": 301, "source": "/docs/ts/latest/cookbook", "destination": "/guide/cb-index"}, diff --git a/aio/src/assets/images/devguide/server-communication/hero-list.png b/aio/src/assets/images/devguide/http/hero-list.png similarity index 100% rename from aio/src/assets/images/devguide/server-communication/hero-list.png rename to aio/src/assets/images/devguide/http/hero-list.png diff --git a/aio/src/assets/images/devguide/server-communication/http-toh.gif b/aio/src/assets/images/devguide/http/http-toh.gif similarity index 100% rename from aio/src/assets/images/devguide/server-communication/http-toh.gif rename to aio/src/assets/images/devguide/http/http-toh.gif diff --git a/aio/src/assets/images/devguide/server-communication/wiki-1.gif b/aio/src/assets/images/devguide/http/wiki-1.gif similarity index 100% rename from aio/src/assets/images/devguide/server-communication/wiki-1.gif rename to aio/src/assets/images/devguide/http/wiki-1.gif diff --git a/aio/src/assets/images/devguide/server-communication/wiki-2.gif b/aio/src/assets/images/devguide/http/wiki-2.gif similarity index 100% rename from aio/src/assets/images/devguide/server-communication/wiki-2.gif rename to aio/src/assets/images/devguide/http/wiki-2.gif