Per sperimentare in modo sicuro con i moduli, è consigliabile creare una copia del progetto esistente. Queste modifiche sono destinate esclusivamente alla pratica e non influiranno sul progetto originale. Nei capitoli successivi, l'attenzione tornerà alla creazione di applicazioni utilizzando componenti standalone.

Creazione di un Modulo per TaskComponent

Questa fase prevede la creazione di un modulo per il TaskComponent. Il modulo dichiarerà il componente, una direttiva correlata e una pipe.

Per generare un modulo in Angular, è disponibile un comando CLI dedicato:

Ora che il file task.module.ts è stato creato all'interno della cartella task, possiamo implementarlo

Questo modulo dichiara il TaskComponent, la sua direttiva associata e una pipe personalizzata. Importa CommonModule per abilitare direttive strutturali come *ngIf e *ngFor. Il TaskComponent viene esportato così da poter essere riutilizzato in altri moduli.

Creazione di un modulo per il TaskListComponent

In questo passaggio verrà creato un modulo per il TaskListComponent. Creare un nuovo modulo nella cartella task-list:

Ora che il file task-list.module.ts è stato creato all'interno della cartella task-list, possiamo implementarlo

Questo modulo dichiara TaskListComponent, responsabile della visualizzazione di un elenco di attività. Importa TaskModule per accedere al componente attività e FormsModule per funzionalità come i moduli di creazione delle attività. Il componente viene esportato per poter essere utilizzato in altri moduli.

Creazione del Modulo Radice

In questo passaggio, verrà definito il modulo principale che funge da punto di partenza per l'intera applicazione.

Ogni applicazione Angular necessita di un modulo radice che indichi ad Angular come avviare l'applicazione. Questo modulo riunisce tutti gli elementi necessari: funzionalità integrate di Angular, moduli personalizzati e il componente radice.

Creare un nuovo modulo nella cartella app:

Il flag --flat indica all'Angular CLI di creare il file del modulo senza generare una cartella separata.

Questo modulo funge da punto di ingresso dell'applicazione. Importa BrowserModule, necessario per eseguire Angular nel browser, e TaskListModule, che contiene la funzionalità principale per la gestione delle attività. AppComponent è impostato come componente radice per avviare l'applicazione.

Configurazione del Punto di Ingresso

Questo passaggio aggiorna il punto di ingresso dell'applicazione per avviarla utilizzando il modulo principale invece di un componente standalone.

Apri main.ts e sostituisci il suo contenuto con il seguente:

Questo codice avvia l'applicazione utilizzando AppModule. Questa configurazione illustra l'architettura modulare: l'applicazione è suddivisa in moduli, ciascuno dei quali incapsula i propri componenti, direttive, pipe, servizi e altro ancora.

L'architettura modulare in Angular aiuta a organizzare l'applicazione in blocchi logici, rendendo il codice scalabile, ben strutturato e riutilizzabile.