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.
Info
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 />
Info
<router-outlet></router-outlet>
et <router-outlet />
sont équivalents
❓ Mais... Comment le <router-outlet>
connaît-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 optionnelles. 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';
import { provideHttpClient } from "@angular/common/http";
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes), provideHttpClient()]
};
On voit que l'import de routes
est bien présent, que le fichier provide le Router
d'Angular (avec provideRouter
) et qu'on lui passe bien les routes en paramètres. Parfait ! ⭐
Pour savoir si ce que l'on a fait fonctionne : rajoute /movies dans ton url après ton localhost (http://localhost:4200/movies
). Tu dois voir le contenu HTML de MoviesComponent
: <p>movies 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 ms-3" href="#">Gestion de films</a>
</nav>
On a donc 2 onglets : Accueil et Gestion de films. Ce sont des balises <a>
avec un href
.
Info
href
est un attribut HTML qui permet de définir la destination (en relatif ou en absolu) 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
et importe RouterLink
.
❗La valeur du routerLink doit correspondre aux paths indiqués dans les Routes
Tip
Le chemin du MoviesComponent
est défini à 'review' dans le fichier app.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 ms-3" 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'échange.
C'est booon, les routes fonctionnent via la navbar ! ⭐
🙋♀️ Checkpoint time 🙋