Angular è un framework per creare Single Page Application (SPA). Il concetto principale di una SPA è quello di navigazione tra pagine dove la navigazine avviene interamente lato client senza coinvolgere il server. Per fare questo Angular mette a disposizione un sistema di routing molto potente.
Per configurare il sistema di routing, il primo passo consiste nell'importarte il modulo RoutingModule e la classe Routes nella nostra applicazione come mostrato nell'esempio.
import { Routes, RouterModule } from '@angular/router';
A questo punto dobbiamo dichiarare una costante, di tipo Routes, che contiene la lista delle nostre rotte. Una rotta è un oggetto che specifica un url e il component da caricare quando si naviga verso l'url.
const routes: Routes = [ { path: 'company/search', component: CompanySearchComponent }, { path: 'company/detail', component: CompanyDetailComponent }, ];
Il terzo passo consiste nell'importare nel modulo principale della nostra applicazione il RoutingModule e configurarne le rotte tramite il metodo forRoot.
@NgModule({ imports: [RouterModule.forRoot(routes)], ... }) export class AppModule { }
Infine, nel component principale della nostra applicazione dobbiamo inserire il component router-outlet all'interno del quale verrà inserito il codice HTML generato dal component verso cui si è navigato.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Recuperare automaticamente un utente e aggiungerlo ad un gruppo di Azure DevOps
Gestione dell'annidamento delle regole dei layer in CSS
Usare i settings di serializzazione/deserializzazione di System.Text.Json di ASP.NET all'interno di un'applicazione non web
Eseguire script pre e post esecuzione di un workflow di GitHub
Supportare la sessione affinity di Azure App Service con Application Gateway
Ordinare randomicamente una lista in C#
Eseguire i worklow di GitHub su runner potenziati
Path addizionali per gli asset in ASP.NET Core MVC
Integrare un servizio esterno con .NET Aspire
Eseguire una ricerca avanzata per recuperare le issue di GitHub
Scrivere selettori CSS più semplici ed efficienti con :is()
Recuperare l'ultima versione di una release di GitHub
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Utilizzare il pattern matching per semplificare le espressioni
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Utilizzare requestAnimationFrame per animazioni fluide
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!