Konfiguracja podstawowego routingu w Angularze

Skonfigurujmy teraz routing. Sprawmy, aby gdy w pasku adresu przeglądarki wpisany jest URL /aaaa/, wyświetlał się pierwszy komponent, a gdy wpisany jest /bbbb/, to drugi.

Taka konfiguracja odbywa się w pliku app.routes.ts. Na początku należy zaimportować nasze komponenty:

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

A teraz należy wskazać, który URL odpowiada któremu komponentowi. W tym celu należy utworzyć specjalną tablicę obiektów z trasami (routes). W każdym obiekcie będzie klucz path, w którym ustawiany jest URL (bez końcowych ukośników), i klucz component, w którym ustawiany jest komponent, który jest wyświetlany pod tym adresem URL:

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

Konfiguracja routingu to jednak za mało. Należy w komponencie nadrzędnym wskazać miejsce, w którym będą wyświetlane nasze komponenty. Zajmiemy się tym w następnej lekcji.