Services
SECTION 4: UN 1 ER EXEMPLE
[Link] ([Link]@[Link]) 162
Service (1/2)
Un 1er exemple
Objectifs
• Augmenter la réutilisabilité du code en séparant la fonctionnalité des composants des autres types de traitement
• Généralement
• Composants se limite à l’affichage et à la gestion des événements utilisateurs dans la vue du composant.
• Services : exécutent les traitements en local ou en back
• A chaque événement, le composant fait appel à des fonctions dans les services.
• Les services interagissent avec le back end (via des requêtes HTTP).
• Les composants consomment les services (qui consomment d’autres services).
• L’utilisation d’un service se fait via le principe de l’injection des dépendances.
HTML Template @Service 1
< > { }
@Service 3
{ }
@Component @Service 2
{ } { }
[Link] ([Link]@[Link]) 163
Service (2/2)
Un 1er exemple
Une classe TypeScript décorée par @Injectable
pouvant avoir le rôle de l’intermédiaire avec la partie back-end
un moyen de communication entre composants
injectable dans les classes où on a besoin de l’utiliser pouvant utiliser un ou plusieurs autres
services
Quelques Services
ActivatedRoute
Router
FormBuilder
HttpClient
Pour créer un service
$ ng generate service nom-service
[Link] ([Link]@[Link]) 164
Exemple d’un service
Un 1er exemple
@Service 1 <<dépendance>> @Component
{ } { }
[Link] ([Link]@[Link]) 165
Injection des dépendances (1/2)
Un 1er exemple Injection de dépendance
une façon de fournir une nouvelle instance d'une classe avec les
@Component dépendances
La plupart des dépendances sont des services
{constructor (Service)}
[Link] ([Link]@[Link]) 166
Injection des dépendances (2/2)
Un 1er exemple
Trois types
• injection par constructeur: les dépendances sont fournies par le constructeur de la classe.
• injection par setter: le client offre un setter que l'injecteur utilise pour injecter la dépendance.
• injection par interface: la dépendance fournit une méthode d'injection qui injectera la dépendance
dans tout client qui lui sera transmis. Les clients doivent implémenter une interface qui fourni une
méthode qui accepte la dépendance.
[Link] ([Link]@[Link]) 167
Revenons à notre exemple
Un 1er exemple
$ ng g s services/about
[Link] ([Link]@[Link]) 168
Injection de dépendances d’Angular
Un 1er exemple
Lorsque Angular crée un composant, il demande d'abord à un injecteur les
services requis.
Un injecteur maintient un conteneur d'instances de service qu'il a créé
précédemment.
Si une instance de service demandée n'est pas dans le conteneur, l'injecteur en
fait une et l'ajoute au conteneur avant de renvoyer le service à Angular.
Lorsque tous les services demandés ont été résolus et retournés, Angular peut
appeler le constructeur du composant avec ces services comme arguments.
[Link] ([Link]@[Link]) 169
Enregistrement des services
Un 1er exemple
Pour utiliser un service, il faut préalablement enregistrer un fournisseur de ce service avec
l'injecteur.
Un fournisseur de service est une fabrique qui permet de gérer l’instanciation des
services enregistrée en modules ou en composants.
En général, les fournisseurs sont ajoutés au module racine afin que la même instance
d'un service soit disponible partout.
Il faut enregistrer le service (Version < 6)
[Link] ([Link]@[Link]) 170
Ajout d’une classe modèle: Comment
Un 1er exemple
1
3 4
• Créez un dossier nommé shared sous
le dossier src / app.
• À ce dossier, ajoutez un fichier nommé
[Link] avec le code suivant:
[Link] ([Link]@[Link]) 171
