API Rest avec Angular 11

Dans cet article, je vais vous montrer comment consommer une API Rest avec Angular 11. Pour cela, j’ai conçu une petite application, qui une fois lancée ressemble à ceci :

C’est une application plutôt simple qui nous permet de nous concentrer sur les notions élémentaires. La page d’accueil affiche une liste de contacts récupérés grâce à l’appel d’une API REST. On dispose d’un « header » contenant le nom de l’application ainsi que le Framework et la version utilisée, ici Angular 11.2.10. Sur la partie gauche, on a un bouton qui permet d’ajouter un contact et qui nous dirige vers une autre page. Cette page « ajouter contact » sera étudiée dans un prochain article. Sur chaque « card » contenant un contact, on a 2 icônes, une pour supprimer le contact et l’autre pour éditer ce même contact.

L’Api REST

L’API REST utilisée est une API que j’ai développé en Java avec le Framework Spring, le code de l’application est disponible ici. Pour que notre application Angular affiche des données, il faudra lancer cette API en local. Par défaut, elle se lance sur le port 8080. Une fois lancée, on peut consulter les données en GET en utilisant postman par exemple :

En appelant l’url http://localhost:8080 avec la méthode GET, l’API nous renvoie un tableau de contacts avec les champs suivants : id, firstName, lastName, age.

Créer une application « from scratch »

Revenons à l’application Front, avant de s’intéresser au code, nous allons voir comment l’application a été créée. Et justement pour démarrer simplement une application « from scratch », il existe le fameux Angular CLI. C’est un outil en ligne de commande à installer et lancer via NPM, qui nécessite donc dans un premier temps l’installation de NodeJS. Une fois le CLI installé (npm install -g @angular/cli), nous pouvons donc créer une nouvelle application en lançant la commande ng new contacts-front-angular. La nouvelle application sera ainsi disponible à l’url http://localhost:4200 après avoir lancé la commande ng serve. Pour cet article on utilisera l’application disponible sur mon github à l’adresse suivante https://github.com/rpalvair/contacts-front-angular en prenant soin de bien sélectionner la branche 01-starting-project.

Structure du dossier src/app

Le dossier src/app qui contient les composants de l’application possède cette structure:

Dans le dossier components, on retrouve les composants liés au layout de l’application. On a qu’un seul élément le header. Dans le dossier pages, on retrouve comme son l’indique les pages de l’application. Celle qui nous intéresse est la page « contacts-list » qui est en fait la page d’accueil :

Dépendances

Notre application a besoin de dépendances supplémentaires notamment pour la partie « design ». Nous avons besoin du Framework Bootstrap (version 4.6.0) et FontAwesome pour les icônes. Il existe un package qui permet d’intégrer aisément FontAwesome et Angular: https://www.npmjs.com/package/@fortawesome/angular-fontawesome. Nous utiliserons ce package.

Pour Bootstrap, les dépendances suivantes doivent être installées:

npm i bootstrap
npm i jquery
npm i popper.js

Pour activer Bootstrap, il a fallu modifier le fichier angular.json qui se trouve à la racine du projet et enrichir la section « styles »:

ainsi que la section « scripts »:

Le Header

Le header est géré par le composant TheHeaderComponent décrit par le fichier typescript the-header.component.ts et le fichier html the-header.component.html. Ce composant affiche le nom de l’application ainsi que le nom et la version du Framework utilisé. Le nom de l’application et le nom du Framework sont « en dur » dans le template. Par contre la version est récupérée via la variable qui porte le même nom avec l’utilisation de l’interpolation :

La version est extraite à partir de la dépendance @angular/core présente dans le fichier package.json comme on peut le voir dans le fichier the-header.component.ts :

Affichage des contacts

L’affichage sur la page d’accueil est géré dans le composant ContactsListComponent.ts. Ce composant implémente l’interface OnInit et va donc charger les contacts dans la méthode ngOnInit :

Dans la méthode loadContacts, on va donc faire appel à notre API pour récupérer les contacts et renseigner le tableau de contacts qui est initialisé avec un tableau vide. Pour cela, on va utiliser la classe HttpClient et la méthode get() qui prend en paramètre une url et qui retourne un Observable. Il faut donc souscrire à cet Observable(« subscribe ») afin de pouvoir récupérer les données de l’API. Une fois que l’API a répondue, on stocke les données dans le tableau de contacts :

J’ai créé en plus un fichier config.js qui est importé dans le composant et qui contient les urls des endpoints de l’API de contacts:

Au démarrage de l’application , les contacts sont chargés et seront affichés dans le template contacts-list-component.html. Dans ce fichier html, on a une liste de « card » qui sont des composants de Bootstrap (https://getbootstrap.com/docs/4.6/components/card/). On parcourt le tableau de contacts et pour chaque contact on affiche une « card » avec les infos du contact. Au niveau du html, on a donc besoin d’utiliser la directive *ngFor qui permet de boucler sur le tableau de contacts :

Pour afficher les informations, on va donc utiliser l’interpolation. Par exemple, pour afficher l’attribut firstName suivi de l’attribut lastName ,on utilise la syntaxe suivante {{contact.firstName}} {{contact.lastName}}.

On remarque la présence des icônes qui possèdent chacune un listener sur l’évènement « click » afin déclencher l’appel de méthodes définies dans le composant ContactsListComponent. Les icônes doivent être définies au préalable dans le composant associé à la vue. On retrouve donc la définition de ces deux icônes dans contacts-list.component.ts

ainsi que l’import depuis le package

Un petit mot sur la navigation

En créant notre application, le CLI a installé le package @angular/router qui permet de gérer la navigation dans notre application. Le fichier app-routing.module.ts contient le module qui sert à configurer le « routing ». Il contient des « routes » qui redirigent vers des composants. La route principale qui pointe vers la racine de notre site (page d’accueil) instancie le composant ContactsListComponent. Toutes les autres routes non configurées sont redirigées vers la page d’accueil grâce à l’utilisation du wildcard (**) :

En conclusion

Nous avons vu dans cet article comment consommer une API Rest et afficher le résultat dans une application Angular. L’application permet également de supprimer un contact, de le modifier ou de créer un nouveau contact. Nous verrons ces différentes fonctionnalités dans de futurs articles. Nous mettrons également en place la gestion des erreurs, un système d’authentification et pleins d’autres améliorations.

Voici le lien vers l’application : https://github.com/rpalvair/contacts-front-angular/tree/01-starting-project

A très vite !