Maintenant que vous avez eu votre première introduction à la programmation réactive, RxJS,
et l'utilisation du modèle d'observateur et
comment Angular exploite le modèle d'observateur et prend en charge la programmation réactive,
passons à notre tout premier exercice pour obtenir nos pieds
humide en utilisant les observables dans Angular.
Dans cet exercice, nous allons mettre à jour nos services pour utiliser les observables,
parce que lorsque nous passerons au module suivant où nous allons regarder le support HTTP dans Angular,
nous comprendrons immédiatement que le support HTTP dans Angular est basé autour des observables.
Donc, c'est une bonne idée pour nous de nous familiariser avec l'utilisation d'observables dans cette leçon elle-même.
Donc, nous allons mettre à jour les services pour exporter les observables.
Par la suite, dans nos composants,
nous nous abonnerons à ces observables et
obtiendra les données nécessaires au rendu des vues.
Passons à l'exercice suivant.
Vous devez vous demander,
comment utilisons-nous RxJS dans Angular,
et est-il déjà disponible pour nous ?
Donc, ce que vous remarquerez est qu'avec l'interface de ligne de commande Angular,
lorsque vous échafaudez votre application Angular,
RxJS y est automatiquement inclus.
Donc, si vous allez dans le fichier package.json,
vous remarquerez que dans les dépendances,
la bibliothèque RxJS est déjà incluse dans votre application.
Donc, tout ce que vous devez utiliser à partir de RxJS est déjà disponible pour vous.
Donc, nous pouvons aller de l'avant et utiliser la bibliothèque RxJS tout de suite dans notre application Angular.
Si vous construisez votre application Angular à partir de zéro,
alors vous devez faire explicitement une installation npm de RxJS.
En allant dans le fichier dish.service.js,
permettez-moi d'abord d'importer le of
de nos observables 'rxjs'.
Nous allons également importer - Maintenant,
lorsque vous utilisez RxJS dans votre application Angular,
toute la bibliothèque n'est pas incluse.
Vous ne pouvez importer que les pièces dont vous avez besoin à partir de la bibliothèque RxJS,
, puis l'utiliser dans votre application Angular.
Donc, lorsque votre application Angular est enfin préparée pour le déploiement,
seules les parties de RxJS qui sont requises seront
incluses dans votre application Angular.
L'opérateur de retard.
L'opérateur de retard nous permet de retarder l'émission de l'article de notre observable.
En entrant dans les méthodes,
nous allons maintenant mettre à jour ces méthodes pour utiliser des observables,
et nous allons retourner une promesse en convertissant le
observable en votre promesse en utilisant l'opérateur toPromise.
Donc, si vous avez déjà des composants qui utilisent des promesses,
et que vous voulez ne pas modifier les composants,
vous pouvez simplement convertir un observable à votre promesse et ensuite
envoyer la promesse à vos composants.
Comme nous l'avons réalisé, les promesses n'émettent qu'un seul élément,
alors que vous pouvez voir que les observables sont basés sur des flux.
Donc, c'est la limite que vous obtiendrez si vous
utilisez simplement l'opérateur deux promesses sur observables
et en faites usage parce que l'opérateur toPromise
permettra à votre observable d'émettre une seule valeur.
Mais pour le moment, faisons-le comme la première étape avant que
ne passe à la mise en œuvre complète observable de nos services.
Donc, en allant à la méthode getDats,
Je vais retourner ces plats.
Donc, je vais enlever cette partie et ensuite dire, retour de.
Si vous voulez émettre une seule valeur de votre observable,
vous utiliserez la méthode of,
et qui prendra la valeur que vous voulez émettre là-dedans.
Cela suffit pour notre demande actuelle en ce moment.
Donc, nous allons utiliser cela,
et aussi nous voulons retarder l'émission de la valeur de deux secondes.
Donc, je vais changer cette partie du code pour utiliser
l'opérateur de retard pour mon observable, en utilisant pipe.
J'ai besoin de convertir ceci àPromise et émettre la promesse.
Donc maintenant, ma méthode getDats est mise à jour pour utiliser un observable,
, puis le convertir en une promesse, puis envoyer la promesse à mon composant.
Donc, je n'ai pas besoin de faire de mises à jour du composant.
Utilisons la même approche pour mettre à jour les deux méthodes restantes de mon service ici.
Donc, je vais juste copier cette partie,
, puis mettre à jour cette partie,
puis prendre la partie de retard,
et ensuite mettre à jour cette partie pour utiliser le delay
et convertir cette méthode toPromise.
Donc, avec cela, ma méthode getDish est également mise à jour.
Laissez-moi faire la même chose à la méthode getFeaturedDish.
Encore une fois, si vous voulez,
vous pouvez taper le tout.
Je suis juste paresseux pour seulement couper et coller et changer les pièces qui
Je veux changer et convertir cette méthode toPromise.
C'est ça. Mon service est maintenant mis à jour pour retourner des promesses d'un observable ici.
Donc, avec cette mise à jour,
mon service de plat est mis à jour pour utiliser des observables plutôt que
en utilisant directement les valeurs.
De même, allez-y et mettez à jour le service leader et le service de promotion.
Vous remarquerez maintenant que j'ai déjà mis à jour
le service leader pour utiliser les observables.
De même, j'ai également mis à jour le service de promotion pour utiliser les observables.
Sauvegardez les changements et allons-y jeter un oeil à notre application.
Lorsque vous allez sur le navigateur,
vous remarquerez que votre application fonctionne exactement de la même manière qu'avant
et récupère les données des services comme avant.
Pas beaucoup de changement dans votre application en tant que telle.
Il effectue exactement la même chose.
Donc, remarquez qu'en substituant vos promesses par des observables,
il n'y a pas eu beaucoup de changement dans votre application comme vous l'attendez.
Maintenant, allons un peu plus loin.
Nous allons maintenant laisser nos services retourner observables,
et nous allons mettre à jour les composants pour utiliser les observables.
La raison comme je l'ai mentionné,
est parce que lorsque nous mettons à jour nos services pour utiliser
le service HTTP pour aller sur un serveur pour récupérer les données,
alors nous notons que dans Angular les méthodes HTTP retourneront observables.
Les services peuvent simplement transmettre les observables à nos composants et laisser
les composants s'abonner à ces observables et utiliser
des données qu'ils obtiennent ainsi.
Donc, ce serait une étape intermédiaire pour nous d'arriver à ce stade.
Nous allons regarder HTTP dans le prochain module.
En revenant à nos services,
vous pouvez maintenant supprimer le toPromise d'abord en supprimant
l'opérateur toPromise parce que nous n'en avons plus besoin
et ensuite nous allons simplement supprimer le toPromise de ce,
import observable et ensuite laisser
notre méthode retourner
observables au lieu de promesses.
Donc, comme je l'ai mentionné,
tout ce qu'une promesse peut faire un observable peut aussi faire.
Donc, mettons à jour tous ces éléments pour retourner des observables.
Faites de même pour les deux services restants.
Vous remarquerez maintenant que j'ai également mis à jour le service leader
pour simplement retourner observables au lieu de promesses,
et aussi le service de promotion a été mis à jour en conséquence
pour retourner observable au lieu de promesses.
Maintenant, cela signifie que nous devons aller mettre à jour nos composants
pour utiliser des observables plutôt que des promesses comme nous l'avons fait plus tôt.
Maintenant pour la promesse, nous avons vu que nous devons utiliser le .then
pour obtenir le résultat lorsque la résolution de la promesse est exécutée.
Avec un observable, le .then est converti en .subscribe.
La façon dont vous consommez les données restera exactement la même.
Donc, avec ce changement mineur dans vos composants,
les composants seront maintenant en mesure de gérer les observables plutôt que les promesses.
Donc, en allant aux quatre composants qui utilisent les services,
d'abord, passons au fichier menu.component.ts.
Dans le fichier menu.component.ts,
vous remarqueriez immédiatement la ligne rouge squiggly là,
sous le alors évidemment parce que nous ne retournons pas une promesse.
Au lieu de cela, nous retournons un observable.
Alors convertissez-le ensuite pour vous abonner et c'est tout.
Votre composant de menu est maintenant capable de
consommer les valeurs observables qui sont émises par l'observable.
Faites la même modification au fichier about.component.ts,
au fichier dishdetail.component.ts et au fichier home.component.ts.
Après avoir mis à jour les fichiers de composant restants Tapscott,
allons voir le comportement de notre application dans le navigateur.
Allez dans le navigateur, vous ne remarquerez aucune différence dans le comportement de notre application.
Cette version de notre application Angular est mise à jour pour utiliser
observables au lieu des promesses.
Donc, le composant home ici,
sur le composant fonctionne exactement de la même manière qu'avant,
et le composant de menu fait exactement la même chose.
Aussi le composant de détail du plat se comportera exactement de la même manière qu'avant.
Avec cela, nous terminons cet exercice.
Dans cet exercice, nous avons fait nos premiers pas vers l'utilisation des observables
dans notre application Angular en mettant à jour
les services et, en conséquence, les composants à
utilisent des observables à la place des promesses.
C'est le bon moment pour vous de faire un commit git avec le message RxJS première partie.