Angular : requête HTTP

Achref El Mouelhi

Docteur de l’université d’Aix-Marseille

Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel

elmouelhi.achref@gmail.com

H & H: Research and Training 1 / 33

 Plan

1 Introduction

2 Utilisation de json-server

3 Fonctionnement

4 Exemple

5 Fichiers environment

6 Package concurrently

H & H: Research and Training 2 / 33

 Introduction

Angular
Le protocole HTTP

Hypertext Transfer Protocol

Protocole de communication entre client et serveur

H I ©
Basé sur la notion requête - réponse appelée généralement (HTTP Request -
HTTP Response)
U EL
O
f E LM
Plusieurs types de requêtes = méthodes HTTP

GET
ch r e
POST
©A
DELETE
PUT

Toutes ces méthodes prennent en paramètre l’adresse du serveur ( + pour

certaines méthodes les données à manipuler)

H & H: Research and Training 3 / 33

 Introduction

Angular
Angular et les serveurs

Angular est un Framework JavaScript qui permet de réaliser des applications

web qui s’exécutent coté client

H I ©
Angular possède un module, HttpModule (HttpClientModule depuis la

EL
version 5) facilitant la réalisation de requête HTTP vers n’importe quel serveur
via les classes suivantes :
O U
HttpClient
f E LM
HttpHeaders
ch r e
© A
HttpInterceptor
HttpRequest
...

Pour le coté serveur : on peut utiliser un serveur JSON qui recevra des requêtes
HTTP envoyées par Angular et retourner une réponse

H & H: Research and Training 4 / 33

 Utilisation de json-server

Angular

json-server

Serveur HTTP de test Front-End pour les développeurs Front-End

Open-source
H I ©
UEL
Utilisant par défaut le port 3000 O
f E LM
ch r e
Documentation : https://github.com/typicode/json-server

©A

H & H: Research and Training 5 / 33

 Utilisation de json-server

Angular

json-server

Serveur HTTP de test Front-End pour les développeurs Front-End

Open-source
H I ©
UEL
Utilisant par défaut le port 3000 O
f E LM
ch r e
Documentation : https://github.com/typicode/json-server

©A
Pour l’installer
npm install -g json-server

H & H: Research and Training 5 / 33

 Utilisation de json-server

Angular
Créons un fichier personnes.json qui va nous servir de base de
données et qui sera situé au même niveau que le dossier du notre
projet angular11
{
"personnes": [
H I ©
EL
{
"nom": "wick",
O U
LM
"prenom": "john",

},
"id": 1
r e f E
ch
©A
{
"nom": "green",
"prenom": "bob",
"id": 2
}
]
}

H & H: Research and Training 6 / 33

 Utilisation de json-server

Angular
Avant d’envoyer des requêtes HTTP au json-server

Utiliser la console pour se placer dans le répertoire contenant le fichier

personnes.json

H I ©
Démarrer json-server sur le port 5555 en précisant le nom de la base de

EL
données

O U
f E LM
ch r e
©A

H & H: Research and Training 7 / 33

 Utilisation de json-server

Angular
Avant d’envoyer des requêtes HTTP au json-server

Utiliser la console pour se placer dans le répertoire contenant le fichier

personnes.json

H I ©
Démarrer json-server sur le port 5555 en précisant le nom de la base de

EL
données

O U
f E LM
Lancer le serveur
ch r e
©A
json-server -p 5555 personnes.json

H & H: Research and Training 7 / 33

 Utilisation de json-server

Angular
Avant d’envoyer des requêtes HTTP au json-server

Utiliser la console pour se placer dans le répertoire contenant le fichier

personnes.json

H I ©
Démarrer json-server sur le port 5555 en précisant le nom de la base de

EL
données

O U
f E LM
Lancer le serveur
ch r e
©A
json-server -p 5555 personnes.json

Résultat (parmi toutes les lignes affichées)

Resources http://localhost:5555/personnes

