5 lines
36 KiB
JSON
5 lines
36 KiB
JSON
|
{
|
||
|
|
"id": "tutorial/toh-pt4",
|
||
|
|
"title": "Add services",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/tutorial/toh-pt4.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=\"add-services\">Add services<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt4#add-services\"><i class=\"material-icons\">link</i></a></h1>\n<p>The Tour of Heroes <code>HeroesComponent</code> is currently getting and displaying fake data.</p>\n<p>After the refactoring in this tutorial, <code>HeroesComponent</code> will be lean and focused on supporting the view.\nIt will also be easier to unit-test with a mock service.</p>\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=\"why-services\">Why services<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt4#why-services\"><i class=\"material-icons\">link</i></a></h2>\n<p>Components shouldn't fetch or save data directly and they certainly shouldn't knowingly present fake data.\nThey should focus on presenting data and delegate data access to a service.</p>\n<p>In this tutorial, you'll create a <code>HeroService</code> that all application classes can use to get heroes.\nInstead of creating that service with the <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new\"><code>new</code> keyword</a>,\nyou'll rely on Angular <a href=\"guide/dependency-injection\"><em>dependency injection</em></a>\nto inject it into the <code>HeroesComponent</code> constructor.</p>\n<p>Services are a great way to share information among classes that <em>don't know each other</em>.\nYou'll create a <code>MessageService</code> and inject it in two places.</p>\n<ol>\n<li>Inject in HeroService, which uses the service to send a message.</li>\n<li>Inject in MessagesComponent, which displays that message, and also displays the ID\nwhen the user clicks a hero.</li>\n</ol>\n<h2 id=\"create-the-heroservice\">Create the <code>HeroService</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt4#create-the-heroservice\"><i class=\"material-icons\">link</i></a></h2>\n<p>Using the Angular CLI, create a service called <code>hero</code>.</p>\n<code-example language=\"sh\" class=\"code-shell\">\n ng generate service hero\n</code-example>\n<p>The command generates a skeleton <code>HeroService</code> class in <code>src/app/hero.service.ts</code> as follows:</p>\n<code-example path=\"toh-pt4/src/app/hero.service.1.ts\" region=\"new\" header=\"src/app/hero.service.ts (new service)\">\nimport { <a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a> } from '@angular/core';\n\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>({\n providedIn: 'root',\n})\nexport class HeroService {\n\n constructor() { }\n\n}\n\n</code-example>\n<h3 id=\"injectable-services\"><code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()</code> services<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt4#injectable-services\"><i class=\"material-icons\">link</i></a></h3>\n<p>Notice that the new service imports the Angular <code><a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a></code> symbol and annotates\nthe class with the <code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()</code> decorator. This marks the class as one that participates in the <em>dependency injection system</em>. The <code>HeroService</code> class is going to provide an injectable service, and it can also have its own injected dependencies.\nIt doesn't have any dependencies yet, but <a href=\"tutorial/toh-pt4#inject-message-service\">it will soon</a>.</p>\n<p>The <code>@<a href=\"api/cor
|
||
|
|
}
|