5 lines
97 KiB
JSON
5 lines
97 KiB
JSON
|
{
|
||
|
|
"id": "guide/http",
|
||
|
|
"title": "Communicating with backend services using HTTP",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/http.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"communicating-with-backend-services-using-http\">Communicating with backend services using HTTP<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/http#communicating-with-backend-services-using-http\"><i class=\"material-icons\">link</i></a></h1>\n<p>Most front-end applications need to communicate with a server over the HTTP protocol, in order to download or upload data and access other back-end services.\nAngular provides a simplified client HTTP API for Angular applications, the <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> service class in <code>@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a></code>.</p>\n<p>The HTTP client service offers the following major features.</p>\n<ul>\n<li>The ability to request <a href=\"guide/http#typed-response\">typed response objects</a>.</li>\n<li>Streamlined <a href=\"guide/http#error-handling\">error handling</a>.</li>\n<li><a href=\"guide/http#testing-requests\">Testability</a> features.</li>\n<li>Request and response <a href=\"guide/http#intercepting-requests-and-responses\">interception</a>.</li>\n</ul>\n<h5 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/http#prerequisites\"><i class=\"material-icons\">link</i></a></h5>\n<p>Before working with the <code><a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a></code>, you should have a basic understanding of the following:</p>\n<ul>\n<li>TypeScript programming</li>\n<li>Usage of the HTTP protocol</li>\n<li>Angular app-design fundamentals, as described in <a href=\"guide/architecture\">Angular Concepts</a></li>\n<li>Observable techniques and operators. See the <a href=\"guide/observables\">Observables</a> guide.</li>\n</ul>\n<h2 id=\"setup-for-server-communication\">Setup for server communication<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/http#setup-for-server-communication\"><i class=\"material-icons\">link</i></a></h2>\n<p>Before you can use <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code>, you need to import the Angular <code><a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a></code>.\nMost apps do so in the root <code>AppModule</code>.</p>\n<code-example path=\"http/src/app/app.module.ts\" region=\"sketch\" header=\"app/app.module.ts (excerpt)\">\nimport { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';\nimport { <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a> } from '@angular/platform-browser';\nimport { <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a> } from '@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a>';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n // import <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a> after BrowserModule.\n <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a>,\n ],\n declarations: [\n AppComponent,\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {}\n\n</code-example>\n<p>You can then inject the <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> service as a dependency of an application class, as shown in the following <code>ConfigService</code> example.</p>\n<code-example path=\"http/src/app/confi
|
||
|
|
}
|