Aller au contenu

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 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 /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.

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 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" 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 !