Configurazione del routing di base in Angular

Ora configuriamo il routing. Facciamo in modo che se nella barra degli indirizzi del browser è inserito l'URL /aaaa/, venga mostrato il primo componente, e se è inserito /bbbb/, il secondo.

Questa configurazione viene fatta nel file app.routes.ts. Per iniziare è necessario importare i nostri componenti:

import { AaaaComponent } from './aaaa/aaaa.component';
import { BbbbComponent } from './bbbb/bbbb.component';

E ora bisogna dire quale URL corrisponde a quale componente. Per fare questo è necessario creare un array speciale di oggetti con le rotte (routes). In ogni oggetto ci sarà una chiave path, in cui viene impostato l'URL (senza slash finali), e una chiave component, in cui viene impostato il componente che viene visualizzato per questo URL:

export const routes: Routes = [
	{ path: 'aaaa', component: AaaaComponent },
	{ path: 'bbbb', component: BbbbComponent },
];

La configurazione del routing, tuttavia, non è sufficiente. È necessario nel componente genitore specificare il luogo in cui verranno visualizzati i nostri componenti. Ci occuperemo di questo nella prossima lezione.

Configura il routing nel file app.routes.ts.