Développez des applications Web avec Angular

L'un des énormes avantages d'utiliser Angular est de pouvoir créer des "single page application" (SPA). Sur le Web, ces applications sont rapides et lisses : il n'y a qu'un seul chargement de page au début, et même si les données mettent parfois du temps à arriver, la sensation pour l'utilisateur est celle d'une application native.  Au lieu de charger une nouvelle page à chaque clic ou à chaque changement d'URL, on remplace le contenu ou une partie du contenu de la page : on modifie les components qui y sont affichés, ou le contenu de ces components.  On accomplit tout cela avec le "routing", où l'application lit le contenu de l'URL pour afficher le ou les components requis.

L'application des appareils électriques n'a que la view des appareils à afficher pour le moment ; je vous propose de créer un component pour l'authentification (qui restera simulée pour l'instant) et vous créerez un menu permettant de naviguer entre les views.

Tout d'abord, créez le component avec le CLI :

ng g c auth

Vous allez également devoir modifier un peu l'organisation actuelle afin d'intégrer plus facilement le routing : vous allez créer un component qui contiendra toute la view actuelle et qui s'appellera  AppareilViewComponent  :

ng g c appareil-view

Ensuite, coupez tout le contenu de la colonne dans  app.component.html , enregistrez-le dans  appareil-view.component.html , et remplacez-le par la nouvelle balise  <app-appareil-view>  :

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <app-appareil-view></app-appareil-view>
    </div>
  </div>
</div>

Il faudra également déménager la logique de cette view pour que tout re-marche : injectez  AppareilService , créez l'array  appareils , intégrez la logique  ngOnInit  et déplacez les fonctions  onAllumer()  et  onEteindre()  :

import { Component, OnInit } from '@angular/core';
import { AppareilService } from '../services/appareil.service';

@Component({
  selector: 'app-appareil-view',
  templateUrl: './appareil-view.component.html',
  styleUrls: ['./appareil-view.component.scss']
})
export class AppareilViewComponent implements OnInit {

  appareils: any[];

  lastUpdate = new Promise((resolve, reject) => {
    const date = new Date();
    setTimeout(
      () => {
        resolve(date);
      }, 2000
    );
  });

  constructor(private appareilService: AppareilService) { }

  ngOnInit() {
    this.appareils = this.appareilService.appareils;
  }

  onAllumer() {
    this.appareilService.switchOnAll();
  }

  onEteindre() {
    if(confirm('Etes-vous sûr de vouloir éteindre tous vos appareils ?')) {
      this.appareilService.switchOffAll();
    } else {
      return null;
    }
  }

}

Vous pouvez faire le ménage dans  AppComponent , en retirant tout ce qui n'y sert plus.  Créez également une boolean  isAuth  dans  AppareilViewComponent , et déclarez-la comme  false , car vous allez intégrer un service d'authentification pour la suite.

Ajoutez la barre de navigation suivante à  AppComponent  :  

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Authentification</a></li>
        <li class="active"><a href="#">Appareils</a></li>
      </ul>
    </div>
  </div>
</nav>

Maintenant, tout est prêt pour créer le routing de l'application.

Créez des routes

Il s'agit des instructions d'affichage à suivre pour chaque URL, c'est-à-dire quel(s) component(s) il faut afficher à quel(s) endroit(s) pour un URL donné.

Puisque le routing d'une application est fondamentale pour son fonctionnement, on déclare les routes dans  app.module.ts .

On crée une constante de type  Routes  (qu'on importe depuis  @angular/router ) qui est un array d'objets JS qui prennent une certaine forme :

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MonPremierComponent } from './mon-premier/mon-premier.component';
import { AppareilComponent } from './appareil/appareil.component';
import { FormsModule } from '@angular/forms';
import { AppareilService } from './services/appareil.service';
import { AuthComponent } from './auth/auth.component';
import { AppareilViewComponent } from './appareil-view/appareil-view.component';
import { Routes } from '@angular/router';

