Mikä on NgModule?

Question

Mikä on NgModule?

Accepted Answer

**NgModule** on `@NgModule`-dekoraattorilla varustettu luokka, joka ryhmittelee asiaan liittyvät komponentit, direktiivit, pipe-kanavat ja palvelut yhtenäiseksi lohkoksi ja kertoo Angular-kehitykselle, kuinka ne käännetään ja yhdistetään. (Huomautus: moderni Angular suosii yhä enemmän **itsenäisiä komponentteja** NgModulejen sijaan, mutta NgModulejen ymmärtäminen on silti olennaista useimmille olemassa oleville koodikannoille.)

## NgModulen anatomia

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

## Neljä avainarrayta

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

Komponentti voidaan julistaa vain **yhdessä** moduulissa, ja se on ilmoitettava (tai tuotava itsenäisenä) ollakseen käytettävissä kyseisen moduulin malleissa.

## Juurimoduuli

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

Jokaisella (itsenäisellä) sovelluksella on juuriluokan `AppModule` `bootstrap`-arrayn kanssa, joka nimeää aloituskomponentin.

## Ominaisuusmoduulit ja organisaatio

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

Sovellukset järjestetään **ominaisuusmoduuleiksi** (yksi kullekin verkkotunnusalueelle) ja **jaetuksi moduuliksi** (yleiset komponentit/pipe-kanavat), mikä pitää koodikannan modulaarisena ja mahdollistaa laiska lataus per ominaisuus.

## Siirtyminen itsenäisyyteen

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

Moderni Angular antaa komponenteille olla **itsenäisiä** — ilmoittamalla suoraan omat riippuvuudet — mikä vähentää tai poistaa NgModule-mallikooodin.

## Miksi se on tärkeää

NgModules on Angulariin perinteinen organisointi- ja riippuvuuskytkentämekanismi — `declarations`/`imports`/`exports`/`providers` ymmärtäminen on välttämätöntä navigoidaksesi suurimpaan osaan olemassa olevista Angular-sovelluksista ja ymmärtääksesi laiska lataus.

Vaikka uusi koodi kallistuu itsenäisiin komponentteihin, NgModule-tieto jää edelleen välttämättömäksi todelliseen Angular-työhön.