Dans l'exercice précédent,
nous avons mis à jour nos services d'applications Angular pour utiliser des promesses,
et aussi mettre à jour les composants pour
traiter les promesses qui sont retournées par les services.
Dans cet exercice, qui est une extension de l'exercice précédent,
, nous allons simuler un délai pour la résolution de la promesse.
Dans l'exercice précédent,
les promesses se sont résolues immédiatement.
Mais dans la vraie vie,
quand vous demandez des données à un service et que le service offre une promesse,
le service, à son tour,
doit aller chercher les données à partir d'un serveur back-end,
et cela prendra du temps.
Donc, pour la promesse de résoudre,
il y aura un certain délai.
Maintenant, comment pouvons-nous faire face à ce retard de temps du côté des composants ?
Comment tenir l'utilisateur informé du fait qu'il y a
un délai avant que les données puissent être récupérées et affichées à l'utilisateur ?
Comment faire face au retard lui-même ?
Maintenant, dans cet exercice,
, je vais simuler le délai de temps en utilisant une méthode JavaScript dans mes services,
et ensuite mettre à jour les composants pour être en mesure d'afficher un message à l'utilisateur en utilisant
le composant spinner de progression de matériau angulaire pour afficher un disque de rotation dans
le modèle pour tenir l'utilisateur informé de
du fait que les données sont extraites du serveur,
et nous rendrons dans la vue dès que les données deviennent
disponibles pour le composant lorsque la promesse sera résolue.
Voyons comment nous pouvons le faire dans cet exercice.
Encore une fois, pour revenir à mon service,
ici, j'ai le service de vaisselle ouvert ici.
Au lieu d'avoir la promesse résolue immédiatement,
, nous allons maintenant donner une promesse et ensuite laisser
la promesse se résoudre après un court laps de temps.
Donc, pour ce faire, cette résolution de promesse ne fonctionnera plus
comme indiqué ici donc je vais supprimer cela.
Au lieu de cela, lorsque ma méthode est appelée,
la méthode retournera une promesse en créant une nouvelle promesse.
Vous vous rappelez que lorsque vous avez créé la nouvelle promesse,
à l'intérieur de la promesse, vous auriez la fonction
avec résolution et rejet comme les deux paramètres.
Maintenant, je ne vais utiliser que la partie résolue de celui-ci.
Donc, je vais implémenter la fonction dans la promesse juste en utilisant une fonction flèche ici.
Donc, je dirai résoudre,
et je simulerai un court délai pour que cette résolution ait lieu.
Laissez-moi écrire un commentaire.
Simuler la latence du serveur avec un délai de deux secondes.
Alors, comment simuler cela ?
Donc, nous utilisons la méthode setTimeout
qui est disponible en JavaScript.
Donc, pour la méthode setTimeout,
encore une fois, je vais implémenter une fonction de flèche,
la méthode setTimeout n'a pas de paramètres dont nous avons besoin là-bas.
Donc, quand ce setTimeout s'exécute,
alors il résoudra la livraison des plats.
Alors, laissez-moi couper ces plats et ensuite les coller dans les plats.
Donc, vous voyez que ce résultat retourne maintenant le résultat ici,
et ce résultat sera retourné après deux secondes de retard ici.
Avec cette mise à jour, notre promesse sera résolue au bout de deux secondes.
Donc, la méthode setTimeout disponible en JavaScript simule un court délai.
Donc, comme vous pouvez le voir,
il simule le court délai et prend un rappel ici.
Ce rappel comme vous pouvez le voir,
Je l'ai implémenté comme une fonction de flèche ici.
Donc, pas de paramètres et puis quand cela se résout,
il va résoudre le retour des plats et le délai pour cela est de deux secondes.
Donc, cette partie est la fonction,
et c'est le délai que nous avons ici.
Donc, maintenant, ma promesse va se résoudre après un retard de deux secondes.
De même, mettons à jour les deux méthodes restantes ici.
Donc, pour ce faire,
Je vais juste copier
cette partie et ensuite simplement coller ça là-dedans,
et vous remarquerez que cette
volonté et je dois dire 2000.
Donc, cela complète la méthode setTimeout là.
Maintenant, nous aurons
la parenthèse de clôture suivie.
De même, permettez-moi de mettre à jour la dernière méthode aussi.
Donc, vous voyez qu'il résout les plats,
et puis après deux secondes de retard,
et fermez la méthode à là.
C'est ça. Donc, maintenant mon service de plat est
mis à jour pour résoudre toutes les promesses après deux secondes de retard.
Maintenant, de même, mettez à jour le service leader et
le service de promotion en utilisant le même modèle que je vous ai montré ici.
La deuxième partie de la question est de tenir l'utilisateur informé de
du fait qu'il y a un retard dans l'obtention des résultats,
et donc la vue sera mise à jour dès que les résultats seront obtenus.
Vous avez vu ce genre de comportement dans de nombreuses applications,
y compris les applications mobiles où vous auriez un spinner affiché à l'écran pour garder
l'utilisateur informé du fait que quelque chose est chargé de derrière
les coulisses et lorsque les résultats deviennent disponibles,
la vue sera mis à jour.
Donc, nous allons utiliser une approche similaire dans nos composants.
Pour nous aider avec cela,
, nous allons utiliser le composant spinner de progression de Angular Material.
Donc, pour utiliser le composant de spinner de progression,
allons d'abord dans le fichier app
module.ts, puis importez le module de spinner de progression là-dedans.
Donc, aller à app module.ts.
Nous allons d'abord monter ici pour importer
le MatProgressSpinnerModule de angulaire/material/progress-spinner.
Une fois que nous avons importé ceci dans le fichier,
alors nous irons dans le décorateur du module ng dans les importations,
et ensuite ajouter le MatProgressSpinnerModule dans cela.
Une fois que nous avons terminé cela,
alors nous pouvons mettre à jour les composants pour utiliser le spinner de progression.
Donc ici, je vais vous montrer un exemple de
illustrant comment nous pouvons mettre à jour le composant de menu pour montrer cette information.
Alors, allez dans le fichier de mise en page des composants du menu.
Ici, nous voyons que nous montrons le menu en utilisant la liste de grille ici.
Donc, ce que nous allons faire est, pour ce div,
, je vais utiliser la directive NGiF et dire que cela devrait être affiché.
Le menu ne doit être affiché que lorsque la vaisselle n'est pas nulle.
Donc, d'abord, dans votre fichier de script d'onglet composants,
, vous verrez que lorsque vous allez dans le fichier de script d'onglet composants, vous verrez que
vos plats n'est actuellement qu'un objet indéfini ici,
et que les plats ne seront affectés à la valeur de la vaisselle que lorsque les problèmes seront résolus.
Donc, jusqu'à ce point,
les plats seront une valeur indéfinie.
Donc, nous pouvons profiter de ce fait,
et puis reconcevoir notre modèle de telle sorte que,
nous dirons montrer cette div seulement si la vaisselle n'est pas un objet indéfini ou non nul.
Quand c'est inconnu,
alors j'utiliserai un second div ici avec l'attribut caché qui lui est associé.
Donc, vous avez vu caché être utilisé auparavant.
Donc, je vais l'utiliser pour définir la tige.
Donc, ce que cela signifie est que si la vaisselle n'est pas nulle,
alors cette div sera cachée.
Si la vaisselle est nulle,
alors cette div sera affichée.
Donc, maintenant vous voyez que vous avez deux divs ici.
Le premier sera montré si la vaisselle n'est pas un tableau de plat nul.
Sinon, la deuxième partie sera affichée.
Donc, avec ce petit changement de mon modèle,
je suis capable de cacher le menu jusqu'à ce que le tableau de plats devienne disponible pour moi,
et quand le tableau de plats devient disponible,
alors je vais montrer le menu.
Jusqu'à ce point, je vais montrer un mat-spinner.
Qui est le spinner de progression indéterminée
qui est disponible en tant que composant de matériau angulaire.
Donc, cela s'affichera comme un cercle tournant à mon avis,
pour ce composant de menu jusqu'au point où les résultats sont obtenus,
lorsque les problèmes se résolvent.
De plus, je vais également utiliser h4, et dans le h4,
je dirai chargement, s'il vous plaît patienter.
Donc, ce qui se passe est que lorsque la vaisselle n'est pas encore résolue,
le spinner et ce message seront affichés à l'écran.
Le moment où les plats deviennent disponibles lorsque les résultats promis,
alors le menu sera affiché sur l'écran.
Maintenant, nous allons faire des mises à jour similaires sur le composant,
le composant home, et le composant de détail plat aussi.
En conséquence, nous mettrons à jour le service leader,
et le service de promotion également pour simuler le délai.
Donc, en utilisant le modèle que je viens de vous illustrer,
allez-y et mettez à jour les services et aussi les modèles correspondants,
et nous verrons le résultat une fois la mise à jour terminée.
Après avoir terminé les mises à jour de tous les services et
les modèles correspondants pour les composants,
laissez-moi vous parcourir rapidement les fichiers mis à jour ici.
Donc, c'est le service de leader.
Donc, vous pouvez voir que dans le service leader,
J'ai mis à jour les GetLeaders pour utiliser le setTimeout exactement comme nous l'avons fait avec les plats,
et le GetLeader et le GetFeaturedLeader aussi.
De même, dans le service de promotion,
, nous avons mis à jour l'identifiant GetPromotions GetPromotion et GetFeaturedPromotion également.
Ainsi, les trois services sont maintenant mis à jour
pour provoquer un délai avant qu'ils ne retournent le résultat.
Maintenant, en termes de templates,
nous avons déjà mis à jour le template menu.component.
Regardons les modèles home.components.
Donc, dans le home e.component,
vous vous rendez compte que lorsque nous avons conçu le home e.component,
nous avions déjà configuré les cartes avec le plat étoile NGif.
Donc, tout ce que nous devons faire est,
ci-dessous, nous ajoutons un div avec
le caché et le plat ici mais le spinner comme nous l'avons fait avec le menu.component.
De même, pour la promotion, le mat-card a déjà le NGiF en place,
donc il nous suffit d'ajouter cette div supplémentaire ici avec la promotion cachée là-bas,
et aussi pour le leader ici ci-dessous.
De même, aller à la composante détail du plat.
Dans le composant de détail du plat,
nous avions déjà la liste avec le plat NGiF pour les commentaires.
Aussi, le plat NGiF pour la carte qui affiche les détails du plat.
Donc, tout ce que nous devons faire est d'ajouter dans cette nouvelle div avec le plat caché ici,
et le spinner div en place.
De même, dans le composant about,
quand vous allez dans le composant about,
vous verrez que nous avions les dirigeants d'entreprise ici,
et que nous avions déjà la liste avec la star NGiF avec les leaders.
Donc, tout ce que nous devons faire est d'ajouter dans la div avec
caché et leaders ici avec un spinner en place. C'est ça.
Notre application est maintenant mise à jour.
Jetons un coup d'oeil à l'application mise à jour dans le navigateur suivant.
En allant dans le navigateur,
vous verrez que lorsque vous essayez de charger dans le composant home,
il y a un court laps de temps lorsque vous voyez le spinner sur
l'écran avant que les cartes ne soient chargées.
De même, lorsque vous allez au menu.component,
vous verrez le spinner sur le côté gauche pendant
deux secondes avant que le menu réel ne soit mis à jour,
et quand vous allez à un plat individuel aussi vous voyez que
le spinner sur l'écran avant que les détails du plat soient rendus,
et dans le composant about aussi de la même façon, vous verrez que,
vous aurez le cercle de rotation là avant que les informations du leader soient mises à jour.
Chaque fois que nous passons à l'un de ces,
, vous verrez un court délai similaire avant que l'inflammation ne soit mise à jour sur l'écran.
Donc, avec cela, vous voyez comment vous pouvez gérer le retard dans l'obtention des résultats,
ou retard dans la résolution de la promesse du côté service dans votre composant
et tenir l'utilisateur informé du fait qu'il y a
un court délai avant que l'écran ne soit mis à jour.
Ceci termine cet exercice.
Dans cet exercice, nous avons vu comment nous pouvons simuler un court délai avec nos promesses.
Se résoudre à partir des services,
et nous avons également vu comment tenir l'utilisateur informé en utilisant les composants de matériau angulaire MD spinner
pour afficher sur l'écran pour
la durée lorsque les résultats ne sont pas encore disponibles,
qui est pour la durée jusqu'à ce que la promesse soit résolue.
Ceci termine cet exercice.
C'est le bon moment pour vous de faire un commit git avec le message promis Deuxième partie.