H & H: Research and Training 7 / 33

 Utilisation de json-server

Angular

http://localhost:5555/personnes
H I ©
U ELréaliser des
C’est l’URL qui sera utilisée par le client pour
requêtes HTTP
L MO
r e f
Si on copie cette adresse Eet qu’on la colle dans le navigateur, on
A chdonnées de notre base de données
obtient toutes les
©

H & H: Research and Training 8 / 33

 Utilisation de json-server

Angular

Explication

Pour récupérer la liste de toutes les personnes

GET : http://localhost:5555/personnes

H I ©
EL
Pour récupérer une personne selon l’identifiant (33 par exemple)
OU
GET : http://localhost:5555/personnes/33
M
f E L
Pour ajouter une nouvelle personne
chr e
POST : http://localhost:5555/personnes
A
© les valeurs d’une personne existante (ayant l’identifiant 33)
Pour modifier
PUT : http://localhost:5555/personnes/33

Pour supprimer une personne existante (ayant l’identifiant 33)

DELETE : http://localhost:5555/personnes/33

H & H: Research and Training 9 / 33

 Fonctionnement

Angular
x.component.html
{{ }}
[]
()
[( )]
H I ©
U EL
O
f E LM
r
Requête
ch e
©A
HTTP
Http
Client

Réponse
HTTP x.service.ts x.component.ts
Serveur
Application Angular

H & H: Research and Training 10 / 33

 Fonctionnement

Angular
Explication

Les données sont saisies (ou affichées) dans le template

.component.html

H I ©
La classe .component.ts peut récupérer des données dont la
EL
source est le template .component.html pour les passer au
U
O
LM
service ou récupérer des données dont la source est le service

r e f E
pour les passer au template .component.html.
En faisant une c
A h de dépendance du service .service.ts
injection
©
dans .component.ts, ce dernier peut l’utiliser pour persister ou
récupérer des données
En faisant une injection de dépendance de la classe HttpClient
dans .service.ts, ce dernier peut effectuer des requêtes
HTTP en précisant chaque fois la méthode et l’URL.

H & H: Research and Training 11 / 33

 Exemple

Angular
Considérons le service personne.service.ts
import { Injectable } from ’@angular/core’;
import { Personne } from ’../interfaces/personne’;

@Injectable({
providedIn: ’root’
H I ©
})
UEL
export class PersonneService {
O
constructor() {
f E LM
url = ’http://localhost:5555/personnes/’;

ch r e
©A
}
getAll(){

}
addPerson(p: Personne){

}
}

H & H: Research and Training 12 / 33

 Exemple

Angular
Dans le constructeur de la classe PersonneComponent, on injecte le service
PersonneService

import { Component, OnInit } from ’@angular/core’;

import { Personne } from ’../../interfaces/personne’;
import { PersonneService } from ’../../services/personne.service’;

H I ©
EL
@Component({
selector: ’app-personne’,
templateUrl: ’./personne.component.html’,
O U
})
styleUrls: [’./personne.component.css’]

f E LM
r e
export class PersonneComponent implements OnInit {
ch
©A
personne: Personne = {};
personnes: Array <Personne> = [];

constructor(private personneService: PersonneService) { }

ngOnInit() {
this.personnes = this.personneService.getAll();
}
}

H & H: Research and Training 13 / 33

 Exemple

Angular

Le template personne.component.html où on affiche le résultat

<h2>Liste des personnes</h2> H I ©
<ul>
UEL
O
<li *ngFor="let elt of personnes">
{{ elt.prenom }} {{ elt.nom }}
f E LM
</li>
ch r e
</ul>
©A

H & H: Research and Training 14 / 33

 Exemple

Angular
Commençons par injecter le service HttpClient dans personne.service.ts
import { Injectable } from ’@angular/core’;
import { HttpClient } from ’@angular/common/http’;
import { Personne } from ’../interfaces/personne’;

