Kaj je NgModule?

Question

Kaj je NgModule?

Accepted Answer

**NgModule** je razred dekoriran z `@NgModule`, ki združuje povezane komponente, direktive, pipe-e in storitve v kohezivno enoto, kar Angular-u pove, kako jih prevesti in povezati skupaj. (Opomba: sodoben Angular je vse bolj naklonjen **samostojnim komponentam** namesto NgModulov, vendar je razumevanje NgModulov še vedno bistveno za večino obstoječih codebases.)

## Anatomija NgModula

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

## Štiri ključni nizi

```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 se lahko deklariira samo v **enem** modulu in mora biti deklarirana (ali uvožena kot samostojna) za uporabo v templates-ih tega modula.

## Koreni modul

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

Vsaka (ne-samostojna) aplikacija ima koreni `AppModule` s `bootstrap` nizom, ki našteje začetno komponento.

## Feature moduli in organizacija

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

Aplikacije so organizirane v **feature module-e** (en na področje) in **deljeni modul** (skupne komponente/pipe-e), kar ohrani kodo modularno in omogoči lazy loading na funkcijo.

## Prehod na samostojne komponente

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

Sodoben Angular omogoča, da so komponente **samostojne** — deklarirajo lastne odvisnosti neposredno — kar zmanjša ali odpravi NgModule standardno besedilo.

## Zakaj je to pomembno

NgModuli so tradicionalni mehanizem organizacije in povezovanja odvisnosti v Angular-ju — razumevanje `declarations`/`imports`/`exports`/`providers` je potrebno za navigacijo po veliki večini obstoječih Angular aplikacij in za razumevanje lazy loading-a.

Čeprav se nova koda usmerja proti samostojnim komponentam, je znanje o NgModulih še vedno bistveno za delo v resničnem svetu z Angular-jem.