Angular : service

Achref El Mouelhi

Docteur de l’université d’Aix-Marseille

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

[Link]@[Link]

H & H: Research and Training 1 / 18

 Plan

1 Définition

2 Créer un service

3 Déclarer un service

4 Utiliser un service

H & H: Research and Training 2 / 18

 Définition

Angular

Service
classe TypeScript décorée par @Injectable

H I ©
singleton
U EL
O
LM
pouvant avoir le rôle de

e f E
l’intermédiaire avec la partie back-end
r
A chcommunication entre composants
un moyen de
©
injectable dans les classes où on a besoin de l’utiliser
pouvant utiliser un ou plusieurs autres services

H & H: Research and Training 3 / 18

 Définition

Angular
Quelques services Angular utilisés dans les chapitres précédents

ActivatedRoute

Router

FormBuilder
H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 4 / 18

 Définition

Angular
Quelques services Angular utilisés dans les chapitres précédents

ActivatedRoute

Router

FormBuilder
H I ©
U EL
O
f E LM
Autres services Angular

ch r e
©A
HttpClient

...

H & H: Research and Training 4 / 18

 Définition

Angular
Quelques services Angular utilisés dans les chapitres précédents

ActivatedRoute

Router

FormBuilder
H I ©
U EL
O
f E LM
Autres services Angular

ch r e
©A
HttpClient

...

Il est possible de créer nos services personnalisés.

H & H: Research and Training 4 / 18

 Créer un service

Angular

Pour créer un service

ng generate service service-name

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

H & H: Research and Training 5 / 18

 Créer un service

Angular

Pour créer un service

ng generate service service-name

H I ©
UEL
O
LM
Ou aussi
ng g s service-name
r e f E
ch
©A

H & H: Research and Training 5 / 18

 Créer un service

Angular

Pour créer un service

ng generate service service-name

H I ©
UEL
O
LM
Ou aussi
ng g s service-name
r e f E
ch
©A
Pour créer un service dans un répertoire services
ng g s services/service-name

H & H: Research and Training 5 / 18

 Créer un service

Angular

Pour créer un service sans générer le fichier de test

ng g s services/service-name --skip-tests=true

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

H & H: Research and Training 6 / 18

 Créer un service

Angular

Pour créer un service sans générer le fichier de test

ng g s services/service-name --skip-tests=true

H I ©
UEL
O
Exemple
f E LM
ch r e
ng g s services/personne --skip-tests=true

©A

H & H: Research and Training 6 / 18

 Créer un service

Angular

Pour créer un service sans générer le fichier de test

ng g s services/service-name --skip-tests=true

H I ©
UEL
O
Exemple
f E LM
ch r e
ng g s services/personne --skip-tests=true

©A
Constat
CREATE src/app/services/[Link] (130 bytes)

H & H: Research and Training 6 / 18

 Créer un service

Angular
Le contenu de [Link] jusqu’à la version 5 d’Angular
import { Injectable } from ’@angular/core’;

@Injectable()
export class PersonneService {

constructor() { }
H I ©
}
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 7 / 18

 Créer un service

Angular
Le contenu de [Link] jusqu’à la version 5 d’Angular
import { Injectable } from ’@angular/core’;

@Injectable()
export class PersonneService {

constructor() { }
H I ©
}
UEL
O
f E LM
r e
Le contenu de [Link] à partir de la version 6 d’Angular

ch
©A
import { Injectable } from ’@angular/core’;

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

constructor() { }
}

H & H: Research and Training 7 / 18

 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 [Link]

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/[Link]’;

@NgModule({
H I ©
declarations: [
U EL
AppComponent,
O
LM
AdresseComponent,
PersonneComponent,
FormulaireComponent
r e f E
],
ch
imports: [
BrowserModule,
FormsModule,
©A
],
providers: [PersonneService],
bootstrap: [AppComponent]
})
export class AppModule { }

H & H: Research and Training 8 / 18

 Déclarer un service

Angular

Remarque
H I ©
UEL
Depuis la version 6 d’Angular, on n’a plus besoin de déclarer les
O
f E LM
services dans la section providers dans [Link]

ch r e
L’expression providedIn: ’root’ vaut déclaration
©A