@Injectable({
providedIn: ’root’
H I ©
})
export class PersonneService {
U EL
O
E LM
url = ’http://localhost:5555/personnes/’;
f
ch r e
constructor(private http: HttpClient) {

}
getAll(){
©A
}
addPerson(p: Personne){

}
}

H & H: Research and Training 15 / 33

 Exemple

Il faut importer le module HttpClientModule dans app.module.ts pour utiliser

HttpClient

import { BrowserModule } from ’@angular/platform-browser’;

import { NgModule } from ’@angular/core’;
import { FormsModule } from ’@angular/forms’;
import { HttpClientModule } from ’@angular/common/http’;
//+ les autres imports

@NgModule({
H I ©
EL
declarations: [
AppComponent,
O U
LM
AdresseComponent,
PersonneComponent,
FormulaireComponent
r e f E
ch
],

©A
imports: [
BrowserModule,
FormsModule,
HttpClientModule
],
providers: [PersonneService],
bootstrap: [AppComponent]
})
export class AppModule { }

H & H: Research and Training 16 / 33

 Exemple

Angular
Faisons une première requête HTTP pour récupérer la liste des personnes
import { Injectable } from ’@angular/core’;
import { HttpClient } from ’@angular/common/http’;
import { Personne } from ’../interfaces/personne’;

@Injectable({
providedIn: ’root’
H I ©
})
export class PersonneService {
U EL
O
E
url = ’http://localhost:5555/personnes/’;
f LM
ch r e
constructor(private http: HttpClient) {

} ©A
getAll(): Observable<Array<Personne>> {
return this.http.get<Array<Personne>>(this.url);
}
addPerson(p: Personne) {

}
}

HLa mResearch
& H: éthode and
getAll()
Training retourne un Observable. 17 / 33
 Exemple

Pour récupérer la liste des personnes dans personne.component.ts, il faut s’abonner

import { Component, OnInit } from ’@angular/core’;

import { Personne } from ’../../interfaces/personne’;
import { PersonneService } from ’../../services/personne.service’;

@Component({
selector: ’app-personne’,
templateUrl: ’./personne.component.html’,
styleUrls: [’./personne.component.css’]
H I ©
})
UEL
export class PersonneComponent implements OnInit {
O
LM
personne: Personne = {};
personnes: Array <Personne> = [];

r e f E
ch
constructor(private personneService: PersonneService) { }

©A
ngOnInit(): void {
this.personneService.getAll().subscribe(res => {
this.personnes = res;
});
}
}

En lançant l’application, la liste de personnes est affichée.

H & H: Research and Training 18 / 33
 Exemple

Récupérons le formulaire permettant d’ajouter une personne (voir chapitre formulaire)

<form #monForm=ngForm (ngSubmit)=ajouterPersonne()>

<div>
Nom : <input type=text name=nom [(ngModel)]=personne.nom required #
nom="ngModel">
</div>
<div [hidden]="nom.valid || nom.pristine">
Le nom est obligatoire
</div>
H I ©
<div>
U EL
O
Prénom : <input type=text name=prenom [(ngModel)]=personne.prenom

LM
required #prenom="ngModel">
</div>

r e f E
<div [hidden]="prenom.valid || prenom.pristine">

ch
Le prénom est obligatoire
</div>
<div> ©A
<button [disabled]=!monForm.valid>
ajouter
</button>
</div>
</form>
<!-- garder la partie permettant d’afficher les personnes -->

H & H: Research and Training 19 / 33

 Exemple

Angular

Récupérons aussi les propriétés pour les classes CSS fournies

par Angular
H I ©
.ng-invalid:not(form){
UEL
border-left: 5px solid red; O
}
f E LM
.ng-valid:not(form){
ch r e
©A
border-left: 5px solid green;
}

H & H: Research and Training 20 / 33

 Exemple

Angular
Préparons la requête HTTP permettant d’ajouter une personne

import { Injectable } from ’@angular/core’;

import { HttpClient } from ’@angular/common/http’;
import { Personne } from ’../interfaces/personne’;

