Τι είναι ένα NgModule;

Question

IT Interview Practice · Accepted Answer

Ένα **NgModule** είναι μια κλάση διακοσμημένη με `@NgModule` που ομαδοποιεί σχετικά στοιχεία, οδηγίες, pipes και υπηρεσίες σε ένα συνεκτικό μπλοκ, λέγοντας στο Angular πώς να τα μεταγλωττίσει και να τα συνδέσει μεταξύ τους. (Σημείωση: το σύγχρονο Angular ευνοεί ολοένα και περισσότερο τα **αυτόνομα στοιχεία** από τα NgModules, αλλά η κατανόηση των NgModules παραμένει απαραίτητη για τις περισσότερες υπάρχουσες βάσεις κώδικα.)

## Ανατομία ενός NgModule

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

## Τα τέσσερα βασικά arrays

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

Ένα στοιχείο μπορεί να δηλωθεί μόνο σε **ένα** module και πρέπει να δηλωθεί (ή να εισαχθεί ως αυτόνομο) για να είναι χρήσιμο στα πρότυπα αυτού του module.

## Το ριζικό module

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

Κάθε (μη αυτόνομη) εφαρμογή έχει ένα ριζικό `AppModule` με ένα array `bootstrap` που ονοματίζει το αρχικό στοιχείο.

## Feature modules και οργάνωση

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

Oι εφαρμογές οργανώνονται σε **feature modules** (ένα ανά περιοχή ενδιαφέροντος) και ένα **κοινό module** (κοινά στοιχεία/pipes), διατηρώντας τη βάση κώδικα modulική και ενεργοποιώντας τη lazy loading ανά χαρακτηριστικό.

## Η μετάβαση στο αυτόνομο

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

Το σύγχρονο Angular επιτρέπει τα στοιχεία να είναι **αυτόνομα** — δηλώνοντας απευθείας τις δικές τους εξαρτήσεις — μειώνοντας ή εξαλείφοντας το NgModule boilerplate.

## Γιατί είναι σημαντικό

Τα NgModules είναι ο παραδοσιακός μηχανισμός οργάνωσης και καλωδίωσης εξαρτήσεων του Angular — η κατανόηση των `declarations`/`imports`/`exports`/`providers` είναι απαραίτητη για να περιηγηθείτε στη συντριπτική πλειοψηφία των υπαρχουσών εφαρμογών Angular και για να κατανοήσετε τη lazy loading.

Αν και ο νέος κώδικας τείνει προς αυτόνομα στοιχεία, η γνώση των NgModules παραμένει απαραίτητη για πραγματικές δουλειές στο Angular.

Ανατομία ενός NgModule

Τα τέσσερα βασικά arrays

Το ριζικό module

Feature modules και οργάνωση

Η μετάβαση στο αυτόνομο

Γιατί είναι σημαντικό

Σχετικές ερωτήσεις