Débutez avec Angular

Dans le chapitre précédent, vous avez ajouté un module de routing, et vous y avez enregistré deux routes fonctionnelles. Tout ce qui reste à faire, c'est de permettre à vos utilisateurs de changer de route !

Créez des liens avec  routerLink

Le routeur d'Angular vous met à disposition une directive pour créer ultra facilement des liens vers des routes de vos applications, et cette directive s'appelle  routerLink. Elle est très facile à utiliser : on lui passe simplement la chaîne de caractères qui correspond à la route vers laquelle on veut créer le lien.

Dans LandingPageComponent, ajoutez l'import  RouterLink  (depuis  @angular/router  ) :

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';

@Component({
  // ...
  imports: [
    RouterLink
  ],
  // ...
})
export class LandingPageComponent {

}

Cela vous permet, dans le template, de faire :

<a routerLink="facesnaps">Continuer vers Snapface</a>

Maintenant, quand vous cliquez sur le lien de votre landing page, vous êtes redirigé immédiatement vers FaceSnapListComponent, sans chargement depuis le serveur !

Allons un peu plus loin encore ! Dans HeaderComponent, vous allez ajouter un menu de navigation.

Dans le fichier TypeScript, importez  RouterLink  ainsi que  RouterLinkActive  (on le verra dans quelques instants) :

import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';

@Component({
  // ...
  imports: [
    RouterLink,
    RouterLinkActive
  ],
  // ...
})
export class HeaderComponent {

}

Comme ça, dans le template, vous pouvez commencer par ajouter :

<header>
  <h1>snapface</h1>
  <nav>
    <a routerLink="">Home</a>
    <a routerLink="facesnaps">FaceSnaps</a>
  </nav>
</header>

Ajoutez quelques styles pour que ce soit un peu plus propre ; voici ma proposition :

a {
  margin: 0 10px;
  color: #333;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

.active {
  color: #666;
  text-decoration: underline;
}

Avec ces deux liens, vous avez un menu de navigation dans votre header, et vous pouvez bien vous rendre compte de la vitesse de changement de route !

Vous avez peut-être remarqué que je vous ai fourni une classe  active  dans les styles. L'extension  RouterLinkActive  que vous avez importé permet d'attribuer une classe CSS au lien quand sa route est la route active :

<header>
  <h1>snapface</h1>
  <nav>
    <a routerLink="" routerLinkActive="active">Home</a>
    <a routerLink="facesnaps" routerLinkActive="active">FaceSnaps</a>
  </nav>
</header>

Vous passez simplement la classe à attribuer à  routerLinkActive.

En fait, une route est considérée comme étant active lorsqu'elle-même ou l'un de ses enfants est la route sélectionnée. On voit bien que  /facesnaps  est un enfant de  /, donc finalement Angular se comporte normalement. Cependant, il existe une configuration qui permet de considérer uniquement la route exacte et non ses enfants. Il suffit d'ajouter : 

<a routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>

Et maintenant, tout fonctionne comme on voudrait !

Naviguez avec le Router

Il existe une autre approche pour changer de route dans une application Angular. Vous pouvez injecter le Router dans vos components et changer de route programmatiquement.

Les prochaines étapes, si vous voulez essayer de les implémenter vous-même, sont :

• transformer le lien sur la landing page en bouton ;

• reprendre les styles de bouton de FaceSnapComponent en augmentant la taille de police à 20 px ;

• lier une méthode avec un nom approprié à ce bouton ;

• BONUS : injecter le Router dans LandingPageComponent – il s'importe depuis  @angular/router  et s'injecte comme un service.

C'est à vous !

…

…

Et maintenant la solution.

On peut commencer par la méthode qui sera liée au bouton. J'ai choisi de l'appeler  onContinue()  ; à partir du moment où le nom de votre méthode commence par on et décrit l'action, tout va bien !

Après avoir créé la méthode vide dans LandingPageComponent, je transforme le lien en bouton et j'y lie la nouvelle méthode :

<button (click)="onContinue()">Continuer vers Snapface</button>

On peut copier/coller le style du bouton depuis FaceSnapComponent en modifiant la taille de police :

button {
  background-color: transparent;
  box-sizing: border-box;
  padding: 5px 10px;
  border: none;
  box-shadow: lightgray 3px 3px 7px;
  margin-right: 20px;
  outline: none;
  font-size: 20px;
  font-weight: 500;
  &:active {
    transform: translate(1px, 1px);
    box-shadow: lightgray 0 0 5px;
  }
}

Ensuite, pour injecter le Router, c'est aussi simple qu'avec un service :

import { Router } from '@angular/router';
//...
constructor(private router: Router) { }

Maintenant il ne reste plus qu'à appeler la méthode  navigateByUrl()  du Router depuis la méthode  onContinue()  :

onContinue() {
    this.router.navigateByUrl('facesnaps');
}

Et ça y est, le bouton de la landing page vous redirige vers la route FaceSnaps !

En résumé

• Créez des liens qui permettent de passer d'une route à l'autre avec RouterLink.

• Ajoutez des classes CSS aux liens correspondants à la route activée avec  RouterLinkActive.

• Ignorez l'activation des routes enfants avec  [routerLinkActiveOptions]="{ exact: true }".

• Injectez le Router dans vos components et utilisez sa méthode  navigateByUrl()  pour de la navigation programmatique.

 Enfin, nous allons activer les routes dans le prochain chapitre !