@Injectable({
H I ©
EL
providedIn: ’root’
})
export class PersonneService {
O U
f E LM
url = ’http://localhost:5555/personnes/’;

ch r e
©A
constructor(private http: HttpClient) { }

getAll(): Observable<Array<Personne>> {
return this.http.get<Array<Personne>>(this.url);
}
addPerson(p: Personne): Observable<Personne> {
return this.http.post(this.url, p);
}
}

H & H: Research and Training 21 / 33

 Exemple

Ajoutons la méthode ajouterPersonne() dans personne.component.ts

import { Component, OnInit } from ’@angular/core’;
import { Personne } from ’../../interfaces/personne’;
import { PersonneService } from ’../../services/personne.service’;

@Component({
selector: ’app-personne’,
templateUrl: ’./personne.component.html’,
styleUrls: [’./personne.component.css’]
H I ©
EL
})

personne: Personne = {};

O U
export class PersonneComponent implements OnInit {

personnes: Array<Personne> = [];

f E LM
constructor(private personneService: PersonneService) { }
ngOnInit() {
ch r e
©A
this.personneService.getAll().subscribe(res => {
this.personnes = res;
});
}
ajouterPersonne() {
this.personneService.addPerson(this.personne).subscribe(res => {
console.log(res);
});
}
}
H & H: Research and Training 22 / 33
 Exemple

Angular
Si on essaye d’ajouter une personne

La personne est ajoutée dans le fichier personnes.json

Mais elle n’est pas affichée dans la page qu’après actualisation

H
Car on ne met pas à jour la liste des personnesI ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 23 / 33

 Exemple

Angular
Si on essaye d’ajouter une personne

La personne est ajoutée dans le fichier personnes.json

Mais elle n’est pas affichée dans la page qu’après actualisation

H
Car on ne met pas à jour la liste des personnesI ©
U EL
O
Deux solutions possibles
f E LM
ch r e
Soit on ajoute la personne au tableau personnes de la classe

©A
personne.component.ts lorsqu’on l’ajoute dans notre fichier
personnes.json
Soit on refait appel à la méthode getAll() de notre service
personne.service.ts dans personne.component.ts
lorsqu’on l’ajoute dans notre fichier personnes.json pour
mettre à jour le tableau personnes
H & H: Research and Training 23 / 33
 Exemple

Modifions la méthode ajouterPersonne() dans personne.component.ts

// les imports
@Component({
selector: ’app-personne’,
templateUrl: ’./personne.component.html’,
styleUrls: [’./personne.component.css’]
})
export class PersonneComponent implements OnInit {
personne: Personne = {};
H I ©
EL
personnes: Array <Personne> = [];

OU
constructor(private personneService: PersonneService) { }

ngOnInit() {
L M
f E
this.personneService.getAll().subscribe(res => {
r e
ch
this.personnes = res;

}
});
© A
ajouterPersonne() {
this.personneService.addPerson(this.personne).subscribe(res => {
this.personneService.getAll().subscribe(result => {
this.personnes = result;
});
});
}
}
H & H: Research and Training 24 / 33
 Exemple

Angular

H I ©
Question : que contient la variable res de l’exemple précédent
UEL
O
Elle contient l’objet qu’on a ajouté dans la base de données avec une

f E LM
valeur attribuée à id (et qu’on peut utiliser pour faire d’autres
opérations)
ch r e
©A

H & H: Research and Training 25 / 33

 Exemple

Angular

Exercice
H I ©
U EL
Ajouter du code HTML dans personne.component.html, des
M
méthodes dans personne.component.ts O et des méthodes dans
personne.service.ts (avec f L
Eles méthodes HTTP delete et put)
r e
ch de supprimer des personnes.
pour permettre de modifier et
© A

H & H: Research and Training 26 / 33

 Fichiers environment

Angular

Le répertoire environments

H I ©
contient deux fichiers permettant de définir les variables
d’environnement d’une application Angular
UEL
O
f E LM
environment.ts pour le mode développement

