An Angular service is an object that supplies functionality to components, directives, pipes, or other services. Instead of creating it with `new` or passing it through input properties, a dependent class can receive it through dependency injection. This keeps shared functionality separate from the components that use it. section 18.0 section 18.2.2
Replace a passed discount object
Suppose one component edits a discount and another displays it. A parent can create one object and pass it to both through input bindings, but that makes the parent responsible for distributing it. Make the discount class a service instead: each component declares a `DiscountService` constructor parameter, and the input bindings are no longer needed. section 18.2.1 section 18.2.2
To make that change:
- Apply `@Injectable()` to the class. It is especially necessary when Angular must resolve the class’s own constructor dependencies; applying it otherwise still makes its intended role clear. section 18.2.2
- Register the class in an Angular module’s `providers` property so Angular can resolve requests for it. section 18.5
- Declare the required service type in a consumer’s constructor. Angular inspects constructor arguments when creating the consumer and supplies registered dependencies. section 18.2.2
Listing 18.22. Denoting a service and dependency in the repository.model.ts file in the src/app folder
import { Product } from "./product.model";
import { SimpleDataSource } from "./datasource.model";
import { Signal, WritableSignal, signal } from "@angular/core";
import { Injectable } from "@angular/core";
@Injectable()
export class Model {
//private dataSource: SimpleDataSource;
private products: WritableSignal<Product[]>;
private locator = (p: Product, id: number | any) => p.id == id;
constructor(private dataSource: SimpleDataSource) {
//this.dataSource = new SimpleDataSource();
this.products = signal(new Array<Product>());
this.products.mutate(prods =>
this.dataSource.getData().forEach(p => prods.push(p)));
}
// ...statements omitted for brevity...
}
A repository service declares its data-source dependency in its constructor rather than constructing the data source itself. Services can therefore form a dependency chain, which Angular resolves when creating the component that needs the repository. section 18.3.1
A service can also hold shared application state. A cart service exposes product selections through a read-only signal while retaining methods that control changes. A message service similarly accepts reports and exposes messages through a read-only signal. For server-side rendering, a platform service can provide a consistent `isServer` check. section 6.2.1 section 20.3.1 section 8.2.2
Use services where shared access or independent testing justifies them. Replacing every relationship between components is not a requirement: passing an object through a parent can still make an application’s structure clear. The useful balance depends on how much isolation and reuse the application needs. section 18.0 section 18.4
