Qu'est-ce un service?

• un service est une classe Type script décorée par @Injectable, qui peut contenir du code réutilisable, ou des données
qu’on veut partager entre plusieurs composants. (Eviter la redondance )

• Un service peut donc :

• Interagir avec les données (fournit, supprime et modifie)

• Faire tout traitement métier (calcul, tri, extraction …)

→Un service est singleton/ global

• Un service est associé à un composant (.ts) en utilisant l’injection de dépendance

• Exemple de quelques services Angular utilisés dans les chapitres précédents :ActivatedRoute, Router

• Exemple d’autre service angular: HttpClient

• Généralement, c’est les service qui interagissent avec la partie back end de l’application en envoyant des requêtes
HTTP.
2
 Création d’un service
• Pour créer un service : ng generate service service-name // ng g s service_name

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

@Injectable({

providedIn: 'root'

})

export class TestService {

constructor() { }

• Depuis la version 6 d’Angular, on n’a plus besoin de déclarer les services dans la section providers dans app.module.ts

• L’expression providedIn: ’root’ vaut déclaration

3
 Injection des dépendances

• Lorsque Angular crée un composant, il demande d'abord à un injecteur les services requis.

• Un injecteur maintient un conteneur d'instances de service qu'il a créé précédemment.

• Si une instance de service demandée n'est pas dans le conteneur, l'injecteur en fait une et
l'ajoute au conteneur avant de renvoyer le service à Angular.

• Lorsque tous les services demandés ont été résolus et retournés, Angular peut appeler le
constructeur du composant avec ces services comme arguments.

4
 Exemple d’interaction composant-service
import { Injectable } from '@angular/core';
import { Produit } from '../model/produit';
export class ProduitDetailComponent implements OnInit {
@Injectable({ produit:Produit
providedIn: 'root'
}) constructor(private ar:ActivatedRoute,
export class TestService { private router:Router,
private products:Array<Produit>=new Array<Produit>(); private service:TestService) { }

ngOnInit() {
constructor() { let id:number
this.products.push({id :1,nom :"pc",prix :1200,quantite :20, this.ar.paramMap.subscribe((params)=>{
urlImg :"./assets/images/pc portable.jfif"}); id=+params.get('id')
this.products.push({id :2,nom :"clavier",prix :10,quantite :10, console.log(" "+id+" ");
this.produit=this.service.getProductById(id)
urlImg :"./assets/images/clavier.jfif"});
});
this.products.push({id :3,nom :"souris",prix :5,quantite :0,
urlImg :"./assets/images/souris.jfif"}); }
}
public getProducts(){
return this.products;
}
public getProductById(id)
{
return this.products.find(x=>x.id==id);
}
} 5
 Simulation de la partie backend (json-server)
• L’outil logiciel json-server est une solution simple pour simuler un API REST lors du développement de votre application.

• Pour installer json-server :npm install -save json-server

• Création d’un fichier json (db.json)

{ "produits":[

{"id":1,

"nom":"pc portable",

"prix":1500,

"quantite":20,

"nomImg":"pc portable"

},…]

• Json-server va utiliser cette "base de données" pour stocker les données de l’application

• Pour démarrer le serveur : json-server --watch src/db.json

6
 Postman
• Postman est un logiciel qui va vous permettre d’appeler / tester une API.

• Postman sert à exécuter des appels HTTP directement depuis une interface graphique.

• Vous pourrez simplement choisir l'URL, la méthode HTTP (le plus souvent GET, POST, PUT, PATCH et DELETE), les
headers, les query params et dans certains cas le body de la requête.

• Méthodes http:
▪ GET: les requêtes GET sont celles effectuées par un navigateur lorsque vous entrez une URL dans la barre de
navigation. Elles ont pour but d’aller chercher une page ou de la donnée.
▪ POST: les requêtes POST ont pour but d’envoyer de l’information, contenue dans le body de la requête, vers le serveur.
▪ PUT: les requêtes PUT vont écraser une ressource avec de la nouvelle donnée, là aussi présente dans le body de la
requête. Elle est utilisée pour mettre à jour de la donnée à condition qu’on soit capable de fournir la ressource mise à
jour dans son intégralité.
▪ PATCH: les requêtes PATCH servent également à mettre à jour une ressource mais en ne modifiant que l’élément
envoyé en body de la requête.
▪ DELETE: comme son nom l’indique, la requête DELETE sert à effacer une ressource 7
Exemple

8
 Module HTTP

• Le module permettant la consommation d’API externe s’appelle le module HTTP.

• Un Http Service nous aidera à aller chercher des données externes, poster, etc.

• Nous devons ajouter le module HttpClientModule dans le tableau « imports » du fichier

« app.modules.ts » pour utiliser le service http. ( import { HttpClientModule}
from'@angular/common/http‘;)

• Afin d’utiliser le module HTTP, il faut l’injecter dans le composant ou le service dans
lequel vous voulez l’utiliser: constructor(private http:HttpClient)

9
 Exemple d’un service
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import { Observable } from 'rxjs';
import { Produit } from '../model/produit';

@Injectable({
providedIn: 'root'
})
export class ProduitService {
Afin d’exécuter une requête get le module httpClient nous offre une
host="http://localhost:3000/produits/" méthode get(). Cette méthode retourne un Observale.
constructor(private client:HttpClient) { }

public getProducts():Observable<Produit[]>{

return this.client.get<Produit[]>(this.host);
}
public getProductById(id):Observable<Produit>
{
return this.client.get<Produit>(this.host+id); endPoint url
} (backend)
public addProduct(produit:Produit):Observable<void>
{
return this.client.post<void>(this.host,produit);
}
}

10
 Utilisation d’un service
ListeProduitsComponent.ts
products:Produit[];
constructor(private service:ProduitService) { }
ngOnInit() {
this.service.getProducts().subscribe(data=>{
this.products=data;
……});
}
DetailsComponent.ts
product:Produit
constructor(private service:ProduitService) { }
ngOnInit() {
let id:number
this.ar.paramMap.subscribe((params)=>{
id=+params.get('id')
this.service.getProductById(id).subscribe(data=>{
this.product=data;
})
});
11