[MUSIC]
Maintenant que nous avons eu une introduction rapide aux frameworks MVM et
MVVM, aux services angulaires, ainsi qu'à l'injection de dépendance,
passons maintenant à notre prochain exercice où nous allons créer notre premier service angulaire et ensuite l'injecter dans notre composant et
en faire usage dans notre
composant.
Pour commencer, accédez à votre application dans
le pad éditeur dans le dossier App,
créez un nouveau sous-dossier et nommez-le en tant que Services.
Maintenant, nous allons utiliser Angular CLI pour ajouter un nouveau service à notre application Angular.
Pour ce faire, à l'invite, tapez ng
générer le service, et services/plat.
Ainsi, cela créera un nouveau service dans le dossier Services nommé service de vaisselle.
Donc, une fois que cela est créé, vous voyez que deux fichiers sont créés
par l'interface de ligne de commande angulaire appelée DishService.ts et dish.service.specter.ts.
Celui-ci est utilisé pour tester notre service Angular pendant que nous en parlerons plus tard.
Le second est où nous allons créer notre service de vaisselle et
puis injecter cela dans notre module d'application et en faire usage dans notre composant de menu.
En allant à l'éditeur, ouvrons le fichier dish.service.ts.
Maintenant, lorsque vous ouvrez ce fichier, vous remarquez immédiatement ici la toute première déclaration
qui dit, importez {Injectable} à partir de '@angular /core'.
Donc, cet injectable nous permet de définir ce décorateur
injectable à n'importe quelle classe que nous avons définie ici.
Donc, vous pouvez voir que nous définissons une classe ici appelée DishService.
En utilisant ce décorateur injectable à ce service de vaisselle,
, nous rendons cet objet maintenant injectable dans notre application.
C'est donc ce qui permet d'utiliser l'injection de dépendance dans notre application
.
Donc, une fois que vous avez déclaré la classe comme injectable,
, nous allons maintenant configurer notre DishService pour nous fournir quelques informations.
Donc ici, je vais importer,
La classe Dish du dossier partagé,
et aussi importer,
La constante DISS de,
Dossier partagé ici.
Donc, une fois que j'ai importé ces deux,
maintenant mon service peut être configuré pour nous fournir la valeur.
Donc, à l'intérieur du service, je vais ajouter
dans un nouvel appel de méthode getDays, et
cette méthode retournera dans un tableau de plats ici.
Et, donc cette méthode retournera la constante DISS
que nous avons importée dans notre DishService.
Avec cela, notre DishService est maintenant configuré pour
fournir ce tableau d'objets JavaScript DISS à n'importe quelle
autre partie de notre application qui en a besoin.
Maintenant, avant que cela ne se produise, nous devons prendre ce service et
puis injecter dans notre application.
Pour ce faire, nous allons ouvrir le fichier .ts du module d'application.
Donc, à l'intérieur du fichier .ts du module d'application, juste après avoir importé
les composants juste là, je vais importer le,
DishService juste là.
Et ceci est importé à partir de,
Services DishService ici.
Donc, une fois que nous importons cela, alors nous déclarerons ce DishService en tant que fournisseur.
Donc, si vous allez dans le décorateur de module ng, donc
vous voyez cette troisième propriété ici appelée fournisseurs.
Nous avons donc des déclarations, des importations et des fournisseurs.
Donc, chaque fois que vous avez un service que vous voulez rendre disponible pour
tous les composants d'une partie de ce module.
Ensuite, vous allez spécifier cela en tant que fournisseur dans le module ici.
Donc juste là, je vais dire, DishService, ici.
Donc, avec cela, mon DishService devient maintenant disponible pour le reste de l'application.
Maintenant, comment cela se produit-il ?
La dépendance injectable Angular regarde cette information que nous avons déclarée ici, puis décide qu'elle a besoin de créer un DishService et
l'injecte partout où elle est nécessaire.
Maintenant, comment utilisons-nous ce service ?
Nous voyons que dans le composant de menu, nous obtenions plus tôt
la constante de la vaisselle directe en important à partir du fichier de vaisselle partagé ici.
Maintenant, ce n'est pas le moyen idéal d'obtenir l'information,
au lieu de lier l'information directement dans votre composant,
vous devriez plutôt laisser un service récupérer cette information pour vous.
Plus tard, nous pouvons reconcevoir notre service pour pouvoir aller chercher les mêmes informations à partir d'un serveur back-end si vous le souhaitez.
En effet, c'est ce que nous ferons dans certains exercices ultérieurs.
Donc, vous allez déléguer la responsabilité de récupérer les informations au service
et ensuite vous ferez simplement usage du service dans ce composant de menu.
Donc, nous allons supprimer ce composant vaisselle à partir de là et
à la place, nous allons importer ce DishService ici.
Et ce DishService est importé à partir du fichier
services/dish.service ici.
Donc, après avoir ajouté cela maintenant, nous avons fait une partie du travail.
Maintenant, nous devons rendre ce service disponible pour que notre composant puisse l'utiliser.
C'est donc là que nous allons descendre à ce constructeur ici.
Dans ce constructeur, donc
maintenant vous voyez l'utilisation du constructeur dans notre classe ici.
Donc, dans ce constructeur, nous verrons
DishService privé et DishService ici.
Donc c'est du type DishService, donc
lorsque vous déclarez cela dans le constructeur, lorsque ce composant est créé,
puis ce DishService que vous avez injecté dans le module d'application.
Lorsque vous injectez cela dans le module d'application,
, il créera un seul objet DishService.
Et cet objet DishService sera mis à votre disposition dans votre composant de menu
ici.
Alors maintenant, vous pouvez alors faire appel aux méthodes que ce DishService fournit pour vous
afin de faire le travail en votre nom.
Donc une fois que vous avez mis ça là-dedans,
maintenant nous nous rendons compte que nous n'avons plus cette constante de vaisselle ici.
J'ai donc besoin d'aller chercher cette information.
Maintenant, c'est là que je vais tirer parti du service que j'ai à ma disposition pour
chercher l'information pour nous.
Où allons-nous chercher ces informations ?
Donc, c'est là que nous allons prendre l'aide de cette méthode du cycle de vie appelée
NGOnInit.
Donc, lorsque vous déclarez cette méthode de cycle de vie appelée NGOnInit dans votre application
, de sorte que vous voyez que dans la classe, vous dites implémente l'OnInit.
Donc, l'implémentation de cette OnInit vous oblige à
implémenter cette méthode NGOnInit dans le cadre de votre classe ici.
Donc, à l'intérieur de cette méthode NGOnInit,
, vous pouvez maintenant demander au service de récupérer ces informations.
Pourquoi est-ce ainsi ?
Cette méthode de cycle de vie sera exécutée
par le framework Angular chaque fois que ce composant est instancié.
Donc, chaque fois que ce composant est créé, cette méthode va être exécutée.
Donc, quand cette méthode est exécutée, alors à ce moment-là, je peux aller chercher la vaisselle du DishService.
Donc, je peux dire DishService, et
alors vous saurez que vous avez la méthode getDishService dans le DishService.
Vous pouvez invoquer la méthode pour récupérer les plats pour vous.
Maintenant, quand nous faisons cela, alors l'objet vaisselle sera fourni par
le service pour nous via cette méthode GetDats.
Et qui peut être mis dans nos plats variable locale que nous avons définie ici.
Donc, avec cela, nous terminons la mise à jour
de tous nos fichiers d'application.
Allons jeter un coup d'œil à l'application angulaire résultante.
En passant au navigateur, vous pouvez maintenant voir que dans le navigateur l'application Angular
s'affiche comme avant.
Dans cette version comme vous l'avez vu, les informations sur les plats
vont être récupérées dans votre composant en utilisant le service.
Le service à son tour va chercher cette information pour vous.
Maintenant, en ce moment, nous gardons le service très basique.
Le service renvoie simplement cette valeur constante que nous avons définie ici.
Plus tard, vous pouvez imaginer que vous étendriez le service pour aller et
récupérer ces informations depuis le serveur back-end.
Quand cela se produit,
la récupération d'informations ne sera plus instantanée.
C'est là que nous aurions besoin de l'aide des promesses et
aussi de l'approche JavaScript réactive pour soutenir ce retard et
traiter le retard dans la récupération des informations dans notre application.
Nous en parlerons plus en détail dans le prochain module.
Pour l'instant, notre application fonctionnera très bien, de sorte que vous pouvez sélectionner n'importe lequel de
ces plats et les informations seront affichées comme avant.
Avec cela, nous faisons concurrence à cet exercice où nous apprenons les bases des services Angular.
Et nous avons également vu comment utiliser le service Angular,
dans notre composant applications.
C'est le bon moment pour vous de faire un commit git avec les services de base du message.
[MUSIQUE].