Quando creiamo un'applicazione Angular di piccole dimensioni, è molto probabile che servizi, component, pipe e altro ancora facciano parte di un unico modulo. Quando invece dobbiamo creare applicazioni di dimensioni maggiori, torna utile suddividere l'applicazione in moduli. Questi moduli possono essere caricati tutti in fase di inizializzazione dell'applicazione oppure in modalità lazy solo su richiesta. La prima modalità rende lo sviluppo lievemente più semplice, ma comporta lo svantaggio di dover caricare tutta l'applicazione in fase di startup. La seconda modalità invece permette di caricare i moduli solo su richiesta rendendo quindi lo startup più veloce.
Per caricare un modulo in modalità lazy, basta definirne le rotte dei component nel seguente modo.
const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'customers', loadChildren: './customers/customer.module#CustomerModule' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
La parte più interessante di questo esempio è il percorso customers. In questo caso specifichiamo che la rotta customers causa il caricamento del modulo CustomersModule presente nel file customers/customer.module il cui percorso parte dalla root dell'applicazione. A questo punto, alla partenza dell'applicazione il modulo CustomerModule non viene caricato velocizzando la partenza stessa.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Miglioramenti agli screen reader e al contrasto in Angular
Paginare i risultati con QuickGrid in Blazor
Disabilitare automaticamente un workflow di GitHub (parte 2)
Limitare le richieste lato server con l'interactive routing di Blazor 8
Utilizzare i primary constructor in C#
Implementare l'infinite scroll con QuickGrid in Blazor Server
Potenziare Azure AI Search con la ricerca vettoriale
Gestire i null nelle reactive form tipizzate di Angular
Sfruttare al massimo i topic space di Event Grid MQTT
Come migrare da una form non tipizzata a una form tipizzata in Angular
Utilizzare la session affinity con Azure Container Apps
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
I più letti di oggi
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Come EF 8 ha ottimizzato le query che usano il metodo Contains
- .NET Conference Italia 2023 - Milano e Online
- Ottimizzazione dei block template in Angular 17
- Definire stili a livello di libreria in Angular