Vous êtes sur la page 1sur 26

Angular : 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

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/personne.service.ts (130 bytes)

H & H: Research and Training 6 / 18


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() { }
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 personne.service.ts 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 personne.service.ts à 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 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({
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 app.module.ts

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 personne.service.ts

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 this.personnes;
r e f E
}
ch
©A
addPerson(p: Personne): void {
this.personnes.push(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/personne.component.html (23 bytes
)
ch
bytes) ©A
CREATE src/app/modules/cours/personne/personne.component.spec.ts (640

CREATE src/app/modules/cours/personne/personne.component.ts (283 bytes)


CREATE src/app/modules/cours/personne/personne.component.css (0 bytes)
UPDATE src/app/modules/cours/cours.module.ts (965 bytes)

H & H: Research and Training 12 / 18


Utiliser un service

Angular
Contenu de personne.component.html
import { Component, OnInit } from ’@angular/core’;

@Component({
selector: ’app-personne’,
H I ©
templateUrl: ’./personne.component.html’,
UEL
O
LM
styleUrls: [’./personne.component.css’]
})
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: [’./personne.component.css’] E
templateUrl: ’./personne.component.html’,
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 personne.service.ts
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
this.personnes.push({ nom: ’wick’, prenom: ’john’ });

©A
this.personnes.push({ nom: ’green’, prenom: ’bob’ });
}
getAll(): Array<Personne> {
return this.personnes;
}
addPerson(p: Personne): void {
this.personnes.push(p);
}
}

H & H: Research and Training 16 / 18


Utiliser un service

Angular
Dans personne.component.ts, on appelle la méthode getAll() du service

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


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

@Component({
H I ©
EL
selector: ’app-personne’,
templateUrl: ’./personne.component.html’,
styleUrls: [’./personne.component.css’]
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() {
this.personnes = this.personneService.getAll();
}
}

H & H: Research and Training 17 / 18


Utiliser un service

Angular

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


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

H & H: Research and Training 18 / 18

Vous aimerez peut-être aussi