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
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Utilizzare i primary constructor di C# per inizializzare le proprietà
Miglioramenti agli screen reader e al contrasto in Angular
Eseguire le GitHub Actions offline
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Gestire undefined e partial nelle reactive forms di Angular
Utilizzare Tailwind CSS all'interno di React: installazione
I più letti di oggi
- segui live #futuredecoded da Roma dalle 9:30 su http://www.communitydays.it
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- #wcfRIAservices è pronto: http://u.aspitalia.com/d4. se vuoi un'introduzione, la nostra è su http://u.aspitalia.com/d3
- Cambiare la chiave di partizionamento di Azure Cosmos DB