Les Services avec Angular
Plan
Service : définition, intérêt, création et squelette
Injection de dépendances
Providers
Portée de service
Service HttpClient et ses méthodes
Les Observables
Service HttpClient - Exemple
2
Service - Définition
• Un service est une ressource réutilisable et
partagée entre plusieurs éléments.
• Il s’agit généralement d’une classe ayant un
objectif étroit et bien défini.
• Il offre des propriétés et des fonctionnalités
dont l’application a besoin.
3
Service - intérêts
• Les services sont un excellent moyen de partager des
informations entre des classes qui ne se connaissent pas et
par la suite, permettent de réduire le couplage entre
composants ou classes.
• Assurer la modularité et la réutilisabilité
• Un composant se concentre principalement sur la
présentation des données et délègue l’accès aux données à
aux services.
4
Service - création
• Nous pouvons écrire manuellement la classe du service
tout en respectant la charte associée.
• Angular CLI permet de générer un service à l’aide de la
commande ng generate service nomservice
• Si un service est à créer dans un répertoire bien déterminé,
il faut alors préciser le nom du répertoire au niveau la
commande ng generate service rep\nomservice
5
Service - Squelette
6
Service - Squelette
• @Injectable(): décorateur qui permet de fournir les
métadonnées permettant à Angular d'injecter le service
dans un composant en tant que dépendance.
• providedIn: 'root' : fournir le service au niveau racine. Ce
provider est généré par défaut en créant un service avec
l’outil CLI. Angular crée une instance unique et partagée de
ce service et l'injecte dans toute classe qui le demande.
• UserService : nom du service
7
Injection de dépendances
• C’est un design pattern qui consiste à séparer
l’instanciation d’une dépendance et son utilisation.
• L’injector du système d’injection de dépendance
permet de créer ou réutiliser une dépendance.
=> L’injector crée la dépendance demandée par un
élément de l’application.
8
Providers
• L’injector a besoin d’un fournisseur de service pour savoir comment
créer ce service. Le fournisseur de service s’appelle un provider
• Vous devez alors définir le provider pour que l’injector peut créer le
service.
• Le provider est la classe du service elle même.
• Le provider peut être défini dans :
Le service: @Injectable({providedIn: ‘xxxxxxxx’})
Le module : @NgModule({providers:[‘xxxxService’]})
Le composant : @Component({providers:[‘xxxxService’] })
9
Portée du service (Scope)
provider description
@Injectable({ providedIn: L’injector crée une instance unique et partagée de ce
'root' }) service et l'injecte dans toute classe qui le demande.
@Injectable({ providedIn: La même instance d'un service est disponible pour tous les
'nomModule' }) composants de ce module.
Ou bien
@NgModule({ providers: [
BackendService, Logger ],
... })
@Component({ Vous obtenez une nouvelle instance du service avec
selector: 'app-S', chaque nouvelle instance de ce composant.
templateUrl:'./[Link]
[Link]',
providers: [ xService ] })
10
Injecter un service
• Un service est injecté au niveau de la classe qu’elle va
l’utiliser. Cette classe peut être un service ou un
composant.
• Le code suivant permet d’injecter un service appelé
DataService au niveau du composant AppComponent. Il
s’agit de le définir comme argument du constructeur de la
classe. export class AppComponent {
constructor(private dataService:DataService) { }
}
11
Exemple d’utilisation
• Soit un service appelé LogService
export class LogService {
log(msg: any) { [Link](msg); }
error(msg: any) { [Link](msg); }
warn(msg: any) { [Link](msg); }
}
• Ce service offre trois méthodes : log(msg), error(msg) et
warn(msg). Ces méthodes sont souvent utilisées par divers
classes.
12
Exemple d’utilisation
• Injecter ce service au niveau du (composant ou service ou
classe) qui a besoin
constructor(private lservice:LogService){}
• Utiliser l’une ou les méthodes de ce service en fonction du
besoin.
log(){
[Link]("finish");
}
13
Service HttpClient
• La plupart des applications front-end communiquent avec des
services principaux via le protocole HTTP.
• Angular propose un service appelé HttpClient qui offre un
ensemble de fonctions à utiliser pour récupérer ou envoyer
des données
• Pour l’utiliser il faut importer le module HttpClientModule
dans AppModule et importer le service HttpClient au niveau
de la classe dans laquelle a été injecté. Les deux à importer à
partir du package @angular/common/http
14
Service HttpClient
Méthodes
GET
La méthode qui permet de demander une ressource.
HEAD
Cette méthode ne demande que des informations sur la ressource,
sans demander la ressource elle-même.
POST
Cette méthode permet d'ajouter une ressource sur le serveur.
OPTIONS
Cette méthode permet d'obtenir les options de communication
d'une ressource ou du serveur en général.
PUT
Cette méthode doit être utilisée lorsqu'une requête modifie la
ressource.
DELETE
Cette méthode permet de supprimer une ressource du serveur.
15
Les observables
• Les observables représentent un nouveau standard pour la
gestion des données asynchrones.
• Ils ne sont pas une caractéristique spécifique à Angular.
• Angular utilise largement les observables dans le système
d’événements et le service HTTP.
• Angular entrain d’utiliser les observables de la bibliothèque
RxJS (bibliothèque Reactive X pour le langage JavaScript)
16
Les observables
• Les observables sont des collections paresseuses de valeurs
multiples dans le temps.
• Les observables sont des collections paresseuses c’est à dire les
collections ne sont envoyés que pour les inscrits.
• Les observables sont des collections de valeurs multiples dans
le temps c’est-à-dire l’observable peut envoyers plusieurs
valeurs au fil des temps d’une façon asynchrone.
• Les observables sont annulables (unsubscribe())
17
Les observables
inscription
• L’inscription à un observable peut se faire avec:
Les pipes asynchrones
La fonction subscribe
• Une fois l’inscription à un observable est établie, ce dernier
émet les collections.
• Un traitement doit être fait une fois les collections sont émises.
Ce traitement est à définir à l’aide de la fonction subscribe ou
la pipe.
18
Les observables
La fonction subscribe()
• La fonction subscribe() permet de s’inscrire à un observable
pour récupérer les collections.
• Elle possède trois arguments (résultat=> quoi faire avec,
erreur=> quoi faire, terminé=>notifier())
[Link](
x => [Link]('Observer got a next value: ' + x),
err => [Link]('Observer got an error: ' + err),
() => [Link]('Observer got a complete notification')
);
19
Service HttpClient-Exemple
Exemple d’utilisation de la méthode GET du service HttpClient:
1-Injecter le service HttpClient au niveau du service:
constructor(private http:HttpClient) {}
2- Définir la méthode qui appelle la méthode get()
getFilmList():Observable<film[]>{
return [Link]<film[]>([Link]);
}
20
Service HttpClient-Exemple
3- Injecter le service FilmsService au niveau du composant:
constructor(private service:FilmsService) {}
4- Appeler la méthode getFilmList() et récupérer la liste des films
getFilms() {
[Link]().subscribe(
(data:film[])=>{[Link] = data});
}
21
Néthographie
• [Link]
• [Link]
22
