5 lines
9.6 KiB
JSON
5 lines
9.6 KiB
JSON
|
{
|
||
|
|
"id": "guide/dependency-injection",
|
||
|
|
"title": "Dependency injection in Angular",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/dependency-injection.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=\"dependency-injection-in-angular\">Dependency injection in Angular<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/dependency-injection#dependency-injection-in-angular\"><i class=\"material-icons\">link</i></a></h1>\n<p>Dependencies are services or objects that a class needs to perform its function.\nDependency injection, or DI, is a design pattern in which a class requests dependencies from external sources rather than creating them.</p>\n<p>Angular's DI framework provides dependencies to a class upon instantiation.\nYou can use Angular DI to increase flexibility and modularity in your applications.</p>\n<div class=\"alert is-helpful\">\n<p>See the <live-example></live-example> for a working example containing the code snippets in this guide.</p>\n</div>\n<h2 id=\"creating-an-injectable-service\">Creating an injectable service<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/dependency-injection#creating-an-injectable-service\"><i class=\"material-icons\">link</i></a></h2>\n<p>To generate a new <code>HeroService</code> class in the <code>src/app/heroes</code> folder use the following <a href=\"cli\">Angular CLI</a> command.</p>\n<code-example language=\"sh\" class=\"code-shell\">\nng generate service heroes/hero\n</code-example>\n<p>This command creates the following default <code>HeroService</code>.</p>\n<code-example path=\"dependency-injection/src/app/heroes/hero.service.0.ts\" header=\"src/app/heroes/hero.service.ts (CLI-generated)\">\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 constructor() { }\n}\n\n\n</code-example>\n<p>The <code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()</code> decorator specifies that Angular can use this class in the DI system.\nThe metadata, <code>providedIn: 'root'</code>, means that the <code>HeroService</code> is visible throughout the application.</p>\n<p>Next, to get the hero mock data, add a <code>getHeroes()</code> method that returns the heroes from <code>mock.heroes.ts</code>.</p>\n<code-example path=\"dependency-injection/src/app/heroes/hero.service.3.ts\" header=\"src/app/heroes/hero.service.ts\">\nimport { <a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a> } from '@angular/core';\nimport { HEROES } from './mock-heroes';\n\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>({\n // declares that this service should be created\n // by the root application injector.\n providedIn: 'root',\n})\nexport class HeroService {\n getHeroes() { return HEROES; }\n}\n\n\n</code-example>\n<p>For clarity and maintainability, it is recommended that you define components and services in separate files.</p>\n<p>If you do combine a component and service in the same file, it is important to define the service first, and then the component.\nIf you define the component before the service, Angular returns a run-time null reference error.</p>\n<a id=\"injector-config\"></a>\n<a id=\"bootstrap\"></a>\n<h2 id=\"injecting-services\">Injecting services<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/dependency-injection#injecting-services\"><i class=\"material-icons\">link</i></a></h2>\n<p>Injecting services results in making them visible to a component.</p>\n<p>To inject a dependency in a component's <code>constructor()</code>, supply a constructor argument with the dependency type.\nThe following example specifies the <code>HeroService</code> in the <code>H
|
||
|
|
}
|