Comment créer une application météo avec Angular, Bootstrap et l’API APIXU

Angular est un framework Web frontal construit par Google. Il permet aux développeurs de créer des applications d'une seule page modélisées autour d'un modèle architectural logicielmodel-view-controller (MVC) oumodel-view-viewmodel (MVVM). Cette architecture divise les applications en différentes parties, mais connectées, permettant un développement parallèle. Suivant ce schéma, Angular divise ses différents composants en différentes parties d’une application Web. Ses composants gèrent les données et la logique relatives à ce composant, affichent les données dans sa vue respective et adaptent ou contrôlent la vue en fonction des différents messages reçus du reste de l'application.

Bootstrap est une bibliothèque frontale qui aide les développeurs à créer des sites Web réactifs (sites qui s'adaptent à différents appareils), rapidement et efficacement. Il utilise un système de grille qui divise chaque page en douze colonnes, ce qui garantit que la page conserve sa taille et son échelle correctes, quel que soit le périphérique sur lequel elle est visualisée.

APIXU fournit des données météorologiques mondiales aux utilisateurs via leur API. En utilisant APIXU, un utilisateur peut récupérer les dernières informations météorologiques ainsi que les prévisions météorologiques futures pour n’importe quel emplacement dans le monde.

Dans ce didacticiel, vous allez créer une application météo à l'aide d'Angular, Bootstrap et de l'API APIXU. Vous pourrez saisir un lieu dans un formulaire de recherche et, lors de l'envoi de ce formulaire, afficher les détails de la météo actuelle pour cet emplacement dans votre application. La version angulaire utilisée dans ce didacticiel est 7.2.0 et la version de Bootstrap utilisée est 4.2.1.

Avant de commencer ce tutoriel, vous aurez besoin des éléments suivants:

[[step-1 -—- Installing-angular]] == Étape 1 - Installer Angular

Avant de commencer à créer votre application, vous devez installer Angular. Ouvrez votre terminal et exécutez la commande suivante pour installer l'interface de ligne de commande angulaire globalement sur votre ordinateur:

LeAngular CLI est l'interface de ligne de commande pour Angular. Il constitue le moyen principal de créer un nouveau projet angulaire ainsi que les différents sous-éléments qui composent un projet angulaire. L'utilisation de l'argument-g l'installe globalement.

Après quelques instants, vous verrez la sortie suivante:

Sortie de l'installation angulaire

Vous avez maintenant installé Angular sur votre ordinateur local. Ensuite, vous allez créer votre application Angular.

[[step-2 -—- creating-your-angular-app]] == Étape 2 - Création de votre application angulaire

Dans cette étape, vous allez créer et configurer votre nouvelle application Angular, installer toutes ses dépendances, telles que Bootstrap et jQuery, puis enfin vérifier que l’application par défaut fonctionne comme prévu.

Tout d'abord, utilisez la commandeng pour créer une application angulaire, vous pouvez l'exécuter depuis votre terminal.

[.note] #Note: Si vous utilisez Windows, vous rencontrez peut-être des problèmes pour exécuter une commandeng à partir de l’invite de commandes, même si vous avez correctement installé Node.js et npm. Par exemple, vous pouvez obtenir une erreur telle que:ng is not recognized as an internal or external command. Pour résoudre ce problème, exécutez la commandeng dans l'invite de commande Node.js installée située dans le dossier Node.js sous Windows.
#

La commandeng est une condition préalable à l'exécution de toute action avec Angular à partir de la ligne de commande. Par exemple, que vous soyez en train de construire un nouveau projet, de créer des composants ou de créer des tests, vous préfixez chaque fonctionnalité souhaitée avec la commandeng. Dans ce didacticiel, vous souhaiterez créer une nouvelle application. vous y parviendrez en exécutant la commandeng new. La commandeng new crée une nouvelle application Angular, importe les bibliothèques nécessaires et crée toute la structure de code par défaut dont votre application a besoin.

Commencez par créer une nouvelle application, dans ce tutoriel elle s'appelleraweather-app, mais vous pouvez changer le nom comme vous le souhaitez:

La commandeng new vous demandera des informations supplémentaires sur les fonctionnalités que vous souhaitez ajouter à votre nouvelle application.

Angularrouting vous permet de créer des applications d'une seule page avec différentes vues en utilisant les itinéraires et les composants. Allez-y et tapezy ou appuyez surENTER pour accepter les valeurs par défaut.

Appuyez surENTER pour accepter l'option CSS par défaut.

L’application poursuit son processus de création et le message suivant s’affiche peu de temps après:

Ensuite, dans votre éditeur de texte, ouvrez le dossierweather-app.

En regardant la structure de votre répertoire, vous verrez plusieurs dossiers et fichiers différents. Vous pouvez lire une explication complète de ce que font tous ces fichiershere, mais pour les besoins de ce didacticiel, voici les fichiers les plus importants à comprendre:

Vous pouvez laisser tous ces fichiers seuls pour le moment, car vous installerez ensuite Bootstrap.

Bootstrap a deux dépendances que vous devrez installer pour qu'il fonctionne correctement dans Angular -jQuery etpopper.js. jQuery est une bibliothèque JavaScript axée sur les scripts côté client, tandis quepopper.js est une bibliothèque de positionnement qui gère principalement les info-bulles et les popovers.

Dans votre terminal, accédez à votre répertoire racineweather-app:

Ensuite, exécutez la commande suivante pour installer toutes les dépendances et enregistrer les références dans le fichierpackage.json:

L'option--save importe automatiquement vos références dans le fichierpackage.json afin que vous n'ayez pas à les ajouter manuellement après l'installation.

La sortie affiche les numéros de version installés, comme suit:

Vous avez maintenant installé Bootstrap et ses dépendances avec succès. Cependant, vous devrez également inclure ces bibliothèques dans votre application. Votreweather-app ne sait pas encore qu'il aura besoin de ces bibliothèques, vous devez donc ajouter les chemins versjquery,popper.js,bootstrap.js etbootstrap.css dans votre fichierangular.json.

Pourpopper.js, le fichier que vous devrez inclure estnode_modules/popper.js/dist/umd/popper.js. jQuery nécessite le fichiernode_modules/jquery/dist/jquery.slim.js. Enfin, pour Bootstrap, vous aurez besoin de deux fichiers (le fichier JavaScript et le fichier CSS). Ce sont respectivementnode_modules/bootstrap/dist/js/bootstrap.js etnode_modules/bootstrap/dist/css/bootstrap.css.

Maintenant que vous avez tous les chemins de fichiers requis, ouvrez le fichierangular.json dans votre éditeur de texte. Le tableaustyles est l'endroit où vous ajouterez la référence aux fichiers CSS, tandis que le tableauscripts référencera tous les scripts. Vous trouverez ces deux tableaux en haut du fichierangular.json, dans l’objet JSON de"options":. Ajoutez le contenu en surbrillance suivant au fichier:

angular.json

Vous avez maintenant importé les principaux fichiers.js et.css dont vous avez besoin pour que Bootstrap fonctionne correctement. Vous avez spécifié les chemins relatifs vers ces fichiers à partir de votre fichierangular.json: en ajoutant vos fichiers.css dans le tableau styles et les fichiers.js dans le tableau scripts deangular.json. Assurez-vous que vous avez enregistré le fichierangular.json après avoir ajouté ce contenu.

Maintenant, démarrez votre application avec la commandeng serve pour vérifier que tout fonctionne correctement. Depuis le répertoireweather-app de votre terminal, exécutez:

L'argument--o ouvrira automatiquement une fenêtre de navigateur qui affichera votre application. La création de l’application prendra quelques secondes, puis elle s’affichera dans votre navigateur.

Vous verrez la sortie suivante dans votre terminal:

Une fois le navigateur ouvert, une page d’application angulaire par défaut s’affiche.

Si vous ne voyez pas ces sorties, répétez cette étape et assurez-vous que tout est correct. Si vous voyez une erreur telle que:Port 4200 is already in use. Use '--port' to specify a different port, vous pouvez modifier le numéro de port en tapant:

La raison de ce message d'erreur potentiel est que le port4200 de votre machine est utilisé par un autre programme ou processus. Si vous connaissez ce processus, vous pouvez le terminer ou suivre l’étape ci-dessus pour spécifier un numéro de port différent.

Vous avez maintenant configuré votre échafaudage d’application. Vous allez ensuite créer un composant météo qui contiendra le formulaire principal et les détails météo associés du lieu de recherche.

[[step-3 -—- creating-your-weather-component]] == Étape 3 - Création de votre composant Weather

Une application angulaire est principalement composée decomponents, qui sont des éléments logiques ayant une fonction particulière au sein d'une application. Le composant est composé de quelqueslogic qui gèrent une partie de l'écran dans une application - c'est ce qu'on appelle lesview.

Par exemple, dans ce didacticiel, vous allez créer unWeather Component qui sera chargé de gérer deux tâches:

Pour atteindre le premier objectif, vous créerez un formulaire qui vous permettra de rechercher un lieu. Lorsque vous cliquez sur le bouton de recherche de votre formulaire, une fonction sera recherchée pour rechercher cet emplacement.

Pour atteindre le deuxième objectif, vous disposerez d'un<div> avec des balises<p> imbriquées qui afficheront parfaitement vos données récupérées.

Lorsque votre application est exécutée à partir de la fenêtre de votre terminal, vous ne pouvez rien saisir d’autre dans cette fenêtre. Par conséquent, ouvrez le répertoireweather-app dans une nouvelle fenêtre de terminal si vous souhaitez exécuter d'autres commandesng. Vous pouvez également empêcher l'application de s'exécuter dans la fenêtre du terminal d'origine en appuyant surCTRL + C. Vous pouvez ensuite installer le nouveau composant, puis redémarrer l'application en tapantng serve --o.

Exécutez la commande suivante qui créera vosWeather Component et les importera automatiquement dans votre fichierapp.module.ts. N'oubliez pas que votre fichierapp.module.ts contient des détails sur tous les composants, modules et fournisseurs de votre application.

Vous verrez une sortie comme celle-ci (la taille exacte des octets peut varier):

Cette sortie montre qu'Angular a créé les quatre fichiers nécessaires à un composant:

Angular a également mis à jour le fichiersrc/app/app.module.ts pour ajouter une référence au composant nouvellement créé. Vous trouverez toujours les fichiers de composants dans le répertoiresrc/app/name-of-component.

Maintenant que vous avez installé votre nouveau composant, retournez dans votre navigateur pour voir l'application. Si vous avez arrêté l'exécution de l'application pour installer le nouveau composant, redémarrez-la en tapant:

Vous remarquerez que vous pouvez toujours voir «Welcome to app!» (Le composant par défaut) affiché sur la page. Vous ne pouvez pas voir votre composant nouvellement créé. Dans la section suivante, vous modifierez cela de sorte que chaque fois que vous accédez àlocalhost:4200, vous accéderez à votre composant météo nouvellement créé au lieu du composant par défaut d'Angular.

[[step-4 -—- access-your-weather-component]] == Étape 4 - Accéder à votre composant Weather

En HTML standard, chaque fois que vous souhaitez créer une nouvelle page, vous créez un nouveau fichier.html. Par exemple, si vous aviez déjà une page HTML préexistante à partir de laquelle vous vouliez accéder à votre page nouvellement créée, vous auriez un attributhref avec une baliseanchor pour pointer vers cette nouvelle page . Par exemple:

preexisting.html

Dans Angular, cependant, cela fonctionne légèrement différemment. Vous ne pouvez pas utiliser un attributhref de cette manière pour accéder à un nouveau composant. Lorsque vous souhaitez créer un lien vers un composant, vous devez utiliser la bibliothèqueRouter d’Angular et déclarer le chemin d’URL souhaité dans un fichier qui mappera directement sur un composant.

Dans Angular, vous appelez ce fichierroutes.ts. Ceci contient tous les détails de vos itinéraires (liens). Pour que ce fichier fonctionne correctement, vous importerez le typeRoutes de la bibliothèque@angular/router et listerez vos liens souhaités pour être de typeRoutes. Cela communiquera à Angular qu'il s'agit d'une liste d'itinéraires pour la navigation dans votre application.

Créez le fichierroutes.ts dans votre éditeur de texte et enregistrez-le dans le répertoiresrc/app. Ensuite, ajoutez le contenu suivant au fichierroutes.ts:

src/app/routes.ts

Maintenant, déclarez le chemin de l'URL et le composant ensrc/app/routes.ts. Vous voulez que votre application soit telle que lorsque vous accédez à la page d'accueil (http://localhost:4200), vous accédez à votre composant météo nouvellement créé. Ajoutez ces lignes au fichier, qui mappera l'URL racine sur le composant météo que vous venez de créer:

src/app/routes.ts

Vous avez importé vosWeatherComponent, puis créé une variableallAppRoutes qui est un tableau de typeRoutes. Le tableauallAppRoutes contient des objets de définition d'itinéraire contenant chacun un chemin d'URL et le composant à mapper. Vous avez spécifié que chaque fois que vous accédez à l'URL racine ("), elle doit accéder auxWeatherComponent.

Votre fichierroutes.ts final ressemblera à ceci:

src/app/routes.ts

Vous devez maintenant ajouter ces routes à votre fichier principalapp.module.ts. Vous devez passer le tableau que vous venez de créer -allAppRoutes - dans un module angulaire appeléRouterModule. LeRouterModule initialisera et configurera le routeur (chargé d'effectuer toute la navigation dans l'application) et lui fournira ses données de routage à partir deallAppRoutes. Ajoutez le contenu en surbrillance suivant:

src/app/app.module.ts

Dans ce fichier, vous avez importé le tableau d'objets de routageRouterModule etallAppRoutes. Vous avez ensuite transmis le tableauallAppRoutes dans le RouterModule afin que votre routeur sache où acheminer vos URL.

Enfin, vous devez activer le routage lui-même. Ouvrez le fichierapp.component.ts. Il existe une propriététemplateUrl qui spécifie le code HTML de ce composant particulier:./app.component.html. Ouvrez ce fichier,src/app/app.component.html, et vous verrez qu'il contient tout le HTML de votre pagelocalhost:4200.

Supprimez tout le HTML contenu dansapp.component.html et remplacez-le par:

src/app/app.component.html

La baliserouter-outlet active le routage et fait correspondre l'URL que l'utilisateur saisit dans le navigateur à la définition de route que vous avez créée précédemment dans le fichierroutes.ts sous la variableallAppRoutes. Le routeur affiche ensuite la vue au format HTML. Dans ce didacticiel, vous allez afficher le codeweather.component.html directement après la balise<router-outlet></router-outlet>.

Maintenant, si vous accédez àhttp://localhost:4200, vous verrezweather works! apparaître sur votre page.

Vous avez configuré le routage dans votre application. Vous allez ensuite créer votre section formulaire et détails qui vous permettra de rechercher un emplacement et d’afficher ses détails associés.

[[step-5 -—- defining-the-user-interface]] == Étape 5 - Définition de l'interface utilisateur

Vous utiliserez Bootstrap pour servir d’échafaudage pour la vue de votre application. Bootstrap est utile pour créer des sites Web réactifs et prêts à l’emploi qui s’adaptent à n’importe quel appareil (mobile, tablette ou ordinateur de bureau). Pour ce faire, chaque ligne d’une page Web est traitée sur douze colonnes. Sur une page Web, une ligne est simplement une ligne d'un bout à l'autre de la page. Cela signifie que le contenu de chaque page doit être contenu dans cette ligne et correspondre à douze colonnes. Si la valeur n'est pas égale à douze colonnes, elle sera déplacée vers une autre ligne. Par exemple, dans le système de grille de Bootstrap, il y aurait une rangée de douze colonnes divisée en deux sections de six colonnes et la rangée suivante de douze colonnes divisée en trois sections de quatre colonnes.

Dans lesBootstrap documentation, vous pouvez en savoir plus sur ce système de grille.

Vous allez diviser votre page en deux sections de six colonnes, la colonne de gauche contenant votre formulaire de recherche et la colonne de droite affichant les détails météorologiques.

Ouvrezsrc/app/weather/weather.component.html pour accéder au code HTML de votreWeatherComponent. Supprimez le paragraphe qui se trouve actuellement dans le fichier, puis ajoutez le code suivant:

src/app/weather/weather.component.html

Vous avez créé un<div> avec la classecontainer pour contenir tout votre contenu. Vous avez ensuite créé une ligne que vous avez divisée en deux sections de six colonnes chacune. La partie gauche tiendra votre formulaire de recherche et la droite, vos données météorologiques.

Ensuite, pour créer votre formulaire, vous travaillerez dans la première colonnecol-md-6. Vous ajouterez également un bouton qui transmettra à APIXU ce que vous avez saisi dans votre formulaire, qui renverra ensuite les détails météo demandés. Pour ce faire, identifiez la première classecol-md-6 et ajoutez le contenu en surbrillance suivant sous la balise<h3>:

src/app/weather/weather.component.html

Vous avez ajouté votre formulaire et ajouté une classeform-group qui contient votre barre de recherche. Vous avez également créé votre bouton pour rechercher la météo. Dans votre navigateur, la page de votre application météo ressemblera à ceci:

Cela semble un peu compact, vous pouvez donc ajouter du CSS pour donner un meilleur espacement à la page. L'avantage majeur de Bootstrap est qu'il est fourni avec des classes d'espacement que vous pouvez ajouter à votre code HTML sans avoir à écrire de code CSS supplémentaire. Cependant, si vous souhaitez intégrer des CSS supplémentaires que les classes standard de Bootstrap ne couvrent pas, vous pouvez écrire dans votre propre CSS si nécessaire. Pour ce tutoriel, vous utiliserez les classes standard de Bootstrap.

Pour chaque balise<h3>, vous ajouterez la classe CSS Boostrap.my-4. Lem définit la marge sur l'élément, ley définit à la foismargin-top etmargin-bottom sur l'élément, et enfin4 spécifie le montant de marge à ajouter. Vous pouvez trouver plus de détails sur les différents types et tailles d'espacementhere. Dans votre fichierweather.component.html, ajoutez le contenu en surbrillance suivant pour remplacer les balises<h3> actuelles:

src/app/weather/weather.component.html

Rechargez la page dans votre navigateur et vous verrez que vous avez plus d’espacement.

Vous avez créé votre formulaire ainsi que la section dans laquelle vous allez afficher les informations que vous recevez de l'API APIXU. Ensuite, vous allez câbler votre formulaire pour pouvoir saisir votre emplacement correctement.

[[step-6 -—- câblage-votre-formulaire]] == Étape 6 - Câblage de votre formulaire

Dans Angular, il existe deux façons de créer des formulaires pour la saisie utilisateur dans votre application -reactive outemplate-driven. Bien qu'ils obtiennent le même résultat, chaque type de formulaire traite différemment le traitement des données saisies par l'utilisateur.

Avec les formulaires réactifs, vous créez une liste des différents éléments de votre formulaire dans votre fichier.component.ts. Vous les connectez ensuite à votre formulaire HTML créé dans le fichier.component.html respectif. C'est strictement à sens unique; autrement dit, les données circulent de votre HTML vers votre fichier.component.ts, il n'y a pas de flux bidirectionnel de données.

Avec les formulaires basés sur des modèles, vous créez votre formulaire comme vous le feriez en HTML normal. Ensuite, en utilisant des directives telles quengModel, vous pouvez créer des liaisons de données unidirectionnelles ou bidirectionnelles à partir de votre HTML, de retour vers votre modèle de données dans votre composant, et vice-versa.

Chaque approche présente des forces et des faiblesses, mais en général, les formes réactives sont préférables en raison de:

Malgré ces atouts, les formes réactives peuvent parfois être plus complexes à mettre en œuvre. Cela peut amener les développeurs à écrire plus de code que par rapport à un formulaire basé sur des modèles. Pour avoir un aperçu complet des types de formulaires et des meilleurs cas d'utilisation,Angular’s official guide constitue un bon point de départ. Pour ce tutoriel, vous utiliserez des formulaires réactifs.

Pour utiliser un formulaire réactif, ouvrez le fichierapp.module.ts. Ensuite, importez lesReactiveFormsModule en déclarant l'importation vers le haut du fichier.

src/app/app.module.ts

Enfin, ajoutez lesReactiveFormsModule à votre liste d'importations.

src/app/app.module.ts

Suite à ces ajouts de code, vosapp.module.ts ressembleront à ceci:

src/app/app.module.ts

Une fois ces deux lignes ajoutées, ouvrez le fichierweather.component.ts et importez les classesFormBuilder etFormGroup.

src/app/weather/weather.component.ts

Créez maintenant une variable dans votre fichierweather.component.ts qui référencera vosFormGroup:

weather.component.ts

Chaque fois que vous souhaitez effectuer une action sur votre formulaire, vous le référencerez via la variableweatherSearchForm. Vous allez maintenant ajouter l'importation deFormBuilder dans vosconstructor afin de pouvoir l'utiliser dans votre composant.

weather.component.ts

En ajoutant lesformBuilder auxconstructor, il crée une instance de la classeFormBuilder, vous permettant de l'utiliser dans votre composant.

Vous êtes maintenant prêt à créer votreFormGroup et ses valeurs respectives dans le fichierweather.component.ts. Si vous disposez de plusieurs options de saisie dans votre formulaire, il est recommandé de le placer entre unFormGroup. Dans ce tutoriel, vous n'en aurez qu'un (votre entrée de localisation), mais vous utiliserez quand même lesFormGroup pour vous entraîner.

Il est important que votre formulaire soit prêt à être utilisé lorsque vous accédez à votre composant. Comme vous utilisez un formulaire réactif, vous devez d'abord créer l'arborescence des éléments du formulaire avant de le lier au HTML. Pour ce faire, vous devez vous assurer que vous créez vos éléments de formulaire dans le crochetngOnInit à l'intérieur de vosWeatherComponent. La méthodengOnInit s'exécute une fois à l'initialisation d'un composant, exécutant toute logique que vous spécifiez doit être exécutée avant que le composant soit prêt à être utilisé.

Vous devez donc créer votre formulaire avant de pouvoir terminer la liaison au processus HTML.

Dans vosWeatherComponent, vous initialiserez le formulaire dans le hookngOnInit:

src/app/weather/weather.component.ts

Vous avez créé la première partie du formulaire selon le style de formulaire réactif: définissez vos composants de formulaire dans le fichierweather.component.ts. Vous avez créé un groupe d'éléments composites de votre formulaire (pour le moment, vous avez un élément,location). Le tableau[''] vous permet de spécifier des options supplémentaires pour vos entrées de formulaire telles que: pré-remplir avec certaines données et utiliser des validateurs pour valider votre entrée. Vous n'avez besoin d'aucun de ceux-ci pour ce tutoriel, vous pouvez donc le laisser vide. Vous pouvez en savoir plus sur ce que vous pouvez passer dans une propriété d'élémenthere.

Vous avez encore deux choses à faire avant que votre formulaire soit complet. Ouvrez d'abord votre fichierweather.component.html. Vous devez attribuer au formulaire une propriété[formGroup]. Cette propriété sera égale à la variable que vous venez de déclarer dans votre fichierweather.component.ts:weatherSearchForm. Deuxièmement, vous devez lier votre élémentlocation (déclaré dans votre fichierweather.component.ts) à votre HTML. Dansweather.component.html, ajoutez le contenu en surbrillance suivant:

src/app/weather/weather.component.html

Vous avez ajouté la propriété[formGroup], liant votre formulaire au HTML. Vous avez également ajouté la propriétéformControlName qui déclare que cet élémentinput particulier est lié à l'élémentlocation dans votre fichierweather.component.ts.

Enregistrez votre fichier et revenez sur votre navigateur. Vous verrez que votre application a exactement la même apparence. Cela signifie que votre formulaire est correctement câblé. Si vous constatez des erreurs à ce stade, veuillez suivre les étapes précédentes pour vous assurer que tout est correct dans vos fichiers.

Vous allez ensuite câbler votre bouton pour pouvoir accepter les données saisies dans votre formulaire.

[[step-7 -—- connection-your-button]] == Étape 7 - Connexion de votre Button

Dans cette étape, vous allez connecter votre bouton de recherche à votre formulaire afin de pouvoir accepter les données saisies par l’utilisateur. Vous allez également créer l'échafaudage de la méthode qui enverra les données d'entrée de l'utilisateur à l'API météo APIXU.

Si vous regardez votre code dansweather.component.html, vous pouvez voir que votre bouton a un typesubmit:

src/app/weather/weather.component.html

Il s'agit d'une valeur HTML standard qui soumettra les valeurs de votre formulaire à une fonction sur laquelle une action sera entreprise.

Dans Angular, vous spécifiez cette fonction dans l'événement(ngSubmit). Lorsque vous cliquez sur votre bouton dans votre formulaire, tant qu'il a un type desubmit, il déclenchera l'événement(ngSubmit), qui appellera par la suite la méthode que vous lui avez assignée. Dans ce cas, vous souhaitez pouvoir obtenir l'emplacement que votre utilisateur a saisi et l'envoyer à l'API APIXU.

Vous allez d’abord créer une méthode pour gérer cela. Dans vosweather.component.ts, créez une méthodesendToAPIXU() qui prendra un argument: la ou les valeurs que vous avez tapées dans votre formulaire. Ajoutez le contenu en surbrillance suivant au fichier:

src/app/weather/weather.component.ts

Ensuite, ajoutez l'événementngSubmit à votre HTML et transmettez les valeurs de votre formulaire soumis à la méthodesendToAPIXU():

weather.component.html

Vous avez ajouté l'événementngSubmit à votre formulaire, connecté la méthode que vous souhaitez exécuter lorsque vous soumettez votre formulaire et passé les valeurs de vosweatherSearchForm en tant qu'argument à votre méthode de gestionnaire (weatherSearchForm.value). Vous pouvez maintenant tester cela fonctionne en utilisantconsole.log pour imprimer vosformValues, dans votre méthodesendToAPIXU(), ajoutez le contenu en surbrillance suivant àweather.component.ts:

weather.component.ts

Accédez à votre navigateur et ouvrez votre console en faisant un clic droit n'importe où sur la page de votre site Web, puis cliquez surInspect Element. Il y aura un onglet dans la fenêtre qui apparaîtra appeléConsole. TapezLondon dans votre formulaire. Lorsque vous cliquez sur le boutonSearch for Weather, vous verrez un objet avec votre emplacement inclus.

Votre sortie de la console est un objet JSON{location: "London"}. Si vous souhaitez accéder à la valeur de votre emplacement, vous pouvez le faire en accédant àformValues.location. De même, si vous aviez d'autres entrées dans votre formulaire, vous échangeriez.location pour tout autre nom d'élément que vous aviez.

[.note] #Note:
Toutes les valeurs d'une forme réactive sont stockées dans un objet - où la clé est le nom de la valeur que vous avez passée dans lesformBuilder.group({}).
#

Le bouton est maintenant câblé et peut recevoir les entrées correctement. Ensuite, vous allez demander à la méthodesendToAPIXU() d'envoyer une requête HTTP à l'API APIXU.

[[step-8 -—- calling-the-apixu-api]] == Étape 8 - Appel de l'API APIXU

L'API APIXU accepte les informations de localisation, recherche les informations de météo actuelles pour cette position et les renvoie au client. Vous allez maintenant modifier votre application afin qu’elle envoie les données de localisation à l’API, obtienne la réponse, puis affiche les résultats sur votre page.

Afin de faire des requêtes HTTP dans Angular, vous devez importer lesHttpClientModule. Ouvrez vossrc/app/app.module.ts et ajoutez les lignes en surbrillance suivantes:

src/app/app.module.ts

Ensuite, vous devez écrire le code pour effectuer l'appel HTTP vers l'API APIXU. Il est recommandé de créer un{'t0': 'service'}ngulaire (t0) s pour effectuer des requêtes HTTP. La séparation des préoccupations est la clé de toute application que vous créez. Un service vous permet de déplacer toutes ces requêtes HTTP effectuées par votre application dans un seul fichier que vous pouvez ensuite appeler dans n'importe quel fichier.component.ts que vous créez. Vous pouvez "légalement" écrire ces requêtes HTTP dans le fichier.component.ts spécifique, mais ce n'est pas une bonne pratique. Vous pouvez par exemple constater que certaines de vos demandes sont complexes et vous obligent à effectuer certaines opérations de post-traitement après réception de vos données. Plusieurs composants différents de votre application peuvent utiliser certaines de vos requêtes HTTP et vous ne souhaitez pas écrire la même méthode plusieurs fois.

Depuis une nouvelle fenêtre de terminal ou en arrêtant le serveur dans votre session de terminal en cours, exécutez la commande suivante pour créer un service appeléapixu:

Vous verrez une sortie ressemblant à ce qui suit:

La commande a créé le fichier de service (apixu.service.ts) et un fichier de test (apixu.service.spec.ts).

Vous devez maintenant ajouter ce service en tant que fournisseur dans votre fichierapp.module.ts. Cela le rend disponible pour une utilisation dans votre application. Ouvrez ce fichier et importez d'abord lesApixuService:

src/app/app.module.ts

Ensuite, ajoutez lesApixuService nouvellement importés en tant que fournisseur dans le blocproviders:

src/app/app.module.ts file

Dans Angular, si vous souhaitez utiliser un service que vous avez créé, vous devez spécifier ce service en tant que fournisseur dans votre fichiermodule.ts. Dans ce cas, vous l'avez spécifié en tant que fournisseur dans l'ensemble de votre application enapp.module.ts.

Enfin, ouvrez le fichiersrc/app/apixu.service.ts. Vous verrez le code standard de ce dont vous avez besoin pour créer un service: d’abord l’importation de l’interfaceInjectable depuis Angular; puis le fait que le service doit être avec l'injecteur racine deprovidedIn (pour l'ensemble de l'application); puis lesdecorating (cela signifie effectivement spécifier) ​​de votre service en tant que@Injectable.

src/app/apixu.service.ts

La décoration du service en@Injectable vous permet d'injecter ce service dans le constructeur enweather.component.ts afin que vous puissiez l'utiliser à l'intérieur de votre composant.

Si vous avez arrêté votre application, redémarrez-la en exécutant:

Comme mentionné ci-dessus, votre service doit faire des requêtes HTTP à l'API APIXU et importer lesHttpClientModule dans le fichierapp.module.ts pour effectuer des requêtes HTTP dans toute l'application. Vous devez également importer la bibliothèqueHttpClient dans le fichierapixu.service.ts pour faire des requêtes HTTP à l'API APIXU à partir du fichierapixu.service.ts lui-même. Ouvrez le fichierapixu.service.ts et ajoutez le contenu en surbrillance suivant:

src/app/apixu.service.ts

Vous devez maintenant écrire une méthode,getWeather(), qui prend un paramètre: location. Cette méthode envoie une demande d'API à APIXU et renvoie les données d'emplacement extraites.

Pour cela, vous aurez besoin de la clé API fournie lors de votre inscription à l'API APIXU. Si vous vous connectez àAPIXU, vous arriverez au tableau de bord:

Vous verrez votre clé, et en dessous, des liens vers l'URL de l'API avec votre clé déjà pré-remplie pour lesCurrent Weather etForecast Weather. Copiez le lien HTTPS pour les détails deCurrent Weather, ce sera quelque chose comme:

https://api.apixu.com/v1/current.json?key=YOUR_API_KEY&q=Paris

Cette URL vous donnera les détails de la météo actuelle pour Paris. Vous voulez pouvoir passer leslocation de votre formulaire dans le paramètre&q= à la place. Par conséquent, supprimezParis de l'URL lorsque vous l'ajoutez à votre fichierapixu.service.ts:

src/app/apixu.service.ts

[.note] #Note: Vous avez utilisé la clé API directement dans le code. Dans une situation de production, vous devez stocker cette clé côté serveur en toute sécurité, récupérer cette clé de manière sécurisée et l'utiliser dans votre application. Vous pouvez soit le stocker en toute sécurité côté serveur, soit utiliser une application de gestion de clés telle queHashicorp Vault ouAzure Key Vault, pour n'en nommer que quelques-unes.
#

Vous avez maintenant importé et injectéHttpClient dans le constructeur pour pouvoir l'utiliser. Vous avez également créé une méthodegetWeather() qui prend un paramètrelocation et envoie une requêteGET à votre URL fournie. Vous avez laissé le paramètre&q= vide, car vous allez fournir cet emplacement directement à partir du paramètrelocation dans la méthode. Enfin, vous avez renvoyé les données à celui qui a appelé la méthode.

Votre service est maintenant terminé. Vous devez importer votre service dans votreWeatherComponent, l'injecter dans votre constructeur pour l'utiliser, puis mettre à jour votre méthodesendToAPIXU() pour envoyer votre emplacement à votre service nouvellement créé. Ouvrez le fichierweather.component.ts pour terminer ces tâches en ajoutant le contenu en surbrillance:

src/app/weather.component.ts

Vous avez supprimé l'ancienne instructionconsole.log de votre méthodesendToAPIXU() et l'avez mise à jour avec ce contenu. Vous transmettez maintenant votre position de votre formulaire à la méthodesendToAPIXU() que vous avez créée précédemment. Vous avez ensuite transmis ces données à la méthodegetWeather() duApixuService qui a ensuite fait une requête HTTP à l'API avec cet emplacement. Vous êtes ensuite abonné à la réponse que vous avez reçue et, dans cet exemple, avez enregistré ces données dans la console. Vous devez toujours appeler la méthode subscribe sur une requête HTTP car la requête ne commencera pas tant que vous n'aurez pas un moyen de lire la réponse deObservableque vous obtenez. LesObservables sont un moyen d'envoyer des messages entre éditeurs et abonnés, vous permettant de transmettre tout type de données dans les deux sens. Vous ne pourrez pas recevoir de données d’un observable tant qu’un abonné n’y aura pas souscrit, car elles ne seront pas exécutées avant ce point.

Ouvrez à nouveau la console dans votre navigateur. Maintenant, tapezLondon, UK et cliquez surSearch for Weather. Si vous cliquez sur les flèches de l'onglet, vous verrez une liste des détails de la météo dans la console.

La sortie montre des objets JSON contenant toutes les informations météo nécessaires. Vous avez deux objets renvoyés: un objetcurrent et un objetlocation. Le premier donne les détails météorologiques souhaités et les derniers détails concernant votre position.

Vos données météo s'affichent maintenant avec succès dans la console. Pour terminer ce didacticiel, vous allez afficher ces détails météorologiques dans votre code HTML.

[[step-9 -—- display-your-weather-data-in-your-app]] == Étape 9 - Affichage de vos données météo dans votre application

Afficher les résultats dans la console est une bonne première étape pour vérifier que tout fonctionne correctement. Cependant, vous souhaitez éventuellement afficher les données météorologiques au format HTML pour vos utilisateurs. Pour ce faire, vous allez créer une variable contenant les données météo renvoyées, puis l'afficher à l'aide deinterpolation dans votre HTML.

L'interpolation vous permet d'afficher des données dans vos vues. Pour ce faire, il vous faut lier une propriété via le style{{ }}, pour afficher cette propriété dans votre HTML.

Ouvrez le fichierweather.component.ts et créez une variable appeléeweatherData à laquelle vous attribuerez les données JSON extraites de l'API. En outre, supprimez le code qui était auparavant entre les crochets.subscribe() et remplacez-le par le code en surbrillance suivant:

src/app/weather/weather.component.ts

Vous avez créé la variableweatherData et déclaré qu'elle peut contenir des données de typeany. Vous avez ensuite affecté les données que vous avez reçues de votre appel API à cette variable. Enfin, vous avez ajouté une instructionconsole.log() pour vérifier queweatherData contient toutes les informations récupérées.

Votre fichierweather.component.ts devrait ressembler à ceci à ce stade:

src/app/weather/weather.component.ts

Si vous revenez en arrière et recherchez à nouveauLondon, UK, vous verrez votre objet imprimé sur la console comme d'habitude. Maintenant, vous voulez afficher ces données dans votre code HTML. Si vous examinez l'objetcurrent à partir des données météorologiques récupérées dans la console, vous verrez des valeurs telles quecondition,feelslike_c,feelslike_f,temp_c, temp_f, et ainsi de suite. Vous allez utiliser ces cinq propriétés.

Ouvrez à nouveau votre fichierweather.component.html et ajoutez les sous-titres aux données que vous souhaitez afficher. Vous allez ajouter ces balises<p> dans le deuxièmecol-md-6:

src/app/weather/weather.component.html

Ensuite, vous ajouterez les données que vous avez reçues de votre objet JSON à votre code HTML:

weather.component.html

Vous avez utilisé un opérateur? lorsque vous avez récupéré les données de votre variableweatherData dans votre HTML. Cet opérateur est appelé unElvis Operator.

Étant donné que vous effectuez un appel HTTP, vous effectuez une requêteasynchronous. Vous obtiendrez ces données à un moment donné, mais ce ne sera pas une réponse immédiate. Angular, cependant, continuera à remplir votre HTML avec les données que vous avez spécifiées à partir de la variableweatherData. Si vous n’avez pas reçu de données au moment où Angular commence à remplir vos paragraphes, il y aura une erreur indiquant que Angular ne peut pas trouver ces données. Par exemple,.current ou.location serait affiché comme non défini.

L'opérateur Elvis est unsafe navigator et empêche que cela se produise. Il dit à Angular d'attendre et de vérifier siweatherData est d'abord défini, avant de continuer et d'afficher ces données dans le HTML. Une fois queweatherData a toutes ses informations, Angular mettra à jour vos liaisons et affichera vos données comme d'habitude.

Votre fichier finalweather.component.ts ressemblera à ce qui suit:

weather.component.html

Vous avez suivi le modèle de l'objet météo JSON renvoyé afin de générer les données souhaitées. Enregistrez votre fichier, retournez dans votre navigateur et saisissezLondon, UK, vous verrez vos données météorologiques apparaître sur le côté droit.

Essayez-le avec différents emplacements, comme:San Francisco, US,Dakar, Senegal etHonololu, Hawaii. Les données météorologiques respectives apparaissent pour tous ces endroits.

Vous avez créé une application météo à l'aide d'Angular, Bootstrap et de l'API APIXU. Vous avez mis en place un projet angulaire à partir de zéro, en suivant les meilleures pratiques angulaires tout en veillant à ce que votre application soit bien conçue et configurée de manière appropriée.

Angular est une structure avancée qui vous permet de créer facilement de petites applications Web aux grandes et complexes. Angular, comme avec tous les frameworks, a une courbe d'apprentissage, mais de petits projets comme celui-ci peuvent vous aider à apprendre rapidement et à commencer à l'utiliser de manière productive.

Une autre fonctionnalité à ajouter à votre application esthandling errors de vos requêtes HTTP; par exemple, si vous deviez saisir un emplacement non valide. Une autre amélioration consisterait à afficher des images différentes si la température est comprise entre certains seuils. Vous pouvez également créer différentes applications avec Angular à l'aide d'autres API.

Vous pouvez également utiliserNgBootstrap, qui est un type spécial de Bootstrap construit pour Angular. Cela vous permet d'utiliser tous les widgets JavaScript Bootstrap standard, ainsi que des widgets spéciaux non inclus dans l'installation standard spécifiquement adaptée à Angular.

Le code complet de ce didacticiel est disponible surGitHub.