Si vous avez développé une application en utilisant AngularJS, vous connaissez probablement les intercepteurs HTTP. Cependant, ces intercepteurs HTTP n'étaient pas disponibles dans Angular avant la version 4.3. Dans ce tutoriel, nous utiliserons des intercepteurs dans Angular pour gérer les requêtes et réponses HTTP, et traiter les erreurs.
Prérequis
Angular utilisent le runtime Node.js. Pour suivre ce tutoriel, vous devrez avoir installé Node.js sur votre machine. Heureusement, Node.js est assez facile à installer. Nous avons un guide complet sur Comment installer Node.js sur Ubuntu 18.04 ici.
De plus, il vous sera utile de connaître Angular et d'être familiarisé avec l'utilisation de Angular CLI pour créer des applications Angular. Nous utiliserons Node v8.12.0 et npm v6.4.1.
Étape 1 : Créer l'application Angular
Pour commencer, créons une nouvelle application Angular à l'aide d'Angular CLI. Nous nommerons notre application Angular-Interceptor. Exécutez la commande ci-dessous pour créer l'application :
|
1 |
npx @angular/cli@7.0.6 new Angular-Interceptor |
Plusieurs choix vous seront proposés. Saisissez les valeurs par défaut et continuez :
Ensuite, accédez au répertoire de l'application et exécutez la commande ci-dessous pour démarrer l'application :
|
1 |
npx ng serve --open |
Ensuite, ouvrez http://localhost:4200 dans votre navigateur pour voir l'application. Vous avez maintenant configuré une application Angular de base.
Étape 2 : Styliser l'application Angular
Ici, nous allons styliser notre application Angular en utilisant Angular Material. Pour installer Angular Material dans votre projet, exécutez la commande ci-dessous :
|
1 |
npm install --save @angular/material@7.0.4 @angular/cdk@7.0.4 @angular/animations@7.0.4 |
Cela installera @angular/material, @angular/cdk, et @angular/animation dans votre projet. Ensuite, nous allons configurer une animation dans le projet. Ajoutez BrowserAnimationsModule dans votre fichier src/app/module.ts :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ ... imports: [ ... BrowserAnimationsModule ], ... }) export class AppModule { } |
Nous utiliserons le composant Dialog d'Angular Material. Pour utiliser le composant Dialog, nous devons importer MatDialogModule dans le fichier src/app/app.module.ts :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... import { MatDialogModule } from '@angular/material'; @NgModule({ ... imports: [ ... MatDialogModule ], ... }) export class AppModule { } |
Pour rendre l'interface utilisateur plus attrayante, ajoutons indigo-pink.css à votre fichier styles.scss :
|
1 |
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; |
Étape 3 : Créer votre intercepteur Angular
Sous le dossier app, nous allons créer un nouveau dossier appelé interceptor. À l'intérieur de ce dossier nouvellement créé, créez un nouveau fichier httpconfig.interceptor.ts .
Nous devons importer certaines dépendances dans notre fichier httpconfig.interceptor.ts pour faire fonctionner notre intercepteur. Ces dépendances sont HttpInterceptor, HttpRequest, HttpResponse, et HttpHandler, HttpEvent, HttpErrorResponse.
Notre fichier httpconfig.interceptor.ts ressemblera à ceci après l'importation :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { Injectable } from '@angular/core'; import { HttpInterceptor, HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http'; import { Observable, throwError } from 'rxjs'; import { map, catchError } from 'rxjs/operators'; |
Ensuite, créez une classe HttpConfigInterceptor et implémentez l'interface HttpInterceptor. Voici un exemple :
|
1 2 3 4 5 6 7 |
@Injectable() export class HttpConfigInterceptor implements HttpInterceptor { intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { // ... } } |
Ajoutez le code ci-dessous au fichier httpconfig.interceptor.ts :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
... @Injectable() export class HttpConfigInterceptor implements HttpInterceptor { intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const token: string = localStorage.getItem('token'); if (token) { request = request.clone({ headers: request.headers.set('Authorization', 'Bearer ' + token) }); } if (!request.headers.has('Content-Type')) { request = request.clone({ headers: request.headers.set('Content-Type', 'application/json') }); } request = request.clone({ headers: request.headers.set('Accept', 'application/json') }); return next.handle(request).pipe( map((event: HttpEvent<any>) => { if (event instanceof HttpResponse) { console.log('event--->>>', event); } return event; })); } } |
Pour que cela fonctionne, nous devons importer httpconfig.interceptor.ts dans notre fichier app.module.ts :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; ... import { HttpConfigInterceptor } from './interceptor/httpconfig.interceptor'; @NgModule({ ... imports: [ ... HttpClientModule ], ... }) |
Ajoutez HttpConfigInterceptor à providers. Nous allons définir multi: true pour gérer plusieurs intercepteurs :
|
1 2 3 4 5 6 7 8 9 10 |
... @NgModule({ ... providers: [ ... { provide: HTTP_INTERCEPTORS, useClass: HttpConfigInterceptor, multi: true } ], ... }) ... |
Dans la section suivante, nous allons créer notre service pour gérer les erreurs.
Étape 4 : Service de gestion des erreurs
Ici, nous allons écrire le code pour gérer les erreurs. Nous devrons capturer les erreurs et les afficher de manière appropriée aux utilisateurs finaux. En résumé, voici les étapes que nous allons suivre :
- Créez un dossier nommé error-dialog dans le dossier app .
- Créez un service pour les erreurs nommé errorDialogService dans un fichier nommé errordialog.service.ts.
- Ajoutez le code ci-dessous dans le fichier errordialog.service.ts :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { Injectable } from '@angular/core'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; import { ErrorDialogComponent } from './errordialog.component'; @Injectable() export class ErrorDialogService { public isDialogOpen: Boolean = false; constructor(public dialog: MatDialog) { } openDialog(data): any { if (this.isDialogOpen) { return false; } this.isDialogOpen = true; const dialogRef = this.dialog.open(ErrorDialogComponent, { width: '300px', data: data }); dialogRef.afterClosed().subscribe(result => { console.log('La boîte de dialogue a été fermée'); this.isDialogOpen = false; let animal; animal = result; }); } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { Component, Inject } from '@angular/core'; import { MAT_DIALOG_DATA } from '@angular/material'; @Component({ selector: 'app-root', templateUrl: './errordialog.component.html' }) export class ErrorDialogComponent { title = 'Angular-Interceptor'; constructor(@Inject(MAT_DIALOG_DATA) public data: string) {} } |
|
1 2 3 4 5 6 7 8 9 10 |
<div> <div> <p> Raison: {{data.reason}} </p> <p> Statut: {{data.status}} </p> </div> </div> |
Pour résumer, listons les étapes ci-dessous :
- Commencez par importer errordialog.service.
- Ensuite, nous ajouterons le constructeur pour errorDialogService.
- Nous ajouterons également le code pour gérer la réponse d'erreur en utilisant catchError et throwError.
- Importez errordialog.service et errordialog.component dans le AppModule.
Après avoir effectué les modifications, deux fichiers seront modifiés : app.module.ts et httpconfig.interceptor.ts:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... import { ErrorDialogComponent } from './error-dialog/errordialog.component'; ... import { ErrorDialogService } from './error-dialog/errordialog.service'; ... @NgModule({ ... declarations: [ ... ErrorDialogComponent ], ... providers: [ ... ErrorDialogService ], entryComponents: [ErrorDialogComponent], }) |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
... import { ErrorDialogService } from '../error-dialog/errordialog.service'; ... @Injectable() export class HttpConfigInterceptor implements HttpInterceptor { constructor(public errorDialogService: ErrorDialogService) { } intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { ... return next.handle(request).pipe( map((event: HttpEvent<any>) => { if (event instanceof HttpResponse) { console.log('event--->>>', event); } return event; }), catchError((error: HttpErrorResponse) => { let data = {}; data = { reason: error && error.error && error.error.reason ? error.error.reason : '', status: error.status }; this.errorDialogService.openDialog(data); return throwError(error); })); } } |
Étape 5 : Création de services d'exemple
Dans cette étape, nous allons créer deux services à titre d'exemple :
- API de connexion
- API de détails client
Créez un nouveau dossier nommé services dans le dossier src . Ensuite, à l'intérieur de ce dossier nouvellement créé, créez un nouveau fichier nommé login.service.ts, et ajoutez deux fonctions :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable() export class LoginService { constructor(private http: HttpClient) { } login(data) { data = { email: 'admin', password: 'admin' }; return this.http.post('http://localhost:3070/api/login', data); } getCustomerDetails() { return this.http.get('http://localhost:3070/customers/details'); } } |
Étape 6 : Appel du service client HTTP
Enfin, nous arrivons à la dernière partie de notre tutoriel. Nous allons appeler notre service HTTP depuis le fichier app.component.ts . Ajoutez les deux LoginService fonctions à app.component.ts. Appelez l'API de connexion au chargement (onload) et l'API customers/details avec onclick:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import { Component } from '@angular/core'; import { LoginService } from './services/login.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'Angular-Interceptor'; constructor(public loginService: LoginService) { this.loginService.login({}).subscribe(data => { console.log(data); }); } getCustomerDetails() { this.loginService.getCustomerDetails().subscribe((data) => { console.log('----->>>', data); }); } } |
Maintenant, nous devons ajouter un élément d'interface utilisateur dans app.component.html, afin que l'utilisateur puisse cliquer dessus :
|
1 |
<h2 (click)="getCustomerDetails()">Obtenir les détails du client</h2> |
Pour terminer, vous devrez inclure le LoginService dans les providers de AppModule:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
... import { LoginService } from './services/login.service'; ... @NgModule({ ... providers: [ ... LoginService ] ... }) |
Ci-dessous, voici une capture d'écran de la boîte de dialogue du gestionnaire d'erreurs :
Conclusion
Dans ce tutoriel, nous avons appris à gérer les requêtes et les réponses HTTP à l'aide des intercepteurs Angular. Nous avons également appris à gérer les erreurs à l'aide d'une boîte de dialogue dans Angular Material.
Les applications Angular utilisent Node.js comme environnement d'exécution. Si vous souhaitez en savoir plus sur Node.js et sur la manière de déployer des applications Node.js avec Docker, consultez notre Comment déployer une application Node.js (Express.js) avec Docker sur Ubuntu 20.04 guide. Vous pouvez également consulter Comment effectuer des tâches de production sur Ubuntu 20.04 avec Node.js et Installer Node.js sur CentOS 8 : un guide complet.
Bon développement !
Commentaires
Aucun commentaire pour l'instant. Soyez le premier.