Navigation
Actuellement, dans notre AppComponent
nous affichons la NavbarComponent
et le HomeComponent
.
On veut pouvoir afficher le MoviesComponent
à la place du HomeComponent
de façon dynamique en fonction de l'url.
Une url c'est ça:
http://localhost:4200/
.
Si tu ne vois vraiment pas ce que c'est, tu peux faire un petit tour par sur cette documentation.Généralement, on modifie les urls via des clics sur des liens.
RouterOutlet
Pour cela Angular dispose d'une directive (qu'il ne faut pas oublier d'importer) : <router-outlet>
. Cette directive permet d'insérer le composant relié à l'url juste en dessous de lui.
Rends-toi dans app.component.html
et remplace le <app-home>
par <router-outlet />
Pour info,
<router-outlet></router-outlet>
et<router-outlet />
sont équivalents
❓ Mais... Comment le <router-outlet>
connait-il le composant relié à l'url ?
Les routes
Pour naviguer entre nos pages, on doit définir des routes !
Cela se fait dans le fichier app.route.ts
.
L'objet Routes
est une liste qui contient un ou plusieurs objets Route
.
L'objet Route
est un objet avec beaucoup de propriétés optionelles. Les deux que nous utiliserons sont path et component.
- path est le bout d'url que l'on veut faire matcher
- component est le composant lié à ce path (donc celui qu'on affiche quand il y a un match dans l'url)
Dans notre cas, on veut 2 routes : une principale pour l'accueil qui affiche le HomeComponent
et une /review pour les avis qui affiche le ReviewComponent
.
export const routes: Routes = [
{ path: '', component: HomeComponent},
{ path: 'movies', component: MoviesComponent}
];
Vérifions que notre constante routes
est bien utilisée : elle doit se trouver dans le app.config.ts
.
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes)]
};
On voit que l'import de
routes
est bien présent, que le fichier provide leRouter
d'Angular (avecprovideRouter
) et qu'on lui passe bien les routes en paramétres. Parfait ! ⭐
Pour savoir si ce que l'on a fait fonctionne : rajoute /review dans ton url après ton locahost (http://localhost:4200/review
). Tu dois voir le contenu HTML de ReviewComponent
: <p>review works!</p>
.
C'est booon, les routes fonctionnent !! ⭐
Maintenant, on veut éviter de devoir entrer en dur des paths dans l'url à la main pour naviguer.
RouterLink
Dans notre NavbarComponent
, on peut ajouter un onglet Gestion de films.
<nav class="navbar navbar-light navbar-expand bg-light ps-5">
<a class="navbar-brand">{{ title | titlecase }}</a>
<a class="nav-item nav-link" href="#">Accueil</a>
<a class="nav-item nav-link" href="#">Gestion de films</a>
</nav>
On a donc 2 onglets : Accueil et Gestion de films. Ce sont des balises <a>
avec un href
.
href
est un attribut HTML qui permet de définir la destination (en relatif ou en absolue) lorsque l'on clique sur le lien.
En Angular, nous n'utilisons pas href
mais la directive routerLink
.
À toi de jouer ! Remplace les href
par des routerLink
❗La valeur du routerLink doit correspondre aux paths indiqués dans les Routes
Le chemin du
MoviesComponent
est défini à 'review' dans le fichierapp.route.ts
. Par contre, dans la directive routerLink, il faut le spécifier comme "/movies" (avec le /). routerLink construit l’URL de manière relative au chemin courant. Ajouter un / indique que l’URL doit être construite depuis l’URL de base de l’application (ici http://localhost:4200). Sans la spécification du / dans la directive du routerLink, on irait vers /review/review.
Tu dois donc avoir :
<nav class="navbar navbar-light navbar-expand bg-light ps-5">
<a class="navbar-brand">{{ title | titlecase }}</a>
<a class="nav-item nav-link" routerLink="/">Accueil</a>
<a class="nav-item nav-link" routerLink="/movies">Gestion de films</a>
</nav>
Pour savoir si ce que l'on a fait fonctionne : clique sur Accueil puis Gestion de films ... Tu dois voir le contenu HTML du HomeComponent
et du MoviesComponent
qui s'interchange.
C'est booon, les routes fonctionnent via la navbar ! ⭐