Što je NgModule?

Question

Što je NgModule?

Accepted Answer

**NgModule** je klasa ukrašena s `@NgModule` koja grupira povezane komponente, direktive, cijevi i usluge u koherentan blok, govoreći Angular kako ih kompajlirati i povezati zajedno. (Napomena: moderan Angular sve više preferira **samostalne komponente** u odnosu na NgModule, ali razumijevanje NgModule-a je i dalje bitno za većinu postojećih kodnih baza.)

## Anatomija NgModule-a

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

## Četiri ključna niza

```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 može biti deklarirana samo u **jednom** modulu, i mora biti deklarirana (ili uvozena kao samostalna) da bi se mogla koristiti u šablonima tog modula.

## Početni modul

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

Svaka (ne-samostalna) aplikacija ima početni `AppModule` s `bootstrap` nizom koji nazivom označava početnu komponentu.

## Moduli značajki i organizacija

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

Aplicije su organizirane u **module značajki** (jedan po području domene) i **zajednički modul** (zajedničke komponente/cijevi), čime se kodna baza održava modularnom i omogućava lijeno učitavanje po značajki.

## Prijelaz na samostalno

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

Moderna Angular omogućava komponentama da budu **samostalne** — direktno deklariraju svoje ovisnosti — smanjujući ili eliminirajući NgModule boilerplate.

## Zašto je to važno

NgModule je tradicionalni mehanizam organizacije i spajanja ovisnosti Angular-a — razumijevanje `declarations`/`imports`/`exports`/`providers` je potrebno za navigaciju većine postojećih Angular aplikacija i za razumijevanje lijenog učitavanja.

Mada novi kod teži prema samostalnim komponentama, znanje o NgModule-u i dalje je bitno za rad sa Angular-om u stvarnom svijetu.