Czym są usługi i wstrzykiwanie zależności w Angular?

Question

Accepted Answer

**Usługa** to klasa dla **logiki nie-UI** — pobieranie danych, reguły biznesowe, stan współdzielony, rejestrowanie — którą mogą ponownie używać komponenty. **Dependency Injection (DI)** to sposób, w jaki Angular *dostarcza* te usługi komponentom, które ich potrzebują, zamiast aby komponenty tworzyły je ręcznie.

## Defining a service

```ts
import { Injectable } from "@angular/core";

@Injectable({ providedIn: "root" }) // makes it a singleton available app-wide
export class UserService {
  private users = [];
  getUsers() { return this.users; }
  addUser(u) { this.users.push(u); }
}
```

Dekorator `@Injectable({ providedIn: "root" })` rejestruje usługę w systemie DI Angular'a jako jedno wspólne wystąpienie (singleton) dla całej aplikacji.

## Injecting it into a component

```ts
@Component({ ... })
export class UserListComponent {
  // Angular sees this constructor param and INJECTS the singleton automatically
  constructor(private userService: UserService) {}

users = this.userService.getUsers(); // just use it
}
```

Po prostu deklarujesz usługę jako parametr konstruktora; DI Angular'a **tworzy i dostarcza** instancję. Nigdy nie piszesz `new UserService()`. (Nowoczesny Angular może również używać funkcji `inject()` zamiast wstrzykiwania przez konstruktor.)

```ts
import { inject } from "@angular/core";
export class UserListComponent {
  private userService = inject(UserService); // alternative injection style
}
```

## Why DI is valuable

```text
✓ Single source of truth — one shared UserService instance across components
✓ Loose coupling — components depend on the type, not on constructing it
✓ Testability — swap in a mock service in tests easily
✓ Lifecycle management — Angular handles creation and sharing
```

Ponieważ komponent nie konstruuje swoich zależności, możesz wstrzyknąć **fałszywą** usługę w testach lub zmienić implementację na poziomie aplikacji w jednym miejscu.

## Dlaczego to ważne

Usługi + DI są centralne w architekturze Angular'a: komponenty pozostają skoncentrowane na interfejsie użytkownika, podczas gdy usługi zawierają logikę i stan, a DI łączy je ze minimalnym sprzęganiem.

To rozdzielenie (i testowalność, którą ze sobą niesie) jest jedną z definiujących mocnych stron Angular'a — zapożyczoną z frameworków backendowych — a `@Injectable({ providedIn: 'root' })` to codzienny wzorzec dla wspólnego, wstrzykiwalnego singletona.