Aller au contenu principal

8-8 Faire un lien à l'aide du RouterLink

Nous avons présentement deux pages:

  • Une page pour afficher les projets (/projets)
  • Une page pour créer un nouveau projet (/projets/creer)

Il serait pertinent de faire un lien à partir de la liste de projets, vers la page de création d'un projet.

En effet, pour l'instant, le bouton Ajouter un projet génère un nom de projet aléatoirement et l'ajoute à la liste. Cependant, nous avons une page qui sera responsable de la création d'un nouveau projet à l'aide d'un formulaire (/projets/creer).

Ainsi, faisons en sorte que le bouton mène l'utilisateur vers la page de création.

Pour ce faire, remplaçons le bouton par une balise a faisant un lien vers la page de création:

src/app/features/projets/components/projets-liste.ts
@Component({
  selector: 'app-projets-liste',
  imports: [],
  template: `
    <a class="btn btn-primary" href="/projets/creer">Nouveau projet</a>

    @if(projets.length > 0){
    <ul>
      @for(projet of projets; track $index) {
      <li>{{ projet }}</li>
      }
    </ul>
    } @else {
      <p>Aucun projet</p>
    }
  `,
  styles: `
    ul {
      list-style-type: circle;

      li {
        font-weight: bold;
      }
    }
  `
})

Vous pouvez essayer dans votre navigateur, mais cela génère un changement de page complet (le site est complètement rechargé).

Si vous remarquez bien, l'icône de chargement est brièvement modifiée par une icône "stop" avec un x, indiquant que la page est en train d'être rechargée.

Imgur

info

La raison est que la balise <a> est gérée par votre navigateur et son comportement est de recharger une nouvelle page à l'adresse spécifiée.

Afin d'éviter cela et de profiter du chargement dynamique offert par une application de type monopage (SPA), Angular propose d'utiliser la propriété routerLink plutôt que href. Cela fait en sorte que la nouvelle page (composant) sera chargée dans la portion dynamique de la page (RouterOutlet).

Ainsi, modifiez le lien en conséquence:

src/app/features/projets/components/projets-liste.ts
@Component({
  selector: 'app-projets-liste',
  imports: [],
  template: `
    <a class="btn btn-primary" routerLink="/projets/creer">Nouveau projet</a>

//...
attention

routerLink sera surligné en jaune, vous devrez l'importer dans le composant à l'aide de l'aide contextuelle de WebStorm.

img

Vous pouvez réessayer et l'expérience devrait être plus lisse, sans chargement complet de la page! 🎉

Modifier la barre de navigation​

On peut en profiter pour modifier la barre de navigation afin que cette dernière utilise aussi la propriété routerLink pour le lien du logo Houdini vers la page d'accueil.

src/app/shared/components/navbar.ts
@Component({
  selector: 'app-navbar',
  imports: [
    RouterLink
  ],
  template: `
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark border-bottom mb-4">
      <div class="container-fluid">
        <a class="navbar-brand" routerLink="">Houdini</a>
      </div>
    </nav>
  `,
  styles: ``
})

Maintenant, cliquer sur le logo dans l'en-tête vous ramènera à la page d'accueil sans toutefois générer un changement de page complet!