5 lines
19 KiB
JSON
5 lines
19 KiB
JSON
|
{
|
||
|
|
"id": "guide/singleton-services",
|
||
|
|
"title": "Singleton services",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/singleton-services.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=\"singleton-services\">Singleton services<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/singleton-services#singleton-services\"><i class=\"material-icons\">link</i></a></h1>\n<p>A singleton service is a service for which only one instance exists in an app.</p>\n<p>For a sample app using the app-wide singleton service that this page describes, see the\n<live-example name=\"ngmodules\"></live-example> showcasing all the documented features of NgModules.</p>\n<h2 id=\"providing-a-singleton-service\">Providing a singleton service<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/singleton-services#providing-a-singleton-service\"><i class=\"material-icons\">link</i></a></h2>\n<p>There are two ways to make a service a singleton in Angular:</p>\n<ul>\n<li>Set the <code>providedIn</code> property of the <code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()</code> to <code>\"root\"</code>.</li>\n<li>Include the service in the <code>AppModule</code> or in a module that is only imported by the <code>AppModule</code></li>\n</ul>\n<a id=\"providedIn\"></a>\n<h3 id=\"using-providedin\">Using <code>providedIn</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/singleton-services#using-providedin\"><i class=\"material-icons\">link</i></a></h3>\n<p>Beginning with Angular 6.0, the preferred way to create a singleton service is to set <code>providedIn</code> to <code>root</code> on the service's <code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()</code> decorator. This tells Angular\nto provide the service in the application root.</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>For more detailed information on services, see the <a href=\"tutorial/toh-pt4\">Services</a> chapter of the\n<a href=\"tutorial\">Tour of Heroes tutorial</a>.</p>\n<h3 id=\"ngmodule-providers-array\">NgModule <code>providers</code> array<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/singleton-services#ngmodule-providers-array\"><i class=\"material-icons\">link</i></a></h3>\n<p>In apps built with Angular versions prior to 6.0, services are registered NgModule <code>providers</code> arrays as follows:</p>\n<code-example language=\"ts\">\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n ...\n providers: [UserService],\n ...\n})\n</code-example>\n<p>If this NgModule were the root <code>AppModule</code>, the <code>UserService</code> would be a singleton and available\nthroughout the app. Though you may see it coded this way, using the <code>providedIn</code> property of the <code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()</code> decorator on the service itself is preferable as of Angular 6.0 as it makes your services tree-shakable.</p>\n<a id=\"forRoot\"></a>\n<h2 id=\"the-forroot-pattern\">The <code>forRoot()</code> pattern<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/singleton-services#the-forroot-pattern\"><i class=\"material-icons\">link</i></a></h2>\n<p>Generally, you'll only need <code>providedIn</code> for providing services and <code>forRoot()</code>/<code>forChild()</code> for routing. However, understanding how <code>forRoot()</code> works to make sure a service is a singl
|
||
|
|
}
|