5 lines
24 KiB
JSON
5 lines
24 KiB
JSON
|
{
|
||
|
|
"id": "guide/dependency-injection-providers",
|
||
|
|
"title": "Dependency providers",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/dependency-injection-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=\"dependency-providers\">Dependency providers<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/dependency-injection-providers#dependency-providers\"><i class=\"material-icons\">link</i></a></h1>\n<p>By configuring providers, you can make services available to the parts of your application that need them.</p>\n<p>A dependency <a href=\"guide/glossary#provider\">provider</a> configures an injector with a <a href=\"guide/glossary#di-token\">DI token</a>, which that injector uses to provide the runtime version of a dependency value.</p>\n<h2 id=\"specifying-a-provider-token\">Specifying a provider token<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/dependency-injection-providers#specifying-a-provider-token\"><i class=\"material-icons\">link</i></a></h2>\n<p>If you specify the service class as the provider token, the default behavior is for the injector to instantiate that class with <code>new</code>.</p>\n<p>In the following example, the <code>Logger</code> class provides a <code>Logger</code> instance.</p>\n<code-example path=\"dependency-injection/src/app/providers.component.ts\" region=\"providers-logger\">\nproviders: [Logger]\n\n</code-example>\n<p>You can, however, configure an injector with an alternative provider in order to deliver some other object that provides the needed logging functionality.</p>\n<p>You can configure an injector with a service class, you can provide a substitute class, an object, or a factory function.</p>\n<a id=\"token\"></a>\n<a id=\"injection-token\"></a>\n<h2 id=\"dependency-injection-tokens\">Dependency injection tokens<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/dependency-injection-providers#dependency-injection-tokens\"><i class=\"material-icons\">link</i></a></h2>\n<p>When you configure an <a href=\"guide/glossary#injector\">injector</a> with a <a href=\"guide/glossary#provider\">provider</a>, you are associating that provider with a <a href=\"guide/glossary#di-token\">dependency injection token</a>, or DI token.\nThe injector allows Angular create a map of any internal dependencies.\nThe DI token acts as a key to that map.</p>\n<p>The dependency value is an instance, and the class type serves as a lookup key.\nHere, the injector uses the <code>HeroService</code> type as the token for looking up <code>heroService</code>.</p>\n<code-example path=\"dependency-injection/src/app/injector.component.ts\" region=\"get-hero-service\" header=\"src/app/injector.component.ts\">\nheroService: HeroService;\n\n</code-example>\n<p>When you define a constructor parameter with the <code>HeroService</code> class type, Angular knows to inject the service associated with that <code>HeroService</code> class token:</p>\n<code-example path=\"dependency-injection/src/app/heroes/hero-list.component.ts\" region=\"ctor-signature\" header=\"src/app/heroes/hero-list.component.ts\">\nconstructor(heroService: HeroService)\n\n</code-example>\n<p>Though classes provide many dependency values, the expanded <code>provide</code> object lets you associate different kinds of providers with a DI token.</p>\n<a id=\"provide\"></a>\n<h2 id=\"defining-providers\">Defining providers<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/dependency-injection-providers#defining-providers\"><i class=\"material-icons\">link</i></a></h2>\n<p>The class provider syntax is a shorthand expression that expands into a provider configuration, defined by the <a href=\"api/core/Provider\"><code>Provider</code> interface</a>.\nThe following example is the class provider syntax for providing a <code>
|
||
|
|
}
|