const appRoutes: Routes = [
  { path: 'appareils', component: AppareilViewComponent },
  { path: 'auth', component: AuthComponent },
  { path: '', component: AppareilViewComponent }
];

Le path correspond au string qui viendra après le   /  dans l'URL : sur votre serveur local, le premier path ici correspond donc à  localhost:4200/appareils .

Ensuite, le  component  correspond au component que l'on veut afficher lorsque l'utilisateur navigue au  path  choisi.

J'ai ajouté un  path  vide, qui correspond tout simplement à  localhost:4200  (ou à la racine de l'application seule), car si on ne traite pas le  path  vide, chaque refresh de l'application la fera planter.  Je vous montrerai d'autres façons de gérer cela dans les chapitres suivants.

Les routes sont maintenant créées, mais il faut les enregistrer dans votre application.  Pour cela, vous allez importer  RouterModule  depuis  @angular/router  et vous allez l'ajouter à l'array imports de votre  AppModule , tout en lui appelant la méthode  forRoot()  en lui passant l'array de routes que vous venez de créer :

imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
],

Maintenant que les routes sont enregistrées, il ne reste plus qu'à dire à Angular où vous souhaitez afficher les components dans le template lorsque l'utilisateur navigue vers la route en question.  On utilise la balise  <router-outlet>  :

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

