5 lines
11 KiB
JSON
5 lines
11 KiB
JSON
|
{
|
||
|
|
"id": "guide/architecture-services",
|
||
|
|
"title": "Introduction to services and dependency injection",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/architecture-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=\"introduction-to-services-and-dependency-injection\">Introduction to services and dependency injection<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/architecture-services#introduction-to-services-and-dependency-injection\"><i class=\"material-icons\">link</i></a></h1>\n<p><em>Service</em> is a broad category encompassing any value, function, or feature that an app needs.\nA service is typically a class with a narrow, well-defined purpose.\nIt should do something specific and do it well.</p>\n<p>Angular distinguishes components from services to increase modularity and reusability.\nBy separating a component's view-related functionality from other kinds of processing,\nyou can make your component classes lean and efficient.</p>\n<p>Ideally, a component's job is to enable the user experience and nothing more.\nA component should present properties and methods for data binding,\nin order to mediate between the view (rendered by the template)\nand the application logic (which often includes some notion of a <em>model</em>).</p>\n<p>A component can delegate certain tasks to services, such as fetching data from the server,\nvalidating user input, or logging directly to the console.\nBy defining such processing tasks in an <em>injectable service class</em>, you make those tasks\navailable to any component.\nYou can also make your app more adaptable by injecting different providers of the same kind of service,\nas appropriate in different circumstances.</p>\n<p>Angular doesn't <em>enforce</em> these principles. Angular does help you <em>follow</em> these principles\nby making it easy to factor your application logic into services and make those services\navailable to components through <em>dependency injection</em>.</p>\n<h2 id=\"service-examples\">Service examples<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/architecture-services#service-examples\"><i class=\"material-icons\">link</i></a></h2>\n<p>Here's an example of a service class that logs to the browser console.</p>\n<code-example path=\"architecture/src/app/logger.service.ts\" header=\"src/app/logger.service.ts (class)\" region=\"class\">\nexport class Logger {\n log(msg: any) { console.log(msg); }\n error(msg: any) { console.error(msg); }\n warn(msg: any) { console.warn(msg); }\n}\n\n\n</code-example>\n<p>Services can depend on other services. For example, here's a <code>HeroService</code> that depends on the <code>Logger</code> service, and also uses <code>BackendService</code> to get heroes. That service in turn might depend on the <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> service to fetch heroes asynchronously from a server.</p>\n<code-example path=\"architecture/src/app/hero.service.ts\" header=\"src/app/hero.service.ts (class)\" region=\"class\">\nexport class HeroService {\n private heroes: Hero[] = [];\n\n constructor(\n private backend: BackendService,\n private logger: Logger) { }\n\n getHeroes() {\n this.backend.getAll(Hero).then( (heroes: Hero[]) => {\n this.logger.log(`Fetched ${heroes.length} heroes.`);\n this.heroes.push(...heroes); // fill cache\n });\n return this.heroes;\n }\n}\n\n\n</code-example>\n<h2 id=\"dependency-injection-di\">Dependency injection (DI)<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/architecture-services#dependency-injection-di\"><i class=\"material-icons\">link</i></a></h2>\n<img src=\"generated/images/guide/architecture/dependency-injection.png\" alt=\"Service\" class=\"left\" width=\"200\" height=\"90\">\n<p>DI is wired into the Angular framework
|
||
|
|
}
|