Configurarea rutării de bază în Angular

Să configurăm acum rutarea. Să facem astfel încât, dacă în bara de adrese a browserului este introdus URL-ul /aaaa/, să fie afișată prima componentă, iar dacă este introdus /bbbb/, să fie afișată a doua.

Această configurare se face în fișierul app.routes.ts. Pentru început, trebuie să importăm componentele noastre:

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

Și acum trebuie să specificăm care URL corespunde cărei componente. Pentru aceasta, trebuie să creăm un array special de obiecte cu rutele (routes). În fiecare obiect va fi o cheie path, în care se stabilește URL-ul (fără slash-uri finale), și o cheie component, în care se stabilește componenta care este afișată la acest URL:

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

Configurarea rutării, totuși, nu este suficientă. Trebuie să indicăm în componenta părinte locul în care vor fi afișate componentele noastre. Cu aceasta ne vom ocupa în lecția următoare.

Configurați rutarea în fișierul app.routes.ts.