Ρύθμιση βασικής δρομολόγησης στο Angular

Τώρα ας ρυθμίσουμε τη δρομολόγηση. Ας κάνουμε έτσι ώστε αν το URL /aaaa/ εισαχθεί στη γραμμή διευθύνσεων του προγράμματος περιήγησης, να εμφανίζεται το πρώτο component, και αν το /bbbb/ εισαχθεί, να εμφανίζεται το δεύτερο.

Αυτή η ρύθμιση γίνεται στο αρχείο app.routes.ts. Πρώτα, πρέπει να εισάγουμε τα components μας:

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

Τώρα πρέπει να πούμε ποιο URL αντιστοιχεί σε ποιο component. Για να το κάνουμε αυτό, πρέπει να δημιουργήσουμε έναν ειδικό πίνακα αντικειμένων με διαδρομές (routes). Κάθε αντικείμενο θα έχει ένα κλειδί path, που ορίζει το URL (χωρίς τις τελικές πλάγιες), και ένα κλειδί component, που ορίζει το component που εμφανίζεται σε αυτό το URL:

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

Ωστόσο, η ρύθμιση της δρομολόγησης δεν είναι αρκετή. Πρέπει να καθορίσουμε στο γονικό component τη θέση όπου θα εμφανίζονται τα components μας. Θα το κάνουμε αυτό στο επόμενο μάθημα.

Ρυθμίστε τη δρομολόγηση στο αρχείο app.routes.ts.