Dependency Injection

Be kell importálni, provideolni, a constructor-ba behúzod és onnantól már használhatod a service-t a komponensben.

Ha két komponensbe behúzod ugyanazt a példányt a servioce-ből, akkor a service-n keresztül tudsz velük kommunikálni.

A Constructor-ba be kell írni a service nevét, és a dependency injection-t és a metódusait onnan tudom meghívni.

A Dependency Injection (DI), vagy magyarul a függőségibeszúrás, egy szoftvertervezési minta, amely segít abban, hogy a komponensek vagy osztályok könnyen elérjék és használják azokat az erőforrásokat és szolgáltatásokat, amelyekre szükségük van, anélkül, hogy azokat közvetlenül létrehoznák vagy menedzselnék. A DI-t gyakran használják a kódbeli szorosan összefüggő részek (coupling) csökkentésére, a tesztelhetőség növelésére, és a kód modularitásának elősegítésére.

Az Angularban a DI rendszer kulcsfontosságú, és központi szerepet játszik az alkalmazások architektúrájában.

Hogyan működik az Angularban a Dependency Injection?

Tokenek: Minden injectable (beszúrható) függőséget egy token reprezentál. Leggyakrabban ezek az osztály típusok maguk, de lehetnek egyszerű stringek vagy más értékek is.
Providers: Ezek meghatározzák, hogyan jön létre egy függőség vagy hogyan érhető el. Egy provider általában egy objektum, amelynek van egy provide mezője a token számára és egy useClass, useValue, useFactory vagy useExisting mező a létrehozási stratégiához.
Injector: Az injector felelős a függőségek létrehozásáért és tárolásáért. Amikor egy komponens vagy szolgáltatás egy függőséget kér, az injector megnézi a rendelkezésre álló providereket, létrehozza a megfelelő függőséget (ha még nem létezik) és visszaadja azt.
Dekorátorok: Az Angularban a @Injectable(), @Component(), @Directive(), és @Module() dekorátorok használják a DI rendszert. Például az @Injectable() dekorátorral jelölt szolgáltatások beszúrhatók más osztályokba vagy komponensekbe.

Egyszerű példa:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  // ...
}

@Component({
  selector: 'my-component',
  template: '...'
})
export class MyComponent {
  constructor(private myService: MyService) {
    // Most már használhatjuk a MyService-t a komponensben
  }
}

Ebben a példában a MyService egy injectable szolgáltatás, és az Angular DI rendszere automatikusan létrehozza és beszúrja azt a MyComponent konstruktorába.

A DI segítségével könnyen cserélhetők vagy mockolhatók függőségek, így a tesztelés egyszerűbb és a kód modularitása is növelhető.