Lorsque vous changez de route (pour l'instant, en modifiant l'URL directement dans la barre d'adresse du navigateur), la page n'est pas rechargée, mais le contenu sous la barre de navigation change.  Dans le chapitre suivant, vous allez intégrer les liens de la barre de navigation afin que l'utilisateur puisse naviguer facilement.

Naviguez avec les routerLink

Afin que l'utilisateur puisse naviguer à l'intérieur de votre application, il est nécessaire de créer des liens ou des boutons qui naviguent vers les routes que vous avez créées.  Dans le chapitre précédent, vous avez créé des liens typiques dans la barre de navigation, mais qui ne font rien pour l'instant.

Vous pourriez vous dire qu'il suffirait de marquer le  path  de vos routes directement dans l'attribut  href , et techniquement, cela permet d'atteindre les routes que vous avez créées.

Tout simplement parce que, si vous regardez bien, en employant cette technique, la page est rechargée à chaque clic !  On perd totalement l'intérêt d'une Single Page App !

Du coup, on retire l'attribut  href  et on le remplace par l'attribut  routerLink  :

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a routerLink="auth">Authentification</a></li>
        <li class="active"><a routerLink="appareils">Appareils</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

Ainsi, les routes sont chargées instantanément : on conserve l'ergonomie d'une SPA.

Pour finaliser cette étape, il serait intéressant que la classe  active  ne s'applique qu'au lien du component réellement actif.  Heureusement, Angular fournit un attribut pour cela qui peut être ajouté au lien directement ou à son élément parent :

<ul class="nav navbar-nav">
    <li routerLinkActive="active"><a routerLink="auth">Authentification</a></li>
    <li routerLinkActive="active"><a routerLink="appareils">Appareils</a></li>
</ul>

Maintenant, les liens s'activent visuellement.

Naviguez avec le Router

Il peut y avoir des cas où vous aurez besoin d'exécuter du code avant une navigation.  Par exemple, on peut avoir besoin d'authentifier un utilisateur et, si l'authentification fonctionne, de naviguer vers la page que l'utilisateur souhaite voir.  Je vous propose d'intégrer cette fonctionnalité à l'application des appareils électriques (l'authentification elle-même restera simulée pour l'instant).

Tout d'abord, créez un nouveau fichier  auth.service.ts  dans le dossier services pour gérer l'authentification (n'oubliez pas de l'ajouter également dans l'array  providers  dans  AppModule ) :

export class AuthService {

  isAuth = false;

  signIn() {
    return new Promise(
      (resolve, reject) => {
        setTimeout(
          () => {
            this.isAuth = true;
            resolve(true);
          }, 2000
        );
      }
    );
  }

  signOut() {
    this.isAuth = false;
  }
}

 La variable  isAuth  donne l'état d'authentification de l'utilisateur.  La méthode  signOut()  "déconnecte" l'utilisateur, et la méthode  signIn()  authentifie automatiquement l'utilisateur au bout de 2 secondes, simulant le délai de communication avec un serveur.

Dans le component  AuthComponent , vous allez simplement créer deux boutons et les méthodes correspondantes pour se connecter et se déconnecter (qui s'afficheront de manière contextuelle : le bouton "se connecter" ne s'affichera que si l'utilisateur est déconnecté et vice versa) :

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.scss']
})
export class AuthComponent implements OnInit {

  authStatus: boolean;

  constructor(private authService: AuthService) { }

  ngOnInit() {
    this.authStatus = this.authService.isAuth;
  }

  onSignIn() {
    this.authService.signIn().then(
      () => {
        console.log('Sign in successful!');
        this.authStatus = this.authService.isAuth;
      }
    );
  }

  onSignOut() {
    this.authService.signOut();
    this.authStatus = this.authService.isAuth;
  }

}

Puisque la méthode  signIn()  du service retourne une Promise, on peut employer une fonction callback asynchrone avec  .then()  pour exécuter du code une fois la Promise résolue.  Ajoutez simplement les boutons, et tout sera prêt pour intégrer la navigation :

<h2>Authentification</h2>
<button class="btn btn-success" *ngIf="!authStatus" (click)="onSignIn()">Se connecter</button>
<button class="btn btn-danger" *ngIf="authStatus" (click)="onSignOut()">Se déconnecter</button>

Le comportement recherché serait qu'une fois l'utilisateur authentifié, l'application navigue automatiquement vers la view des appareils.  Pour cela, il faut injecter le  Router  (importé depuis  @angular/router ) pour accéder à la méthode  navigate()  :

constructor(private authService: AuthService, private router: Router) { }

onSignIn() {
    this.authService.signIn().then(
      () => {
        console.log('Sign in successful!');
        this.authStatus = this.authService.isAuth;
        this.router.navigate(['appareils']);
      }
    );
}

La fonction navigate prend comme argument un array d'éléments (ce qui permet de créer des chemins à partir de variables, par exemple) qui, dans ce cas, n'a qu'un seul membre : le  path  souhaité.

Le chemin  appareils  est toujours accessible actuellement, même sans authentification : dans un chapitre ultérieur, vous apprendrez à le sécuriser totalement.  Avant cela, vous allez apprendre à ajouter des paramètres à vos routes.

Paramètres de routes

Imaginez qu'on souhaite pouvoir cliquer sur un appareil dans la liste d'appareils afin d'afficher une page avec plus d'informations sur cet appareil : on peut imaginer un système de routing de type  appareils/nom-de-l'appareil , par exemple.  Si on n'avait que deux ou trois appareils, on pourrait être tenté de créer une route par appareil, mais imaginez un cas de figure où l'on aurait 30 appareils, ou 300.  Imaginez qu'on laisse l'utilisateur créer de nouveaux appareils ; l'approche de créer une route par appareil n'est pas adaptée.  Dans ce genre de cas, on choisira plutôt de créer une route avec paramètre.

Tout d'abord, vous allez créer la route dans  AppModule  :

const appRoutes: Routes = [
  { path: 'appareils', component: AppareilViewComponent },
  { path: 'appareils/:id', component: SingleAppareilComponent },
  { path: 'auth', component: AuthComponent },
  { path: '', component: AppareilViewComponent }
];

L'utilisation des deux-points  :  avant un fragment de route déclare ce fragment comme étant un paramètre : tous les chemins de type  appareils/*  seront renvoyés vers  SingleAppareilComponent ,  que vous allez maintenant créer :

import { Component, OnInit } from '@angular/core';
import { AppareilService } from '../services/appareil.service';

@Component({
  selector: 'app-single-appareil',
  templateUrl: './single-appareil.component.html',
  styleUrls: ['./single-appareil.component.scss']
})
export class SingleAppareilComponent implements OnInit {

  name: string = 'Appareil';
  status: string = 'Statut';

  constructor(private appareilService: AppareilService) { }

  ngOnInit() {
  }

}

<h2>{{ name }}</h2>
<p>Statut : {{ status }}</p>
<a routerLink="/appareils">Retour à la liste</a>

Pour l'instant, si vous naviguez vers  /appareils/nom , peu importe le nom que vous choisissez, vous avez accès à  SingleAppareilComponent .  Maintenant, vous allez y injecter  ActivatedRoute , importé depuis  @angular/router , afin de récupérer le fragment  id  de l'URL :

constructor(private appareilService: AppareilService,
            private route: ActivatedRoute) { }

Puis, dans  ngOnInit() , vous allez utiliser l'objet  snapshot  qui contient les paramètres de l'URL  et, pour l'instant, attribuer le paramètre  id  à la variable  name  : 

ngOnInit() {
    this.name = this.route.snapshot.params['id'];
}

Ainsi, le fragment que vous tapez dans la barre d'adresse après  appareils/  s'affichera dans le template, mais ce n'est pas le comportement recherché.  Pour atteindre l'objectif souhaité, commencez par ajouter, dans  AppareilService , un identifiant unique pour chaque appareil et une méthode qui rendra l'appareil correspondant à un identifiant :

appareils = [
    {
      id: 1,
      name: 'Machine à laver',
      status: 'éteint'
    },
    {
      id: 2,
      name: 'Frigo',
      status: 'allumé'
    },
    {
      id: 3,
      name: 'Ordinateur',
      status: 'éteint'
    }
];

getAppareilById(id: number) {
    const appareil = this.appareils.find(
      (s) => {
        return s.id === id;
      }
    );
    return appareil;
}

Maintenant, dans  SingleAppareilComponent  , vous allez récupérer l'identifiant de l'URL et l'utiliser pour récupérer l'appareil correspondant :

ngOnInit() {
    const id = this.route.snapshot.params['id'];
    this.name = this.appareilService.getAppareilById(+id).name;
    this.status = this.appareilService.getAppareilById(+id).status;
}

Vous pouvez naviguer manuellement vers  /appareils/2 , par exemple, mais cela recharge encore la page, et vous perdez l'état des appareils (si vous en allumez ou éteignez par exemple).  Pour finaliser cette fonctionnalité, intégrez l'identifiant unique dans  AppareilComponent  et dans  AppareilViewComponent , puis créez un  routerLink  pour chaque appareil qui permet d'en regarder le détail : 

@Input() appareilName: string;
@Input() appareilStatus: string;
@Input() index: number;
@Input() id: number;

<ul class="list-group">
  <app-appareil  *ngFor="let appareil of appareils; let i = index"
                 [appareilName]="appareil.name"
                 [appareilStatus]="appareil.status"
                 [index]="i" 
                 [id]="appareil.id"></app-appareil>
</ul>

<h4 [ngStyle]="{color: getColor()}">Appareil : {{ appareilName }} -- Statut : {{ getStatus() }}</h4>
<a [routerLink]="[id]">Détail</a>

Ici, vous utilisez le format array pour  routerLink  en property binding afin d'accéder à la variable  id  .

Ça y est !  Vous pouvez maintenant accéder à la page Détail pour chaque appareil, et les informations de statut qui s'y trouvent sont automatiquement à jour grâce à l'utilisation du service.

Redirection

Il peut y avoir des cas de figure où l'on souhaiterait rediriger un utilisateur, par exemple pour afficher une page 404 lorsqu'il entre une URL qui n'existe pas.

Pour l'application des appareils électriques, commencez par créer un component 404 très simple, appelé  four-oh-four.component.ts  :

<h2>Erreur 404</h2>
<p>La page que vous cherchez n'existe pas !</p>

Ensuite, vous allez ajouter la route "directe" vers cette page, ainsi qu'une route "wildcard", qui redirigera toute route inconnue vers la page d'erreur :

const appRoutes: Routes = [
  { path: 'appareils', component: AppareilViewComponent },
  { path: 'appareils/:id', component: SingleAppareilComponent },
  { path: 'auth', component: AuthComponent },
  { path: '', component: AppareilViewComponent },
  { path: 'not-found', component: FourOhFourComponent },
  { path: '**', redirectTo: 'not-found' }
];

Ainsi, quand vous entrez un chemin dans la barre de navigation qui n'est pas directement pris en charge par votre application, vous êtes redirigé vers  /not-found  et donc le component 404.

Guards

Il peut y avoir des cas de figure où vous souhaiterez exécuter du code avant qu'un utilisateur puisse accéder à une route ; par exemple, vous pouvez souhaiter vérifier son authentification ou son identité. Techniquement, ce serait possible en insérant du code dans la méthode  ngOnInit()  de chaque component, mais cela deviendrait lourd, avec du code répété et une multiplication des erreurs potentielles.  Ce serait donc mieux d'avoir une façon de centraliser ce genre de fonctionnalité.  Pour cela, il existe la guard  canActivate .

Une guard est en effet un service qu'Angular exécutera au moment où l'utilisateur essaye de naviguer vers la route sélectionnée.  Ce service implémente l'interface  canActivate , et donc doit contenir une méthode du même nom qui prend les arguments  ActivatedRouteSnapshot  et  RouterStateSnapshot  (qui lui seront fournis par Angular au moment de l'exécution) et retourne une valeur booléenne, soit de manière synchrone (boolean), soit de manière asynchrone (sous forme de Promise ou d'Observable) :

import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';

export class AuthGuard implements CanActivate {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    
  }
}

