Angular 8 : service

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

12-13 Avril 2018 1 / 14

 Plan

1 Définition

2 Créer un service

3 Déclarer un service

4 Utiliser un service

12-13 Avril 2018 2 / 14

 Définition

Angular

Définition : service
une classe TypeScript décorée par @Injectable
un singleton
intermédiaire avec la partie back-end
injectable dans les classes où on a besoin de l’utiliser
pouvant faire appel à un ou plusieurs autres services

12-13 Avril 2018 3 / 14

 Créer un service

Angular
Pour créer un service
ng generate service nom-service

12-13 Avril 2018 4 / 14

 Créer un service

Angular
Pour créer un service
ng generate service nom-service

Ou aussi
ng g s nom-service

12-13 Avril 2018 4 / 14

 Créer un service

Angular
Pour créer un service
ng generate service nom-service

Ou aussi
ng g s nom-service

Créons un service personne dans un répertoire services

ng g s services/personne

Constat : deux fichiers créés

personne.service.ts
personne.service.spec.ts

12-13 Avril 2018 4 / 14

 Créer un service

Angular
Le contenu de personne.service.ts jusqu’à la version 5 d’Angular
import { Injectable } from ’@angular/core’;

@Injectable()
export class PersonneService {

constructor() { }
}

12-13 Avril 2018 5 / 14

 Créer un service

Angular
Le contenu de personne.service.ts jusqu’à la version 5 d’Angular
import { Injectable } from ’@angular/core’;

@Injectable()
export class PersonneService {

constructor() { }
}

Le contenu de personne.service.ts à partir de la version 6 d’Angular

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

@Injectable({
providedIn: ’root’
})
export class PersonneService {

constructor() { }
}

12-13 Avril 2018 5 / 14

 Déclarer un service

Pour les versions d’Angular inférieures à la version 6, il faut déclarer le service dans la
section providers dans app.module.ts

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

import { NgModule } from ’@angular/core’;
import { FormsModule } from ’@angular/forms’;
// + les imports précédents
import { PersonneService } from ’./services/personne.service’;

@NgModule({
declarations: [
AppComponent,
AdresseComponent,
PersonneComponent,
FormulaireComponent
],
imports: [
BrowserModule,
FormsModule,
],
providers: [PersonneService],
bootstrap: [AppComponent]
})
export class AppModule { }

12-13 Avril 2018 6 / 14

 Déclarer un service

Angular

Remarque

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

12-13 Avril 2018 7 / 14

 Utiliser un service

Angular

Commençons par créer une classe personne qui va nous servir

de modèle
ng generate class classes/personne

12-13 Avril 2018 8 / 14

 Utiliser un service

Angular

Commençons par créer une classe personne qui va nous servir

de modèle
ng generate class classes/personne

Mettons à jour le contenu de personne.ts

export class Personne {
constructor(private _nom?: string, private _prenom?: string
) { }
get nom(){ return this._nom; }
set nom(nom: string){ this._nom=nom; }
get prenom() { return this._prenom; }
set prenom(prenom: string) { this._prenom = prenom; }
}

12-13 Avril 2018 8 / 14

 Utiliser un service

Mettons à jour le contenu de personne.service.ts

import { Injectable } from ’@angular/core’;
import { Personne } from ’../classes/personne’;

@Injectable({
providedIn: ’root’
})
export class PersonneService {

personnes:Array<Personne> = new Array<Personne>();

constructor() { }
getAll(){
return this.personnes;
}

addPerson(p: Personne){
this.personnes.push(p);
}
}

Il faut aussi créer les méthodes qui permettent de modifier et supprimer de personnes.
12-13 Avril 2018 9 / 14
 Utiliser un service

Angular
Il faut injecter le service PersonneService dans le constructeur de
PersonneComponent pour pouvoir l’utiliser
import { Component, OnInit } from ’@angular/core’;
import { PersonneService } from ’../services/personne.
service’;

@Component({
selector: ’app-personne’,
templateUrl: ’./personne.component.html’,
styleUrls: [’./personne.component.css’]
})
export class PersonneComponent implements OnInit {

constructor(private personneService: PersonneService) {

}

ngOnInit() { }
}
12-13 Avril 2018 10 / 14
 Utiliser un service

Angular

Remarque

Maintenant on peut utiliser les méthodes définies dans le service

Il est à rappeler que le service et l’élément de notre application qui
va communiquer avec un serveur JSON ou un Web-Service (pour
persister ou récupérer des données)

12-13 Avril 2018 11 / 14

 Utiliser un service

Angular
Pour tester, on prépare la liste des personne dans personne.service.ts
import { Injectable } from ’@angular/core’;
import { Personne } from ’../classes/personne’;

@Injectable({
providedIn: ’root’
})
export class PersonneService {

personnes: Array <Personne> = new Array <Personne>();

constructor() {
this.personnes.push(new Personne ("wick","john"));
this.personnes.push(new Personne ("green","bob"));
}
getAll(){
return this.personnes;
}
addPerson(p: Personne){
this.personnes.push(p);
}
}

12-13 Avril 2018 12 / 14

 Utiliser un service

Angular
Dans personne.component.ts, on appelle la méthode getAll() du service
import { Component, OnInit } from ’@angular/core’;
import { Personne } from ’../classes/personne’;
import { PersonneService } from ’../services/personne.service’;

@Component({
selector: ’app-personne’,
templateUrl: ’./personne.component.html’,
styleUrls: [’./personne.component.css’]
})
export class PersonneComponent implements OnInit {

personnes: Array <Personne> = new Array <Personne>();

constructor(private personneService: PersonneService) {

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

12-13 Avril 2018 13 / 14

 Utiliser un service

Angular

Enfin, on affiche le résultat dans personne.component.html

<ul>
<li *ngFor="let elt of personnes">
{{ elt.nom }} {{ elt.prenom }}
</li>
</ul>

12-13 Avril 2018 14 / 14