Što su servisi i dependency injection u Angularu?

Question

Accepted Answer

**Servis** je klasa za **logiku koja nije vezana uz UI** — dohvaćanje podataka, poslovnu logiku, dijeljeno stanje, logiranje — koju komponente mogu ponovno koristiti. **Dependency Injection (DI)** je način na koji Angular *pruža* te servise komponentama koje ih trebaju, umjesto da komponente sami kreiraju servise.

## Definiranje servisa

```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" })` registrira servis u Angular-ovom DI sustavu kao jednu dijeljenu instancu (singleton) za cijelu aplikaciju.

## Injektiranje u komponentu

```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
}
```

Servis jednostavno deklarirate kao parametar konstruktora; Angular-ov DI **kreira i dostavljaje** instancu. Nikad ne napišete `new UserService()`. (Moderni Angular može koristiti i `inject()` funkciju umjesto konstruktor injektiranja.)

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

## Zašto je DI dragocjena

```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
```

Budući da komponenta ne konstruira svoje ovisnosti, možete injektirati **lažan** servis u testove, ili promijeniti implementaciju na razini cijele aplikacije na jednom mjestu.

## Zašto je to važno

Servisi + DI su central arhitekturi Angular-a: komponente ostaju fokusirane na UI, a servisi sadrže logiku i stanje, a DI ih povezuje s minimalnim povezivanjem.

Ova separacija (i testabilnost koju donosi) je jedna od definirajućih snaga Angular-a — preuzeta iz backend frameworka — a `@Injectable({ providedIn: 'root' })` je svakodnevni obrazac za dijeljeni, injektibilni singleton.