Perusreitityksen määrittäminen Angularissa

Määritetään nyt reititys. Tehdään niin, että jos selaimen osoiteriville on syötetty URL-osoite /aaaa/, näytetään ensimmäinen komponentti, ja jos on syötetty /bbbb/, näytetään toinen.

Tällainen määritys tehdään tiedostossa app.routes.ts. Aluksi on tuotava komponenttimme:

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

Ja nyt on määritettävä, mikä URL-osoite vastaa mitäkin komponenttia. Tätä varten on tehtävä erityinen objektaulukko reiteillä (routeilla). Jokaisessa objektissa on avain path, jolla asetetaan URL-osoite (ilman loppuviivoja), ja avain component, jolla asetetaan komponentti, joka näytetään tällä URL-osoitteella:

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

Reititysmääritykset eivät kuitenkaan riitä. Yläkomponentissa on määritettävä paikka, johon komponenttimme tulostetaan. Tähän ryhdymme seuraavassa oppitunnissa.