Module

A modul egy logikai csoportosítás, amely tartalmazza az összetartozó komponenseket, serviceket, direktívákat és pipe-okat, továbbá lehetővé teszi az egységes kezelést és importálást.

Modul lazy loading

Az alkalmazás csak akkor tölti be a modulokat, amikor szükség van rájuk. Ez optimalizálja a betöltési sebességét és javítja a teljesítményt.

Angularban a modul egy magas szintű konfigurációs egység, amely az alkalmazás részeit – komponenseket, direktívákat, szolgáltatásokat és más kódokat – logikailag csoportosítja együtt. Az Angular modulok segítenek szervezni a funkciókat és hatékonyan szeparálni a különféle alkalmazásfelelősségeket.

Ezen kívül az Angular moduloknak fontos szerepük van a lazy loadingban és az optimalizált bundle generálásban is.

Az Angular modulokat a @NgModule dekorátorral definiáljuk, amely az alábbi főbb részeket tartalmazza:

declarations: Az itt felsorolt komponensek, direktívák és pipe-ok ebben a modulban vannak deklarálva. Egy komponenst, direktívát vagy pipe-ot csak egyetlen modulban lehet deklarálni.
imports: Más modulok, amelyek ebben a modulban használt exportált osztályokat tartalmaznak. Például, ha egy modulban használni szeretnénk az Angular beépített FormsModule-t, akkor ezt az imports tömbben kell importálnunk.
exports: Azok a komponensek, direktívák és pipe-ok, amelyeket más modulokban szeretnénk használni, amelyek importálják ezt a modult.
providers: Szolgáltatások és értékek, amelyek ezen modul által deklarált osztályokhoz vannak rendelve. Általában a service-ek és a dependency injectionhez tartoznak.
bootstrap: Az alkalmazás gyökérkomponense(i), amely(ek) a weboldal betöltésekor automatikusan létrejön(nek). Általában csak az alkalmazás gyökérmoduljában használjuk.

Példa egy egyszerű modulra:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my.component';

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    MyComponent
  ]
})
export class MyModule { }

Ez a modul deklarál egy MyComponent nevű komponenst, importálja az Angular CommonModule-ját (ami az alapvető direktívákat, mint az ngIf és ngFor, tartalmazza), és exportálja a MyComponent-et, hogy azt más modulokban is használhassuk.

Lazy Loading