Configuratie van basis routing in Angular

Laten we nu de routing configureren. We zorgen ervoor dat wanneer de URL /aaaa/ in de adresbalk van de browser is ingevoerd, het eerste component wordt getoond, en wanneer /bbbb/ is ingevoerd, het tweede.

Deze configuratie wordt gedaan in het bestand app.routes.ts. Om te beginnen moeten we onze componenten importeren:

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

En nu moeten we aangeven welke URL bij welk component hoort. Hiervoor moeten we een speciale array van objecten met routes maken. In elk object zal er een sleutel path zijn, waarin de URL wordt ingesteld (zonder afsluitende strepen), en een sleutel component, waarin het component wordt ingesteld dat wordt getoond bij deze URL:

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

De routingconfiguratie is echter niet voldoende. We moeten in het bovenliggende component de plek aangeven waar onze componenten worden weergegeven. Hiermee gaan we in de volgende les aan de slag.

Configureer de routing in het bestand app.routes.ts.