Co je to NgModule?

Question

Co je to NgModule?

IT Interview Practice · Accepted Answer

**NgModule** je třída dekorovaná pomocí `@NgModule`, která seskupuje související komponenty, direktivy, pipes a služby do soudržného bloku a říká Angular u, jak je zkompilovat a propojit. (Poznámka: moderní Angular stále více preferuje **samostatné komponenty** před NgModuly, ale porozumění NgModulům je stále nezbytné pro většinu stávajících kódů.)

## Anatomie NgModulu

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

## Čtyři klíčová pole

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

Komponenta může být deklarována pouze v **jednom** modulu a musí být deklarována (nebo importována jako samostatná), aby byla použitelná v šablonách tohoto modulu.

## Kořenový modul

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

Každá (samostatná) aplikace má kořenový `AppModule` s polem `bootstrap`, které pojmenovává počáteční komponentu.

## Modulů funkcí a organizace

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

Aplikace jsou organizovány do **modulů funkcí** (jeden na oblast domény) a **sdíleného modulu** (běžné komponenty/pipes), čímž zůstává kódová základna modulární a umožňuje lazy loading na funkci.

## Posun k samostatnosti

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

Moderní Angular umožňuje komponentám být **samostatnými** — přímo deklarují své vlastní závislosti — což snižuje nebo eliminuje NgModule boilerplate.

## Proč to je důležité

NgModuly jsou tradičním mechanismem organizace a propojování závislostí v Angular u — pochopení `declarations`/`imports`/`exports`/`providers` je nezbytné pro navigaci velkého procenta stávajících Angular aplikací a pro pochopení lazy loadingu.

I když se nový kód orientuje na samostatné komponenty, znalost NgModulu zůstává nezbytná pro práci s Angular v reálném světě.

Anatomie NgModulu

Čtyři klíčová pole

Kořenový modul

Modulů funkcí a organizace

Posun k samostatnosti

Proč to je důležité

Související otázky