Mik az Angular-ban a szolgáltatások (services) és a dependency injection?

Question

IT Interview Practice · Accepted Answer

A **szolgáltatás (service)** egy osztály **nem felhasználóifelület-logikához** — adatletöltés, üzleti szabályok, megosztott állapot, naplózás — amelyet az összetevők (komponensek) újra tudnak használni. A **Dependency Injection (DI)** az a módszer, ahogyan az Angular *biztosítja* ezeket a szolgáltatásokat az őket igénylő összetevőknek, ahelyett hogy az összetevők kézzel hoznák létre őket.

## Szolgáltatás definiálása

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

A `@Injectable({ providedIn: "root" })` dekorátor regisztrálja a szolgáltatást az Angular DI rendszerében egyetlen megosztott instanciaként (singleton) a teljes alkalmazáshoz.

## Injektálása egy komponensbe

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

Egyszerűen deklarálja a szolgáltatást konstruktor paraméterként; az Angular DI **létrehozza és biztosítja** az instanciát. Sosem írja azt, hogy `new UserService()`. (A modern Angular ehelyett a `inject()` függvényt is használhatja konstruktor injektálás helyett.)

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

## Miért értékes a DI

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

Mivel az összetevő nem konstruálja meg függőségeit, tesztekben **hamis** szolgáltatást injektálhat, vagy az implementációt az alkalmazás szintjén egy helyen módosíthatja.

## Miért fontos ez

A szolgáltatások + DI az Angular architektúra magja: az összetevők a felhasználóifelületre összpontosítanak, míg a szolgáltatások logikát és állapotot tartalmaznak, a DI pedig minimális csatolással köti össze őket.

Ez a szétválasztás (és az általa nyújtott tesztelhetőség) az Angular meghatározó erőssége — háttérrendszer keretrendszerektől kölcsönzött — és a `@Injectable({ providedIn: 'root' })` a mindennapi minta egy megosztott, injektálható singleton esetén.

Szolgáltatás definiálása

Injektálása egy komponensbe

Miért értékes a DI

Miért fontos ez

Kapcsolódó kérdések