Konfigurering av grunnleggende routing i Angular

La oss nå konfigurere routing. La oss gjøre slik at hvis URL-en /aaaa/ er skrevet inn i nettleserens adresselinje, vises den første komponenten, og hvis /bbbb/ er skrevet inn, vises den andre.

Denne konfigureringen gjøres i filen app.routes.ts. Først må vi importere våre komponenter:

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

Og nå må vi fortelle hvilken URL som tilsvarer hvilken komponent. For å gjøre dette må vi lage en spesiell matrise med objekter med ruter (routes). I hvert objekt vil det være en nøkkel path, der URL-en angis (uten avsluttende skråstreker), og en nøkkel component, der komponenten som vises for denne URL-en angis:

app/app.routes.tsexport const routes: Routes = [
  { path: 'aaaa', component: AaaaComponent },
  { path: 'bbbb', component: BbbbComponent },
];

Routing-innstillingene er imidlertid ikke nok. Vi må angi plassen hvor komponentene våre skal vises i foreldrekomponenten. Dette tar vi for oss i neste leksjon.