Mi az NgModule?

Question

Mi az NgModule?

Accepted Answer

Az **NgModule** egy `@NgModule` dekorátorral ellátott osztály, amely kapcsolódó komponenseket, direktívákat, pipe-okat és szolgáltatásokat csoportosít egy koherent blokkba, megmondva az Angular-nak, hogyan kell azokat fordítani és összekapcsolni. (Megjegyzés: a modern Angular inkább az **önálló komponenseket** részesíti előnyben az NgModulok helyett, de az NgModulok megértése továbbra is szükséges a legtöbb meglévő kódbázishoz.)

## Az NgModule felépítése

```ts
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

@NgModule({
  declarations: [UserListComponent, UserCardComponent], // components/directives/pipes THIS module owns
  imports: [CommonModule, FormsModule],                 // other modules whose exports we need
  exports: [UserListComponent],                          // what we make available to importers
  providers: [UserService],                              // services (DI) provided by this module
})
export class UsersModule {}
```

## A négy kulcsfontosságú tömb

```text
declarations → components, directives, and pipes that BELONG to this module
imports      → other NgModules whose exported features this module needs
exports      → the subset of declarations/modules made available to importers
providers    → services registered for dependency injection
```

Egy komponens csak **egy** modulban deklarálható, és a modul sablonjaiban való felhasználáshoz deklarálni kell (vagy önálló komponensként importálni).

## A gyökér modul

```ts
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  bootstrap: [AppComponent], // the root component to launch
})
export class AppModule {}
```

Minden (nem önálló) alkalmazásnak van egy gyökér `AppModule`, amely egy `bootstrap` tömböt tartalmaz, amely az induló komponens nevét tartalmazza.

## Funkció modulok és szervezés

```text
AppModule (root) → imports → UsersModule, AdminModule, SharedModule
```

Az alkalmazások **funkciók moduljaira** (dománonként egy) és egy **közös modulra** (közös komponensek/pipe-ok) szerveződnek, így a kódbázis moduláris marad és lehetővé teszi a funkciónkénti lusta betöltést.

## Az átmenet az önálló rendszerre

```ts
@Component({ standalone: true, imports: [CommonModule], ... }) // no NgModule needed
```

A modern Angular lehetővé teszi a komponensek **önálló** működését — közvetlenül deklarálva a függőségeiket — csökkentve vagy megszüntetve az NgModule boilerplate-et.

## Miért fontos ez

Az NgModulok az Angular hagyományos szervezési és függőség-bekötési mechanizmusa — a `declarations`/`imports`/`exports`/`providers` megértése szükséges a meglévő Angular alkalmazások többségéhez való navigáláshoz és a lusta betöltés megértéséhez.

Bár az új kód az önálló komponensek felé halad, az NgModule ismerete továbbra is elengedhetetlen a valóságos Angular munkához.