H & H: Research and Training 9 / 18

 Utiliser un service

Angular

Considérons l’interface Personne suivante

H I ©
export interface Personne {
UEL
id?: number;
O
nom?: string;
f E LM
prenom?: string;
ch r e
©A
}

H & H: Research and Training 10 / 18

 Utiliser un service

Mettons à jour le contenu de [Link]

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

import { Personne } from ’../interfaces/personne’;

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

H I ©
personnes: Array<Personne> = new Array<Personne>();
U EL
O
LM
constructor() { }
getAll(): Array<Personne> {
return [Link];
r e f E
}
ch
©A
addPerson(p: Personne): void {
[Link](p);
}
}

Il faut aussi créer les méthodes qui permettent de modifier et supprimer de personnes.

H & H: Research and Training 11 / 18

 Utiliser un service

Angular

Pour la suite, créons un composant personne dans composants

ng g c modules/cours/personne
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 12 / 18

 Utiliser un service

Angular

Pour la suite, créons un composant personne dans composants

ng g c modules/cours/personne
H I ©
UEL
O
Résultat
f E LM
r e
CREATE src/app/modules/cours/personne/[Link] (23 bytes
)
ch
bytes) ©A
CREATE src/app/modules/cours/personne/[Link] (640

CREATE src/app/modules/cours/personne/[Link] (283 bytes)

CREATE src/app/modules/cours/personne/[Link] (0 bytes)
UPDATE src/app/modules/cours/[Link] (965 bytes)

H & H: Research and Training 12 / 18

 Utiliser un service

Angular
Contenu de [Link]
import { Component, OnInit } from ’@angular/core’;

@Component({
selector: ’app-personne’,
H I ©
templateUrl: ’./[Link]’,
UEL
O
LM
styleUrls: [’./[Link]’]
})
r e f E
ch
export class PersonneComponent implements OnInit {

©A
constructor() { }

ngOnInit() { }

H & H: Research and Training 13 / 18

 Utiliser un service

Angular
Injectons PersonneService dans le constructeur de PersonneComponent
pour pouvoir l’utiliser

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

import { PersonneService } from ’../../services/personne.
service’;
H I ©
@Component({
UEL
O
LM
selector: ’app-personne’,

r e
styleUrls: [’./[Link]’] E
templateUrl: ’./[Link]’,
f
ch
©A
})
export class PersonneComponent implements OnInit {

constructor(private personneService: PersonneService) { }

ngOnInit() { }
}

H & H: Research and Training 14 / 18

 Utiliser un service

Angular

Remarque
H I ©
Maintenant on peut utiliser les méthodes dE
U L dans le service
éfinies
etM
O
f E L
Il est à rappeler que le service l’élément de notre application qui
va communiquer avec
h r e un serveur JSON ou un Web-Service (pour
c érer des données)
©A
persister ou récup

H & H: Research and Training 15 / 18

 Utiliser un service

Angular
Pour tester, on prépare la liste des personne dans [Link]
import { Injectable } from ’@angular/core’;
import { Personne } from ’../interfaces/personne’;

@Injectable({

})
providedIn: ’root’

H I ©
export class PersonneService {
UEL
O
LM
personnes: Array <Personne> = new Array <Personne>();

constructor() {
r e f E
ch
[Link]({ nom: ’wick’, prenom: ’john’ });

©A
[Link]({ nom: ’green’, prenom: ’bob’ });
}
getAll(): Array<Personne> {
return [Link];
}
addPerson(p: Personne): void {
[Link](p);
}
}

H & H: Research and Training 16 / 18

 Utiliser un service

Angular
Dans [Link], on appelle la méthode getAll() du service

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

import { PersonneService } from ’../../services/[Link]’;
import { Personne } from ’../../interfaces/personne’;

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

f E LM
export class PersonneComponent implements OnInit {

ch r e
©A
personnes: Array <Personne> = new Array <Personne>();

constructor(private personneService: PersonneService) { }

ngOnInit() {
[Link] = [Link]();
}
}

H & H: Research and Training 17 / 18

 Utiliser un service

Angular

Enfin, on affiche le résultat dans [Link]

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

H & H: Research and Training 18 / 18