Sauvegardez ce fichier dans le dossier  services  sous le nom  auth-guard.service.ts .

Ensuite, il faut injecter le service  AuthService  dans ce nouveau service.  Pour injecter un service dans un autre service, il faut que le service dans lequel on injecte un autre ait le décorateur  @Injectable , à importer depuis  @angular/core  : 

import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { AuthService } from './auth.service';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService) { }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

  }
}

À l'intérieur de la méthode  canActivate() , vous allez vérifier l'état de l'authentification dans  AuthService .  Si l'utilisateur est authentifié, la méthode renverra  true , permettant l'accès à la route protégée.  Sinon, vous pourriez retourner  false , mais cela empêchera simplement l'accès sans autre fonctionnalité.  Il serait intéressant de rediriger l'utilisateur vers la page d'authentification, le poussant à s'identifier :

import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { AuthService } from './auth.service';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService,
              private router: Router) { }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if(this.authService.isAuth) {
      return true;
    } else {
      this.router.navigate(['/auth']);
    }
  }
}

Pour appliquer cette garde à la route  /appareils  et à toutes ses routes enfants, il faut l'ajouter dans  AppModule .  N'oubliez pas d'ajouter  AuthGuard  à l'array  providers , puisqu'il s'agit d'un service :

const appRoutes: Routes = [
  { path: 'appareils', canActivate: [AuthGuard], component: AppareilViewComponent },
  { path: 'appareils/:id', canActivate: [AuthGuard], component: SingleAppareilComponent },
  { path: 'auth', component: AuthComponent },
  { path: '', component: AppareilViewComponent },
  { path: 'not-found', component: FourOhFourComponent },
  { path: '**', redirectTo: 'not-found' }
];

Maintenant, si vous essayez d'accéder à  /appareils  sans être authentifié, vous êtes automatiquement redirigé vers  /auth .  Si vous cliquez sur "Se connecter", vous pouvez accéder à la liste d'appareils sans problème.

La route  /appareils  étant protégée, vous pouvez retirer les liaisons  disabled  des boutons "Tout allumer" et "Tout éteindre", car vous pouvez être certain que tout utilisateur accédant à cette route sera authentifié.

Dans ce chapitre, vous avez appris à gérer le routing de votre application avec des  routerLink  et de manière programmatique (avec  router.navigate() ).  Vous avez également vu comment rediriger un utilisateur, et comment protéger des routes de votre application avec les guards.