5 lines
13 KiB
JSON
5 lines
13 KiB
JSON
|
{
|
|||
|
|
"id": "guide/providers",
|
|||
|
|
"title": "Providing dependencies in modules",
|
|||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/providers.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=\"providing-dependencies-in-modules\">Providing dependencies in modules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/providers#providing-dependencies-in-modules\"><i class=\"material-icons\">link</i></a></h1>\n<p>A provider is an instruction to the <a href=\"/guide/dependency-injection\">Dependency Injection</a> system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.</p>\n<p>For the final sample app using the provider that this page describes,\nsee the <live-example></live-example>.</p>\n<h2 id=\"providing-a-service\">Providing a service<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/providers#providing-a-service\"><i class=\"material-icons\">link</i></a></h2>\n<p>If you already have an app that was created with the <a href=\"cli\">Angular CLI</a>, you can create a service using the <a href=\"cli/generate\"><code>ng generate</code></a> CLI command in the root project directory. Replace <em>User</em> with the name of your service.</p>\n<code-example language=\"sh\">\nng generate service User\n</code-example>\n<p>This command creates the following <code>UserService</code> skeleton:</p>\n<code-example path=\"providers/src/app/user.service.0.ts\" header=\"src/app/user.service.ts\">\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 UserService {\n}\n\n\n</code-example>\n<p>You can now inject <code>UserService</code> anywhere in your application.</p>\n<p>The service itself is a class that the CLI generated and that's decorated with <code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()</code>. By default, this decorator has a <code>providedIn</code> property, which creates a provider for the service. In this case, <code>providedIn: 'root'</code> specifies that Angular should provide the service in the root injector.</p>\n<h2 id=\"provider-scope\">Provider scope<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/providers#provider-scope\"><i class=\"material-icons\">link</i></a></h2>\n<p>When you add a service provider to the root application injector, it’s available throughout the app. Additionally, these providers are also available to all the classes in the app as long they have the lookup token.</p>\n<p>You should always provide your service in the root injector unless there is a case where you want the service to be available only if the consumer imports a particular <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code>.</p>\n<h2 id=\"providedin-and-ngmodules\"><code>providedIn</code> and NgModules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/providers#providedin-and-ngmodules\"><i class=\"material-icons\">link</i></a></h2>\n<p>It's also possible to specify that a service should be provided in a particular <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code>. For example, if you don't want <code>UserService</code> to be available to applications unless they import a <code>UserModule</code> you've created, you can specify that the service should be provided in the module:</p>\n<code-example path=\"providers/src/app/user.service.1.ts\" header=\"src/app/user.service.ts\">\nimport { <a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a> } from '@angular/core';\nimport { UserModule } from './user.module';\n\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</
|
|||
|
|
}
|