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:

app/app.routes.tsimport { 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:

app/app.routes.tsexport 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.