Dans cet exercice, nous allons utiliser le client HTTP Angular pour communiquer avec le serveur JSON que nous avons déjà configuré dans l'exercice précédent.
Nous allons maintenant pouvoir télécharger les données du serveur vers notre application angulaire en utilisant
le client HTTP et ensuite utiliser les données afin de construire les différentes vues au sein de nos composants.
Dans cet exercice, nous allons reconfigurer le service de plat pour pouvoir
aller chercher les données sur les plats du serveur JSON.
Dans le cadre de votre mission,
vous compléterez les deux autres,
le service de leader et le service de promotion.
Nous verrons comment nous pouvons tirer parti du client HTTP qui nous rendra un observable.
Nous avons déjà reconfiguré notre application,
en particulier le service pour être en mesure de fournir des observables à nos composants.
Au sein de nos composantes, nous souscrivons à ces observables.
Donc, la majeure partie de la configuration
pour obtenir des données du service vers le composant est déjà là.
Nous allons l'améliorer un peu pour faire face aux erreurs dans le prochain exercice.
Notre première étape dans la préparation de l'application Angular pour utiliser
le client HTTP pour accéder au serveur est de
configurer notre application avec le HttpClientModule.
Donc, pour ce faire, ouvrez app.module.ts.
Ensuite, ici, importons
le HttpClientModule à partir de Angular/common/HTTP.
Une fois que nous avons importé cela,
alors nous allons de l'avant et configurer le décorateur NgModule
dans les importations avec le HttpClientModule.
Maintenant, notre application est prête à utiliser le HttpClientModule pour accéder au serveur.
Maintenant, assurez-vous que le serveur JSON est opérationnel et
sert les données afin que notre application puisse
communiquer avec l'application serveur JSON.
Maintenant que nous accédons aux données du côté serveur,
, c'est une bonne pratique de créer une valeur spéciale qui pointe vers
la base de votre serveur afin qu'elle puisse être configurée dans votre application angulaire au besoin.
Donc, en allant dans le dossier partagé,
Je vais créer un nouveau fichier ici nommé baseurl.ts.
Ensuite, dans ce fichier,
je vais inclure une constante et l'exporter et la constante nommée baseURL,
que je mettrai à HTTP : //localhost:3000.
Donc, comme vous vous en souvenez, c'est la baseURL à laquelle mon serveur JSON est accessible.
Donc, localhost:3000/, là.
Donc, avec ceci,
permettez-moi d'enregistrer les modifications dans la base eURL.
Maintenant, angular fournit un moyen de fournir des valeurs comme
ceci au reste de votre application en configurant un fournisseur dans votre module d'application.
Donc, en allant dans le module app,
pour nous permettre de fournir cette BaseURL particulière,
nous allons d'abord importer la valeur BaseURL dans notre application angulaire.
Donc, je dirais importer baseURL à partir de partagé/baseurl.
Cette valeur peut maintenant être mise à disposition de
le reste de mon application en allant chez les fournisseurs.
Ensuite, en plus du LeaderService,
si je configure une valeur comme celle-ci,
je dirais fournir
, puis baseUrl, useValue.
Donc, de cette façon, je vais fournir cette valeur baseURL en tant que
un fournisseur de valeur à partir du module d'application au reste de mon application angulaire.
Dans l'étape suivante,
, nous allons configurer notre DishService afin de le laisser accéder côté serveur,
, puis obtenir les données du côté serveur,
et ensuite mettre les données à la disposition de nos composants.
Maintenant, nous allons aller au DishService.
Ensuite, dans le DishService,
ces plats ne sont plus nécessaires du fichier local là-bas.
Je vais télécharger ces données du côté serveur.
Donc, je vais supprimer cela et ensuite ajouter dans une importation
de HttpClient à partir d'angulaire,
chaque HTTP commun,
importer le BaseURL à partir de,
rappeler que c'est dans partagé/baseurl.
Maintenant, dans mon DishService,
je vais aller chercher les données du côté serveur.
Donc, dans le constructeur,
, je vais mettre à jour le constructeur en injectant HttpClient dans mon constructeur ici.
Donc, maintenant, mon DishService devrait être configuré pour
obtenir les données du côté serveur et retourner les données à mon application.
Maintenant, vous remarquez que
la méthode GetDats est déjà configurée pour renvoyer l'observable au composant.
Donc, cette partie est déjà configurée.
Maintenant, ce que cela va retourner est ce qu'il obtient de
la méthode HTTP get
que nous appellerons le côté serveur.
Donc, pour appeler le côté serveur,
je vais devoir fournir,
dans la méthode get,
le baseURL que j'ai
déjà obtenu, puis des plats.
Donc, de cette façon, la méthode HTTP get va obtenir les données de localhost:3000/plats.
Donc, c'est l'URL côté serveur de
que vous pouvez récupérer les données des plats ici. C'est ça.
Mon serveur va fournir les données sous la forme d'un
observable à ce service lorsque la méthode HTTP get est appelée,
et qui sera retournée au composant via la méthode GetDats.
C'est à propos de ça. Maintenant, mon service est configuré pour aller et
récupérer les données du côté serveur, puis retourner les données à mon composant.
Je vais mettre à jour les méthodes restantes aussi de manière similaire.
Donc, ce que je vais faire pour la méthode suivante pour la méthode getDish est,
Je vais copier
cette partie et ensuite simplement la coller en place ici,
et ensuite nous allons l'éditer.
Maintenant, quand vous avez besoin d'obtenir pour un plat particulier,
vous avez l'ID du plat qui est à votre disposition.
Donc, nous dirons que getDish ID est disponible en tant que paramètre.
Donc, à la vaisselle,
Je vais ajouter l'ID comme autre paramètre ici.
Maintenant, quand je reçois la réponse, puis la retourne
au composant via l'appel de méthode getDish.
De même, pour le plat en vedette,
, ce sera une façon un peu intéressante de le configurer.
Maintenant, pour le plat en vedette,
quand vous avez besoin d'accéder aux données du côté serveur,
ce que je vais faire est, maintenant,
quand je demande un plat en vedette, maintenant,
la façon dont mon côté serveur est configuré est que je peux envoyer
un paramètre de requête dans mon URL pour que je puisse dire des plats ?
et puis dire vedette égale à true.
Donc, de cette façon, mon serveur retournera
uniquement les objets pour lesquels le drapeau vedette est défini sur true,
ou la propriété vedette est définie sur true du côté serveur.
Maintenant, c'est ainsi que le côté serveur est configuré.
Maintenant, encore une fois, une fois que vous obtenez les données,
alors vous cartographiez simplement la valeur, puis retournez cela comme
un observable à mon composant grâce à la méthode de plat get featured.
Quand je interroge le côté serveur en utilisant le paramètre query,
il va retourner un tableau d'objets qui correspondent.
Dans ce cas, il se trouve que le tableau contiendra exactement un élément.
Mais quand je retourne la valeur après avoir obtenu le résultat,
j'ai besoin d'inclure également un zéro là parce que c'est un tableau,
donc j'ai besoin de retourner le premier élément du tableau.
Avant d'oublier, permettez-moi d'importer
l'opérateur de carte des opérateurs rxjs.
Maintenant, pour le dernier, GetDishids,
ce que je vais faire est de tirer parti du fait que j'ai déjà
la méthode GetDats à ma disposition.
Donc, quand la méthode getDains revient,
je vais cartographier cela avec l'opérateur de carte
comme dishes.map, dish.dish id.
Donc, de cette façon, je retourne juste la valeur dont j'ai besoin,
juste les ID de plat à travers cette méthode ici.
C'est à propos de ça.
Maintenant, mon service de plat est complètement mis à jour pour aller chercher les données de
le site du serveur et ensuite fournir les données à mes composants dans mon.
Application angulaire ici.
Dans l'étape suivante,
Je vais aller dans le composant de menu.
Ensuite, dans le composant de menu,
, je vais utiliser l'interface d'injection qui est disponible via
le noyau angulaire pour injecter ce baseURL que j'ai obtenu là-bas.
Alors, comment utilisons-nous ça ?
Dans le constructeur de mon composant,
Je vais entrer et dire,
"@Inject" Donc, rappelez-vous que nous avions configuré
cette baseURL comme fournisseur pour cette valeur dans le module d'application plus tôt.
Donc, ce baseURL peut maintenant être injecté dans le composant comme celui-ci ici.
Maintenant, quand vous avez un service,
vous injectez des services comme celui-ci ici,
mais quand vous avez une valeur,
alors vous injectez la valeur en utilisant le décorateur « @Inject ».
Ici, nous spécifions la valeur du fournisseur que nous avons spécifiée là.
Nous avons dit : Provide:BaseUrl là,
donc c'est la valeur que nous fournissons ici.
Alors, je déclare ceci en tant que base privée.
Donc maintenant, dans mon code ici,
cette baseURL est disponible pour configurer tout ce dont j'ai besoin dans mon application ici.
Alors que je suis encore là,
Je vais supprimer ce plat sélectionné qui n'est pas non plus utilisé dans mon application.
Ensuite, cette méthode aussi je n'utilise pas avec mon application,
alors laissez-moi faire un peu de nettoyage pendant que je suis encore là.
La façon dont nous traitons les données que nous avons obtenues
du service restera exactement la même.
Parce que mon service est toujours de retour et observable,
et je m'abonne à l'observable dans ce composant.
Donc, cette partie ne change pas du tout.
Maintenant, la raison pour laquelle j'injecte le baseURL dans mon composant est que,
dans mon modèle ici,
j'obtiens l'image du plat ici.
Maintenant, mais cette image de plat doit être obtenue à partir de mon serveur là-bas,
à partir du serveur JSON là-bas.
Donc, je dois entrer et mettre à jour cette source pour dire,
BaseURL plus l'image de plat.
Donc, j'ai besoin de fournir l'URL complète pour cette image là-bas.
Donc, ça devrait être, httlp ://localhost:3000/images/, peu importe.
Donc, c'est la raison pour laquelle je dois fournir
la valeur baseURL en plus de l'image du plat ici.
Donc, ceci je vais mettre entre guillemets,
donc c'est ainsi qu'une expression comme celle-ci à l'intérieur de l'interpolation fonctionnera correctement.
Donc, placez ceci entre guillemets et indiquez que comme valeur source,
et puis ici vous voyez que vous utilisez baseURL plus l'image du plat,
le dish.image, la propriété image ne contient que l'URL partielle.
Donc, il contient des images slash et image.png nom de fichier.
Donc, c'est pourquoi je dois ajouter le http://localhost:3000/,
à cette propriété d'image de plat afin de construire l'URL totale pour mon image.
Donc, avec cela, mon composant de menu est maintenant complètement configuré
pour obtenir toutes les données du côté serveur.
Maintenant, de même, je vous suggère de mettre à jour
le composant de détail de plat et aussi le composant home.
Aller au composant de détail de plat,
utiliser l'injection là,
et ensuite aller au constructeur,
dans le constructeur, maintenant j'ai besoin d'utiliser
injection de BaseURL et BaseURL là,
et ainsi, mon composant de détail de plat est maintenant mis en place pour obtenir les données du service de plat.
Donc, cette partie ne changera plus,
elle reste exactement la même parce que mon service de vaisselle est tout simplement
retournant un observable et je m'abonne à cet observable ici.
J'ai également besoin de mettre à jour le fichier de modèle des composants de détail du plat,
donc aller de la même façon à la source de l'image ici,
J'ajouterais le baseURL plus l'image du plat et ensuite le mettre dans les citations là.
De même, aller à la composante maison, même chose.
Je vais faire une injection,
et dans le constructeur
je fais une injection de baseURL,
et aller au fichier de modèle de composants maison,
de même où j'utilise l'image du plat ici,
donc je vais dire, baseURL plus l'image du plat,
et puis l'enfermer entre guillemets ici,
, puis enregistrez les modifications.
Alors, c'est tout. Mon application est maintenant mise à jour pour utiliser
le serveur pour obtenir les données pour les plats.
Alors, allons voir l'application dans le navigateur.
Aller au navigateur,
vous pouvez maintenant voir que dans mon navigateur,
mon plat est rendu exactement comme avant,
et ensuite aller au composant de menu,
vous voyez que le menu rend exactement comme avant et le composant de détail plat,
aussi les détails du plat sont rendus exactement comme avant.
Donc, avec le changement que nous avons introduit en accédant aux données du côté serveur,
nous sommes en mesure de récupérer les données du côté serveur et ensuite
rendre les données dans notre application Angular.
Afin de vous convaincre que les données sont effectivement obtenues à partir de mon serveur JSON,
allons au terminal et voyons le journal sur la fenêtre du terminal là-bas.
En allant au terminal où mon serveur JSON est en cours d'exécution,
vous pouvez voir que j'ai effectivement effectué un tas de requêtes Git
à partir de mon site serveur pour obtenir toutes les données dont j'ai besoin dans mon application.
Donc, en effet, mon application Angular récupère maintenant toutes les données de
le site du serveur pour tous les plats dans mon application Angular.
Maintenant, vous pouvez utiliser la même approche pour mettre à jour
le dernier service et aussi le service de promotion,
mais nous allons reporter cela jusqu'à la dernière affectation de ce cours,
mais cela peut compléter cet exercice.
Dans cet exercice, nous avons appris comment utiliser
le client HTTP afin d'obtenir les données de
le site serveur, puis utiliser les données pour construire
les vues dans les composants de notre application Angular.
C'est le bon moment pour vous de faire un commit Git avec le message HTTP première partie.