5 lines
66 KiB
JSON
5 lines
66 KiB
JSON
|
{
|
||
|
|
"id": "tutorial/toh-pt6",
|
||
|
|
"title": "Get data from a server",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/tutorial/toh-pt6.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=\"get-data-from-a-server\">Get data from a server<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#get-data-from-a-server\"><i class=\"material-icons\">link</i></a></h1>\n<p>In this tutorial, you'll add the following data persistence features with help from\nAngular's <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code>.</p>\n<ul>\n<li>The <code>HeroService</code> gets hero data with HTTP requests.</li>\n<li>Users can add, edit, and delete heroes and save these changes over HTTP.</li>\n<li>Users can search for heroes by name.</li>\n</ul>\n<div class=\"alert is-helpful\">\n<p> For the sample application that this page describes, see the <live-example></live-example>.</p>\n</div>\n<h2 id=\"enable-http-services\">Enable HTTP services<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#enable-http-services\"><i class=\"material-icons\">link</i></a></h2>\n<p><code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> is Angular's mechanism for communicating with a remote server over HTTP.</p>\n<p>Make <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> available everywhere in the application in two steps. First, add it to the root <code>AppModule</code> by importing it:</p>\n<code-example path=\"toh-pt6/src/app/app.module.ts\" region=\"import-http-client\" header=\"src/app/app.module.ts (HttpClientModule import)\">\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</code-example>\n<p>Next, still in the <code>AppModule</code>, add <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> to the <code>imports</code> array:</p>\n<code-example path=\"toh-pt6/src/app/app.module.ts\" region=\"import-httpclientmodule\" header=\"src/app/app.module.ts (imports array excerpt)\">\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a>,\n ],\n})\n\n</code-example>\n<h2 id=\"simulate-a-data-server\">Simulate a data server<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#simulate-a-data-server\"><i class=\"material-icons\">link</i></a></h2>\n<p>This tutorial sample mimics communication with a remote data server by using the\n<a href=\"https://github.com/angular/angular/tree/master/packages/misc/angular-in-memory-web-api\" title=\"In-memory Web API\">In-memory Web API</a> module.</p>\n<p>After installing the module, the application will make requests to and receive responses from the <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code>\nwithout knowing that the <em>In-memory Web API</em> is intercepting those requests,\napplying them to an in-memory data store, and returning simulated responses.</p>\n<p>By using the In-memory Web API, you won't have to set up a server to learn about <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code>.</p>\n<div class=\"alert is-important\">\n<p><strong>Important:</strong> the In-memory Web API module has nothing to do with HTTP in Angular.</p>\n<p>If you're just reading this tutorial to learn about <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code>, you can <a href=\"tutorial/toh-pt6#import-heroes\">skip over</a> this step.\nIf you're coding along with this tutorial, stay here and add the In-memory Web A
|
||
|
|
}
|