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
[Link]@[Link]
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
[Link]
[Link]
12-13 Avril 2018 4 / 14
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() { }
}
12-13 Avril 2018 5 / 14
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() { }
}
Le contenu de [Link] à 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 [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({
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 [Link]
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 [Link]
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 [Link]
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 [Link];
}
addPerson(p: Personne){
[Link](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: ’./[Link]’,
styleUrls: [’./[Link]’]
})
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 [Link]
import { Injectable } from ’@angular/core’;
import { Personne } from ’../classes/personne’;
@Injectable({
providedIn: ’root’
})
export class PersonneService {
personnes: Array <Personne> = new Array <Personne>();
constructor() {
[Link](new Personne ("wick","john"));
[Link](new Personne ("green","bob"));
}
getAll(){
return [Link];
}
addPerson(p: Personne){
[Link](p);
}
}
12-13 Avril 2018 12 / 14
Utiliser un service
Angular
Dans [Link], on appelle la méthode getAll() du service
import { Component, OnInit } from ’@angular/core’;
import { Personne } from ’../classes/personne’;
import { PersonneService } from ’../services/[Link]’;
@Component({
selector: ’app-personne’,
templateUrl: ’./[Link]’,
styleUrls: [’./[Link]’]
})
export class PersonneComponent implements OnInit {
personnes: Array <Personne> = new Array <Personne>();
constructor(private personneService: PersonneService) {
[Link] = [Link]();
}
ngOnInit() { }
}
12-13 Avril 2018 13 / 14
Utiliser un service
Angular
Enfin, on affiche le résultat dans [Link]
<ul>
<li *ngFor="let elt of personnes">
{{ [Link] }} {{ [Link] }}
</li>
</ul>
12-13 Avril 2018 14 / 14