r e
environment.prod.ts pour le mode production
ch
©A
Angular remplacera automatiquement le premier fichier par le
deuxième fichier à chaque fois exécution de ng build --prod.

H & H: Research and Training 27 / 33

 Fichiers environment

Angular

Contenu initial de environment.ts

export const environment = {
production: false,
};
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 28 / 33

 Fichiers environment

Angular

Contenu initial de environment.ts

export const environment = {
production: false,
};
H I ©
EL
M OU
f E L l’adresse le préfixe de nos API
Ajoutons dans environment.ts
REST
chr e
A
© environment = {
export const
production: false,
APIEndpoint: ’http://localhost:5555/’
};

H & H: Research and Training 28 / 33

 Fichiers environment

Modifions personne.service.ts et utilisons la variable ajoutée dans environment.ts

import { Injectable } from ’@angular/core’;
import { HttpClient } from ’@angular/common/http’;
import { Personne } from ’../interfaces/personne’;
import { environment } from ’../../environments/environment’;

@Injectable({
providedIn: ’root’
})
H I ©
EL
export class PersonneService {

url: string;
O U
f E
constructor(private http: HttpClient) { LM
ch r e
const APIEndpoint = environment.APIEndpoint;

©A
this.url = APIEndpoint + ’personnes/’;
}

getAll() {
return this.http.get<Array<Personne>>(this.url);
}
addPerson(p: Personne) {
return this.http.post(this.url, p);
}
}
H & H: Research and Training 29 / 33
 Package concurrently

Angular

Objectif

H I ©
Ne plus démarrer séparément les deux serveurs JSON et Angular.
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 30 / 33

 Package concurrently

Angular

Objectif

H I ©
Ne plus démarrer séparément les deux serveurs JSON et Angular.
UEL
O
f E LM
Solution ch r e
©A
Utiliser le package concurrently.

H & H: Research and Training 30 / 33

 Package concurrently

Angular

Package concurrently

Package NodeJS

H I ©
EL
Permettant d’exécuter plusieurs commandes simultanément
U
O
f E LM
Syntaxe concurrently "command1 arg" "command2 arg"

ch r e
©A

H & H: Research and Training 31 / 33

 Package concurrently

Angular

Package concurrently

Package NodeJS

H I ©
EL
Permettant d’exécuter plusieurs commandes simultanément
U
O
f E LM
Syntaxe concurrently "command1 arg" "command2 arg"

ch r e
©A
Pour l’installer
npm install concurrently --save

H & H: Research and Training 31 / 33

 Package concurrently

Angular
En exécutant la commande
npm start

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 32 / 33

 Package concurrently

Angular
En exécutant la commande
npm start

H I ©
EL
C’est la section scripts qui sera consultée et plus précisément
U
la partie start O
"scripts": {
f E LM
"ng": "ng",
ch r e
©A
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},

H & H: Research and Training 32 / 33

 Package concurrently

Angular

Modifions la partie start pour pouvoir démarrer les deux serveurs simultanément

"scripts": {
"ng": "ng",

.json\"",
H I ©
"start": "concurrently \"ng serve\" \"json-server -p 5555 personnes

"build": "ng build",

U EL
"test": "ng test",
O
LM
"lint": "ng lint",

},
"e2e": "ng e2e"

r e f E
ch
©A

H & H: Research and Training 33 / 33

 Package concurrently

Angular

Modifions la partie start pour pouvoir démarrer les deux serveurs simultanément

"scripts": {
"ng": "ng",
"start": "concurrently \"ng serve\" \"json-server -p 5555 personnes
.json\"",
H I ©
"build": "ng build",
U EL
"test": "ng test",
O
LM
"lint": "ng lint",

},
"e2e": "ng e2e"

r e f E
ch
©A
Avant de tester, pensez à déplacer le fichier personne.json à la racine du projet.

H & H: Research and Training 33 / 33