Angular et la connexion à Node.js : les services

Introduction

Au sein d’une architecture MEAN, le serveur Node.js n’échange que des données avec l’application cliente (cela permet au serveur d’être particulièrement efficace). Au niveau du serveur, l’échange de données est organisé par des services web qui sont invoqués sur des routes REST. Ces services web interrogent alors une base de données MongoDB au travers du module mongodb, et renvoient des données généralement formatées en JSON.

Au sein de l’application Angular, la connexion au serveur Node.js, et donc aux services web que celui-ci gère, est délégué à des services (déclarés dans les modules comme providers). Un service est un composant utilitaire, sans template, qui peut être partagé par plusieurs composants. Angular propose des services « bas niveau », tel le service HTTP fourni par le module HTTP (incarné par un dossier) dont les méthodes de la classe HTTP permettent d’invoquer les services web via les différentes méthodes (verbes) HTTP (GET, POST, PUT et DELETE).

Ainsi, une application Angular utilise non seulement des services déjà fournis, mais crée aussi les siens propres. C’est ce que nous allons voir dans ce chapitre, notamment au travers de la mise en place de l’application fil rouge d’e-commerce....

Injection de dépendances

Sous Angular, l’injection de dépendances permet d’injecter une même classe dans les constructeurs de différents composants sans se soucier de déterminer à quel moment cette classe devra être instanciée. Ce mécanisme très puissant est par exemple mis en œuvre pour utiliser des services.

Les services Angular sont des codes partagés par différents composants, entre autres pour fournir à ceux-ci des mécanismes d’accès aux données (notamment celles délivrées par le serveur ou qui mettent à jour le serveur via l’envoi de données).

Dans le contexte d’une architecture MEAN, ils sont donc les intermédiaires incontournables entre les composants d’Angular et les services web gérés par le serveur Node.js.

Sous Angular, un service est une classe injectée dans les composants qui en ont besoin. Les classes constituant les services doivent être décorées avec le décorateur @Injectable().

Voici le schéma de programmation d’un service :

import { Injectable } from '@angular/core'; 
@Injectable() 
export class <nom du service> { 
  ... 
} 

Un service est exploitable dans un composant (ou dans un autre service) en déclarant une variable (typée...

Utilisation des services pour le transfert de données

Les services Angular sont très fréquemment utilisés pour gérer les transferts de données vers le serveur (ce n’est pas leur seule utilité, ils peuvent par exemple tout simplement être mis en œuvre pour partager des variables entre les composants).

import { Injectable } from '@angular/core'; 
import { HttpClient } from '@angular/common/http'; 
import { Observable } from 'rxjs'; 
 
@Injectable() 
export class ResearchService { 
  constructor(private http: HttpClient) {} 
 
   getProducts(parametres: string): Observable<any> { 
     let url: string = "http://localhost:8888/Products/"+parametres;
     let...

Mise en œuvre des services dans le fil rouge

L’application d’e-commerce utilise deux services :

Ces deux services vont eux-mêmes utiliser le service HttpClient fourni par Angular et qui permet d’émettre des requêtes HTTP à destination d’un serveur HTTP (en l’occurrence le serveur Node.js).

Nous allons, dans ce qui suit, lister les services web gérés par le serveur Node.js, puis décliner chaque traitement de l’application qui met en œuvre un service, en présentant le composant qui implémente une fonctionnalité particulière, le service qu’il utilise comme intermédiaire entre lui et le serveur, et enfin le service web invoqué sur le serveur.

La bibliothèque NgRx et les stores

La mise en œuvre de la bibliothèque NgRx permet de centraliser toutes les données de l’application qui définissent un état de celle-ci dans un objet global. Par exemple, dans le cadre de notre application fil rouge, ces données correspondraient au profil de l’utilisateur, sa dernière recherche sur les produits mis en vente, et le contenu de son panier.

Cet objet est encapsulé dans une classe appelée le store qui est la seule qui per-mette d’y accéder, et peut le modifier via des actions typées. L’accès aux propriétés du store s’effectue par des sélecteurs qui prennent la forme d’observables (tels que nous les avons décrits précédemment dans cet ouvrage lors de la présentation de la programmation réactive avec RxJs) et informent ainsi tous les composants qui y sont abonnés d’un changement d’état de l’application.

Avec la mise en place d’un store, les transferts de données entre l’application Angular et le serveur Node.js sont alors directement gérés par celui-ci. Les services Angular peuvent continuer d’être mis en œuvre, mais seulement en interface du store. Il est aussi important de noter que chaque feature module de l’application Angular peut être associé...

Bilan des acquis de ce chapitre

Ce chapitre a étudié l’interfaçage des composants Angular avec Node.js. Cet interfaçage repose sur des services qui sont des classes injectables que les composants peuvent se partager, l’instanciation de ces classes étant gérée automatiquement par Angular via une injection de services. Ainsi, nous avons vu comment utiliser un service en déclarant une variable en paramètre du constructeur de la classe implémentant le composant. En amont, le schéma de programmation d’un service implémenté par une classe TypeScript décorée par le décorateur @Injectable() a été analysé.

En utilisant le service HTTP offert par Angular (module HTTP), et notamment les méthodes GET, POST et DELETE que ce service propose, vous pouvez développer vos propres services pour échanger des données avec le serveur Node.js.

Cet échange de données prenant naturellement la forme de données formatées en JSON, l’envoi de telles données via les méthodes HTTP POST et DELETE a été illustré (ces données étant incluses dans le corps du message HTTP), ainsi que la récupération de données formatées en JSON via la méthode HTTP GET.

Puis nous avons également détaillé l’envoi...