So erstellen Sie eine Wetter-App mit Angular, Bootstrap und der APIXU-API

https://angular.io [Angular] ist ein von Google erstelltes Front-End-Webframework. Entwickler können damit einseitige Anwendungen erstellen, die auf der Grundlage eines Architekturmusters eines Model-View-Controllers (MVC) oder eines Model-View-View-Modells (MVVM) erstellt wurden. Diese Architektur unterteilt Anwendungen in verschiedene, aber zusammenhängende Teile, die eine parallele Entwicklung ermöglichen. Nach diesem Muster teilt Angular die verschiedenen Komponenten in die jeweiligen Teile einer Webanwendung auf. Seine Komponenten verwalten die Daten und die Logik, die zu dieser Komponente gehören, zeigen die Daten in der jeweiligen Ansicht an und passen die Ansicht an oder steuern sie basierend auf den verschiedenen Nachrichten, die sie vom Rest der App erhalten.

Bootstrap ist eine Front-End-Bibliothek, mit der Entwickler schnell und effektiv reaktionsfähige Websites (Websites, die sich an verschiedene Geräte anpassen) erstellen können. Es wird ein Rastersystem verwendet, das jede Seite in zwölf Spalten unterteilt. Dadurch wird sichergestellt, dass die Seite unabhängig vom Gerät, auf dem sie angezeigt wird, die richtige Größe und Skalierung beibehält.

https://www.apixu.com [APIXU] stellt Benutzern globale Wetterdaten über ihre API zur Verfügung. Mit APIXU kann ein Benutzer das aktuelle Wetter sowie zukünftige Wettervorhersagen für jeden Ort der Welt abrufen.

In diesem Lernprogramm erstellen Sie eine Wetter-App mit Angular, Bootstrap und der APIXU-API. Sie können einen Ort in ein Suchformular eingeben und nach dem Absenden dieses Formulars die aktuellen Wetterdetails für diesen Ort in Ihrer App anzeigen. Die in diesem Tutorial verwendete Angular-Version ist 7.2.0 und die verwendete Bootstrap-Version ist 4.2.1.

Bevor Sie mit diesem Lernprogramm beginnen, benötigen Sie Folgendes:

Bevor Sie mit dem Erstellen Ihrer App beginnen, müssen Sie Angular installieren. Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus, um die Angular CLI global auf Ihrem Computer zu installieren:

Die Angular CLI ist die Befehlszeilenschnittstelle für Angular. Es dient als Hauptmethode zum Erstellen eines neuen Angular-Projekts sowie der verschiedenen Unterelemente, aus denen ein Angular-Projekt besteht. Mit dem Argument "+ -g +" wird es global installiert.

Nach kurzer Zeit wird folgende Ausgabe angezeigt:

Ausgabe von der Installation von Angular

Sie haben Angular jetzt auf Ihrem lokalen Computer installiert. Als Nächstes erstellen Sie Ihre Angular-Anwendung.

In diesem Schritt erstellen und konfigurieren Sie Ihre neue Angular-Anwendung, installieren alle Abhängigkeiten, z. B. Bootstrap und jQuery, und überprüfen schließlich, ob die Standardanwendung wie erwartet funktioniert.

Verwenden Sie zuerst den Befehl + ng +, um eine Angular-Anwendung zu erstellen. Sie können diese von Ihrem Terminal aus ausführen.

Der Befehl + ng + ist eine Voraussetzung, um eine Aktion mit Angular über die Befehlszeile auszuführen. Unabhängig davon, ob Sie ein neues Projekt erstellen, Komponenten erstellen oder Tests erstellen, wird jeder gewünschten Funktionalität der Befehl "+ ng " vorangestellt. In diesem Lernprogramm möchten Sie eine neue Anwendung erstellen. Sie erreichen dies, indem Sie den Befehl " ng new " ausführen. Der Befehl ` ng new +` erstellt eine neue Angular-Anwendung, importiert die erforderlichen Bibliotheken und erstellt das gesamte für Ihre Anwendung erforderliche Standard-Codegerüst.

Beginnen Sie mit dem Erstellen einer neuen Anwendung. In diesem Tutorial heißt sie "++". Sie können den Namen jedoch beliebig ändern:

Der Befehl + ng new + fordert Sie zur Eingabe zusätzlicher Informationen zu Funktionen auf, die Sie zu Ihrer neuen Anwendung hinzufügen möchten.

Mit dem Winkel-Routing können Sie aus den Routen und Komponenten Anwendungen für einzelne Seiten mit unterschiedlichen Ansichten erstellen. Fahren Sie fort und geben Sie "+ y " ein oder drücken Sie " ENTER +", um die Standardeinstellungen zu übernehmen.

Drücken Sie + ENTER +, um die Standard-CSS-Option zu akzeptieren.

Die App setzt den Erstellungsprozess fort und nach kurzer Zeit wird die folgende Meldung angezeigt:

Öffnen Sie anschließend in Ihrem Texteditor den Ordner "++".

Wenn Sie sich die Struktur Ihres Verzeichnisses ansehen, werden verschiedene Ordner und Dateien angezeigt. Sie können eine vollständige Erklärung der Funktionsweise aller dieser Dateien lesen (here). Für die Zwecke dieses Lernprogramms sind dies jedoch die wichtigsten zu verstehenden Dateien:

Sie können alle diese Dateien für den Moment in Ruhe lassen, während Sie als Nächstes Bootstrap installieren.

Bootstrap benötigt zwei Abhängigkeiten, die installiert werden müssen, damit es in Angular ordnungsgemäß funktioniert: jQuery und https://popper.js.org [popper.js]. + jQuery ist eine JavaScript-Bibliothek, die sich auf clientseitiges Scripting konzentriert, während` + popper.js` eine Positionierungsbibliothek ist, die hauptsächlich Tooltips und Popovers verwaltet.

Wechseln Sie in Ihrem Terminal in Ihr Stammverzeichnis "++":

Führen Sie dann den folgenden Befehl aus, um alle Abhängigkeiten zu installieren und die Verweise auf die Datei + package.json + zu speichern:

Mit der Option "+ - Speichern" werden Ihre Referenzen automatisch in die Datei "+ package.json" importiert, sodass Sie sie nach der Installation nicht manuell hinzufügen müssen.

Es wird eine Ausgabe mit den Versionsnummern angezeigt, die wie folgt installiert wurden:

Sie haben Bootstrap und seine Abhängigkeiten erfolgreich installiert. Sie müssen diese Bibliotheken jedoch auch in Ihre Anwendung aufnehmen. Ihr ++ weiß noch nicht, dass es diese Bibliotheken benötigt, daher müssen Sie die Pfade zu + jquery +, + popper.js +, + bootstrap.js + und + bootstrap.css + hinzufügen `in Ihre + angular.json + `Datei.

Für "+ popper.js " müssen Sie folgende Datei einfügen: " node_modules / popper.js / dist / umd / popper.js ". Für jQuery ist die Datei ` node_modules / jquery / dist / jquery.slim.js ` erforderlich. Schließlich benötigen Sie für Bootstrap zwei Dateien (sowohl die JavaScript-Datei als auch die CSS-Datei). Dies sind ` node_modules / bootstrap / dist / js / bootstrap.js ` und ` node_modules / bootstrap / dist / css / bootstrap.css +`.

Nachdem Sie über alle erforderlichen Dateipfade verfügen, öffnen Sie die Datei "+ angular.json" in Ihrem Texteditor. Im Array "+ styles " fügen Sie den Verweis auf die CSS-Dateien hinzu, während das Array " scripts " auf alle Skripts verweist. Sie finden beide Arrays am oberen Rand der Datei " angular.json" im Objekt "+" options ": +" JSON. Fügen Sie der Datei den folgenden hervorgehobenen Inhalt hinzu:

eckig.json

Sie haben jetzt die wichtigsten "+ .js" - und "+ .css" -Dateien importiert, die Sie benötigen, damit Bootstrap ordnungsgemäß funktioniert. Sie haben die relativen Pfade zu diesen Dateien aus Ihrer + angular.json + -Datei angegeben: Fügen Sie Ihre + .css + -Dateien in das Styles-Array und + .js + -Dateien in das Scripts-Array von + angular.json + ein . Stellen Sie sicher, dass Sie die Datei "+ angular.json" gespeichert haben, nachdem Sie diesen Inhalt hinzugefügt haben.

Starten Sie nun Ihre Anwendung mit dem Befehl + ng serve +, um zu überprüfen, ob alles korrekt funktioniert. Führen Sie im Verzeichnis "++" Ihres Terminals Folgendes aus:

Das Argument "+ - o +" öffnet automatisch ein Browserfenster, in dem Ihre Anwendung angezeigt wird. Das Erstellen der Anwendung dauert einige Sekunden und wird dann in Ihrem Browser angezeigt.

In Ihrem Terminal wird die folgende Ausgabe angezeigt:

Sobald der Browser geöffnet ist, wird eine Standardseite für die Angular-App angezeigt.

image: https: //assets.digitalocean.com/articles/angular_bootstrap/step2.png [Bild der standardmäßig in Angular erstellten App]

Wenn Sie diese Ausgaben nicht sehen, führen Sie diesen Schritt erneut durch und stellen Sie sicher, dass alles korrekt ist. Wenn Sie einen Fehler sehen wie: `+ Port 4200 wird bereits verwendet. Verwenden Sie '--port', um einen anderen Port anzugeben. + `Dann können Sie die Portnummer ändern, indem Sie Folgendes eingeben:

Der Grund für diese potenzielle Fehlermeldung ist, dass der Port "+ 4200 +" auf Ihrem Computer von einem anderen Programm oder Prozess verwendet wird. Sie können den Vorgang entweder beenden, wenn Sie wissen, worum es sich handelt, oder den obigen Schritt ausführen, um eine andere Portnummer anzugeben.

Sie haben jetzt Ihr Anwendungsgerüst eingerichtet. Als Nächstes erstellen Sie eine Wetterkomponente, die das Hauptformular und die zugehörigen Wetterdetails des Suchorts enthält.

Eine Angular-Anwendung besteht hauptsächlich aus Komponenten, die Teile der Logik sind, die eine bestimmte Funktion innerhalb einer Anwendung haben. Die Komponente besteht aus einer Logik, die einen Teil des Bildschirms in einer Anwendung verwaltet - dies wird als Ansicht bezeichnet.

In diesem Lernprogramm erstellen Sie beispielsweise eine "+ Wetterkomponente +", die für zwei Aufgaben zuständig ist:

Um das erste Ziel zu erreichen, erstellen Sie ein Formular, mit dem Sie nach einem Ort suchen können. Wenn Sie in Ihrem Formular auf die Schaltfläche "Suchen" klicken, wird eine Funktion ausgelöst, die nach diesem Speicherort sucht.

Um das zweite Ziel zu erreichen, erhalten Sie ein "+ <div> " mit verschachtelten " <p> +" - Tags, mit denen Ihre abgerufenen Daten übersichtlich angezeigt werden.

Während Ihre App in Ihrem Terminalfenster ausgeführt wird, können Sie in diesem bestimmten Fenster nichts anderes eingeben. Öffnen Sie daher das Verzeichnis "+" in einem neuen Terminalfenster, wenn Sie andere " ng " - Befehle ausführen möchten. Alternativ können Sie die Ausführung der App im ursprünglichen Terminalfenster stoppen, indem Sie " STRG + C " drücken. Sie können dann die neue Komponente installieren und danach die App erneut starten, indem Sie " ng serve --o +" eingeben.

Führen Sie den folgenden Befehl aus, der Ihre + Wetterkomponente + erstellt und automatisch in Ihre + app.module.ts + Datei importiert. Denken Sie daran, dass Ihre Datei "+ app.module.ts +" Details zu allen Komponenten, Modulen und Anbietern in Ihrer Anwendung enthält.

Die Ausgabe wird folgendermaßen angezeigt (die genauen Bytegrößen können variieren):

Diese Ausgabe zeigt, dass Angular die vier für eine Komponente erforderlichen Dateien erstellt hat:

Angular hat auch die Datei + src / app / app.module.ts + aktualisiert, um einen Verweis auf die neu erstellte Komponente hinzuzufügen. Sie finden Komponentendateien immer im Verzeichnis "+ src / app / +".

Nachdem Sie Ihre neue Komponente installiert haben, kehren Sie zu Ihrem Browser zurück, um die App anzuzeigen. Wenn Sie die App zum Installieren der neuen Komponente angehalten haben, starten Sie sie erneut, indem Sie Folgendes eingeben:

Sie werden feststellen, dass auf der Seite weiterhin "Willkommen bei der App!" (Die Standardkomponente) angezeigt wird. Sie können Ihre neu erstellte Komponente nicht sehen. Im nächsten Abschnitt ändern Sie dies so, dass Sie immer dann, wenn Sie zu "+ localhost: 4200 +" wechseln, auf Ihre neu erstellte Wetterkomponente zugreifen, anstatt auf Angulars Standardkomponente.

Wenn Sie in Standard-HTML eine neue Seite erstellen möchten, erstellen Sie eine neue HTML-Datei. Wenn Sie beispielsweise bereits eine HTML-Seite hatten, von der aus Sie zu Ihrer neu erstellten Seite navigieren möchten, verfügen Sie über ein "+ href " - Attribut mit einem " anchor +" - Tag, das auf diese neue Seite verweist. Zum Beispiel:

preexisting.html

In Angular funktioniert dies jedoch etwas anders. Sie können auf diese Weise kein "+ href " - Attribut verwenden, um zu einer neuen Komponente zu navigieren. Wenn Sie eine Verbindung zu einer Komponente herstellen möchten, müssen Sie die ` Router +` - Bibliothek von Angular verwenden und einen gewünschten URL-Pfad in einer Datei deklarieren, der direkt einer Komponente zugeordnet wird.

In Angular rufen Sie diese Datei "+ routes.ts " auf. Dies enthält alle Details Ihrer Routen (Links). Damit diese Datei korrekt funktioniert, importieren Sie den Typ " Routes " aus der Bibliothek " @ angular / router " und listen die gewünschten Links mit dem Typ " Routes +" auf. Dies teilt Angular mit, dass dies eine Liste von Routen für die Navigation in Ihrer App ist.

Erstellen Sie die Datei "+ routes.ts " in Ihrem Texteditor und speichern Sie sie im Verzeichnis " src / app ". Fügen Sie als Nächstes den folgenden Inhalt zur Datei ` routes.ts +` hinzu:

src / app / routes.ts

Deklarieren Sie nun den URL-Pfad und die Komponente in + src / app / routes.ts +. Sie möchten Ihre App so gestalten, dass Sie beim Aufrufen der Startseite (+ http: // localhost: 4200 +) auf Ihre neu erstellte Wetterkomponente zugreifen. Fügen Sie der Datei die folgenden Zeilen hinzu, wodurch die Stamm-URL der soeben erstellten Wetterkomponente zugeordnet wird:

src / app / routes.ts

Sie haben Ihre "+ WeatherComponent " importiert und dann eine Variable " allAppRoutes " erstellt, die ein Array vom Typ " Routes " ist. Das Array " allAppRoutes +" enthält Routendefinitionsobjekte, die jeweils einen URL-Pfad und die zuzuordnende Komponente enthalten. Sie haben festgelegt, dass jedes Mal, wenn Sie zur Stamm-URL (") gehen, zur" + WeatherComponent + "navigiert werden soll.

Ihre endgültige "+ routes.ts +" - Datei sieht folgendermaßen aus:

src / app / routes.ts

Sie müssen diese Routen nun zu Ihrer Hauptdatei "+ app.module.ts " hinzufügen. Sie müssen das soeben erstellte Array " all App Routes" an ein Angular-Modul mit dem Namen "+ RouterModule" übergeben. Das + RouterModule + initialisiert und konfiguriert den Router (der für die Ausführung der gesamten App-Navigation verantwortlich ist) und stellt ihm die Routing-Daten von + allAppRoutes + zur Verfügung. Fügen Sie den folgenden hervorgehobenen Inhalt hinzu:

src / app / app.module.ts

In diese Datei haben Sie das Array "+ RouterModule " und " allAppRoutes " von Routenobjekten importiert. Anschließend haben Sie das Array " allAppRoutes +" an das RouterModule übergeben, damit Ihr Router weiß, wohin Ihre URLs weitergeleitet werden sollen.

Zuletzt müssen Sie das Routing selbst aktivieren. Öffnen Sie die Datei "+ app.component.ts ". Es gibt eine " templateUrl" -Eigenschaft, die den HTML-Code für diese bestimmte Komponente angibt: ". / App.component.html". Öffnen Sie diese Datei " src / app / app.component.html " und Sie werden sehen, dass sie den gesamten HTML-Code für Ihre Seite " localhost: 4200 +" enthält.

Entfernen Sie den gesamten HTML-Code in "+ app.component.html +" und ersetzen Sie ihn durch:

src / app / app.component.html

Das Tag "+ router-outlet " aktiviert das Routing und ordnet die vom Benutzer im Browser eingegebene URL der Routendefinition zu, die Sie zuvor in der Datei " routes.ts " unter der Variablen " allAppRoutes " erstellt haben. Der Router zeigt die Ansicht dann im HTML an. In diesem Lernprogramm wird der Code " weather.component.html" direkt nach dem Tag "+ <router-outlet> </ router-outlet> +" angezeigt.

Wenn Sie nun zu "+ http: // localhost: 4200 +" navigieren, wird auf Ihrer Seite "Wetter funktioniert!" Angezeigt.

Sie haben das Routing in Ihrer Anwendung eingerichtet. Als Nächstes erstellen Sie Ihren Formular- und Detailabschnitt, in dem Sie nach einem Speicherort suchen und die zugehörigen Details anzeigen können.

Sie verwenden Bootstrap als Gerüst für Ihre Anwendungsansicht. Bootstrap ist nützlich, um vorgefertigte, reaktionsschnelle Websites zu erstellen, die sich an jedes Gerät (Handy, Tablet oder Desktop) anpassen lassen. Dies wird erreicht, indem jede Zeile auf einer Webseite als zwölf Spalten breit behandelt wird. Auf einer Webseite ist eine Zeile einfach eine Linie von einem Ende der Seite zum anderen. Dies bedeutet, dass der Inhalt jeder Seite in dieser Zeile enthalten sein muss und zwölf Spalten entsprechen muss. Wenn es nicht zwölf Spalten entspricht, wird es in eine andere Zeile verschoben. In Bootstraps Rastersystem gibt es beispielsweise eine Zeile mit zwölf Spalten, die in zwei Abschnitte zu sechs Spalten unterteilt ist, und die nächste Zeile mit zwölf Spalten, die in drei Abschnitte zu vier Spalten unterteilt ist.

In der Bootstrap documentation können Sie mehr über dieses Grid-System erfahren.

Sie teilen Ihre Seite in zwei Abschnitte mit sechs Spalten auf, wobei die linke Spalte Ihr Suchformular und die rechte die Wetterdetails enthält.

Öffnen Sie "+ src / app / weather / weather.component.html ", um auf Ihren " WeatherComponent +" - HTML-Code zuzugreifen. Löschen Sie den Absatz, der sich derzeit in der Datei befindet, und fügen Sie dann den folgenden Code hinzu:

src / app / wetter / wetter.komponente.html

Sie haben ein "+ <div> " mit der Klasse " container" erstellt, um all Ihren Inhalt aufzunehmen. Anschließend haben Sie eine Zeile erstellt, die Sie in zwei Abschnitte mit jeweils sechs Spalten unterteilt haben. Auf der linken Seite finden Sie Ihr Suchformular und auf der rechten Seite Ihre Wetterdaten.

Um Ihr Formular zu erstellen, arbeiten Sie in der ersten Spalte "+ col-md-6 ". Sie können auch eine Schaltfläche hinzufügen, die an APIXU sendet, was Sie in Ihr Formular eingegeben haben. Daraufhin werden die angeforderten Wetterdaten zurückgegeben. Identifizieren Sie dazu die erste Klasse " col-md-6 " und fügen Sie den folgenden hervorgehobenen Inhalt unter das Tag " <h3> +" ein:

src / app / wetter / wetter.komponente.html

Sie haben Ihr Formular hinzugefügt und eine Klasse "+ Formulargruppe" hinzugefügt, die Ihre Suchleiste enthält. Sie haben auch Ihre Schaltfläche erstellt, um nach dem Wetter zu suchen. In Ihrem Browser sieht Ihre Wetter-App-Seite folgendermaßen aus:

image: https://assets.digitalocean.com/articles/angular_bootstrap/step5.png [Bisheriges Bild der Wetter-App-Seite]

Dies sieht ein wenig kompakt aus, sodass Sie CSS hinzufügen können, um die Seite mit einem besseren Abstand zu gestalten. Der Hauptvorteil von Bootstrap besteht darin, dass es Abstandsklassen enthält, die Sie zu Ihrem HTML-Code hinzufügen können, ohne dass Sie zusätzliches CSS schreiben müssen. Wenn Sie jedoch ein zusätzliches CSS verwenden möchten, das von den Standardklassen von Bootstrap nicht abgedeckt wird, können Sie bei Bedarf ein eigenes CSS erstellen. Für dieses Tutorial verwenden Sie die Standardklassen von Bootstrap.

Für jedes + <h3> + -Tag fügen Sie die + .my-4 + Bootstrap-CSS-Klasse hinzu. Das + m + legt den Rand für das Element fest, das + y + legt sowohl + Rand-oben + als auch + Rand-unten + für das Element fest und schließlich gibt + 4 + den Betrag des hinzuzufügenden Randes an. Weitere Informationen zu den verschiedenen Abstandsarten und -größen finden Sie unter here. Fügen Sie in Ihrer Datei "+ weather.component.html" den folgenden hervorgehobenen Inhalt hinzu, um die aktuellen "+ <h3> +" - Tags zu ersetzen:

src / app / wetter / wetter.komponente.html

Laden Sie die Seite in Ihrem Browser neu und Sie werden feststellen, dass Sie mehr Abstand haben.

image: https: //assets.digitalocean.com/articles/angular_bootstrap/step5b.png [Bild des auf die Wetter-App angewendeten Abstands]

Sie haben Ihr Formular sowie den Abschnitt erstellt, in dem die Informationen angezeigt werden, die Sie von der APIXU-API erhalten. Als Nächstes verbinden Sie Ihr Formular, um Ihren Standort korrekt eingeben zu können.

In Angular gibt es zwei Möglichkeiten, Formulare für Benutzereingaben in Ihrer Anwendung zu erstellen: reaktiv oder vorlagengesteuert. Obwohl sie das gleiche Ergebnis erzielen, behandelt jeder Formulartyp die Verarbeitung von Benutzereingabedaten unterschiedlich.

Bei reaktiven Formularen erstellen Sie eine Liste der verschiedenen Elemente Ihres Formulars in Ihrer Datei + .component.ts +. Anschließend verbinden Sie sie mit Ihrem erstellten HTML-Formular in der entsprechenden Datei + .component.html +. Dies ist nur in eine Richtung möglich. Das heißt, Daten fließen von Ihrem HTML-Code in Ihre Datei "+ .component.ts +". Es gibt keinen bidirektionalen Datenfluss.

Mit vorlagengesteuerten Formularen erstellen Sie Ihr Formular wie in normalem HTML. Mithilfe von Direktiven wie "+ ngModel +" können Sie dann entweder Einweg- oder Zweiweg-Datenbindungen von Ihrem HTML-Code zurück zu Ihrem Datenmodell in Ihrer Komponente und umgekehrt erstellen.

Bei jedem Ansatz gibt es Stärken und Schwächen, aber im Allgemeinen sind reaktive Formen aus folgenden Gründen vorzuziehen:

Trotz dieser Stärken können reaktive Formen manchmal komplexer zu implementieren sein. Dies kann dazu führen, dass Entwickler mehr Code schreiben als bei einem vorlagengesteuerten Formular. Https://angular.io/guide/reactive-forms[Angulars offizielles Handbuch] bietet einen guten Ausgangspunkt, um einen umfassenden Überblick über beide Formulartypen und die besten Anwendungsfälle zu erhalten. In diesem Lernprogramm verwenden Sie reaktive Formulare.

Um ein reaktives Formular zu verwenden, öffnen Sie die Datei "+ app.module.ts ". Als nächstes importieren Sie das ` ReactiveFormsModule +`, indem Sie den Import zum Anfang der Datei deklarieren.

src / app / app.module.ts

Fügen Sie abschließend das "+ ReactiveFormsModule +" zu Ihrer Liste der Importe hinzu.

src / app / app.module.ts

Nach diesen Code-Hinzufügungen sieht Ihre "+ app.module.ts +" folgendermaßen aus:

src / app / app.module.ts

Nachdem Sie beide Zeilen hinzugefügt haben, öffnen Sie die Datei "+ weather.component.ts " und importieren Sie die Klassen " FormBuilder " und " FormGroup +".

src / app / weather / weather.component.ts

Erstellen Sie nun eine Variable in Ihrer Datei "+ weather.component.ts ", die auf Ihre " FormGroup +" verweist:

Wetter.Komponente.ts

Jedes Mal, wenn Sie eine Aktion in Ihrem Formular ausführen möchten, verweisen Sie über die Variable "+ weatherSearchForm " darauf. Sie fügen jetzt den " FormBuilder " -Import in Ihren " Konstruktor +" ein, damit Sie ihn in Ihrer Komponente verwenden können.

Wetter.Komponente.ts

Durch das Hinzufügen von "+ formBuilder " zum " Konstruktor " wird eine Instanz der Klasse " FormBuilder +" erstellt, mit der Sie sie in Ihrer Komponente verwenden können.

Sie können nun Ihre "+ FormGroup " und die zugehörigen Werte in der Datei " weather.component.ts " erstellen. Wenn Ihr Formular mehrere Eingabeoptionen enthält, sollten Sie es in eine " FormGroup " einschließen. In diesem Tutorial haben Sie nur eine (Ihre Standort-Eingabe), aber Sie werden die " FormGroup +" trotzdem zum Üben verwenden.

Es ist wichtig, dass Ihr Formular zur Verwendung bereit ist, wenn Sie zu Ihrer Komponente navigieren. Da Sie ein reaktives Formular verwenden, müssen Sie zuerst die Elementstruktur innerhalb des Formulars erstellen, bevor Sie es an den HTML-Code binden. Um dies zu erreichen, müssen Sie sicherstellen, dass Sie Ihre Formularelemente im Hook "+ ngOnInit " in Ihrer " WeatherComponent " erstellen. Die Methode ` ngOnInit +` wird einmal bei der Initialisierung einer Komponente ausgeführt und führt alle von Ihnen angegebenen Logik aus, die ausgeführt werden muss, bevor die Komponente verwendet werden kann.

Sie müssen daher Ihr Formular erstellen, bevor Sie die Bindung an HTML abschließen können.

In Ihrer "+ WeatherComponent " initialisieren Sie das Formular innerhalb des " ngOnInit +" - Hooks:

src / app / weather / weather.component.ts

Sie haben den ersten Teil des Formulars gemäß dem reaktiven Formularstil erstellt: Definieren Sie Ihre Formularkomponenten in der Datei + weather.component.ts +. Sie haben eine Gruppe der zusammengesetzten Elemente Ihres Formulars erstellt (derzeit haben Sie ein Element, "+ location "). Mit dem Array ` [''] +` können Sie einige zusätzliche Optionen für Ihre Formulareingaben angeben, z. B .: Einige Daten vorab auffüllen und Validatoren zum Validieren Ihrer Eingabe verwenden. Für dieses Lernprogramm benötigen Sie keines von diesen, sodass Sie es einfach leer lassen können. Weitere Informationen darüber, was Sie in eine Elementeigenschaft übergeben können, finden Sie unter here.

Sie müssen noch zwei Dinge tun, bevor Ihr Formular vollständig ist. Öffnen Sie zuerst Ihre Datei + weather.component.html. Sie müssen dem Formular eine Eigenschaft "+ [formGroup] " zuweisen. Diese Eigenschaft entspricht der Variablen, die Sie gerade in Ihrer Datei " weather.component.ts " deklariert haben: " weatherSearchForm ". Zweitens müssen Sie Ihr " location n" -Element (deklariert in Ihrer "+ weather.component.ts" -Datei) an Ihren HTML-Code binden. Fügen Sie in + weather.component.html den folgenden hervorgehobenen Inhalt hinzu:

src / app / wetter / wetter.komponente.html

Sie haben die Eigenschaft "+ [formGroup] " hinzugefügt und Ihr Formular an HTML gebunden. Sie haben auch die Eigenschaft " formControlName " hinzugefügt, die angibt, dass dieses bestimmte " input " - Element an das " location " - Element in Ihrer " weather.component.ts +" - Datei gebunden ist.

Speichern Sie Ihre Datei und kehren Sie zu Ihrem Browser zurück. Sie werden feststellen, dass Ihre App genauso aussieht. Dies bedeutet, dass Ihr Formular korrekt verkabelt ist. Wenn zu diesem Zeitpunkt Fehler auftreten, führen Sie die vorherigen Schritte erneut aus, um sicherzustellen, dass in Ihren Dateien alles korrekt ist.

Als Nächstes verbinden Sie Ihre Schaltfläche, um Eingabedaten in Ihr Formular zu übernehmen.

In diesem Schritt verbinden Sie Ihre Suchschaltfläche mit Ihrem Formular, um die Eingabedaten des Benutzers zu akzeptieren. Sie erstellen auch das Gerüst für die Methode, mit der die Eingabedaten des Benutzers schließlich an die APIXU-Wetter-API gesendet werden.

Wenn Sie sich Ihren Code in + weather.component.html noch einmal ansehen, können Sie feststellen, dass Ihre Schaltfläche den Typ` + submit` hat:

src / app / wetter / wetter.komponente.html

Dies ist ein Standard-HTML-Wert, der Ihre Formularwerte an eine Funktion sendet, auf die Sie reagieren können.

In Angular geben Sie diese Funktion im Ereignis + (ngSubmit) + an. Wenn Sie in Ihrem Formular auf die Schaltfläche klicken, wird das Ereignis "+ (ngSubmit) " ausgelöst, sofern diese den Typ " submit +" hat. Anschließend wird die ihm zugewiesene Methode aufgerufen. In diesem Fall möchten Sie den von Ihrem Benutzer eingegebenen Speicherort abrufen und an die APIXU-API senden können.

Sie werden zuerst eine Methode erstellen, um damit umzugehen. Erstellen Sie in "+ weather.component.ts " eine Methode " sendToAPIXU () +", die ein Argument akzeptiert: die Werte, die Sie in Ihr Formular eingegeben haben. Fügen Sie der Datei den folgenden hervorgehobenen Inhalt hinzu:

src / app / weather / weather.component.ts

Fügen Sie als Nächstes das Ereignis "+ ngSubmit " zu Ihrem HTML-Code hinzu und übergeben Sie die Werte Ihres übermittelten Formulars an die Methode " sendToAPIXU () +":

weather.component.html

Sie haben das Ereignis "+ ngSubmit " zu Ihrem Formular hinzugefügt, Ihre Methode, die Sie beim Senden Ihres Formulars ausführen möchten, verknüpft und die Werte Ihres " weatherSearchForm " als Argument an Ihre Handlermethode übergeben (" weatherSearchForm"). value + `). Sie können dies nun testen, indem Sie "+ console.log " verwenden, um Ihre " formValues ​​" auszudrucken. Fügen Sie in Ihrer " sendToAPIXU () " -Methode den folgenden hervorgehobenen Inhalt zu " weather.component.ts +" hinzu:

Wetter.Komponente.ts

Rufen Sie Ihren Browser auf und öffnen Sie Ihre Konsole, indem Sie mit der rechten Maustaste auf eine beliebige Stelle auf Ihrer Website klicken und dann auf * Inspect Element * klicken. Im folgenden Fenster wird eine Registerkarte mit dem Namen * Console * angezeigt. Geben Sie * London * in Ihr Formular ein. Wenn Sie auf die Schaltfläche "Nach Wetter suchen" klicken, wird ein Objekt mit Ihrem Standort angezeigt.

image: https: //assets.digitalocean.com/articles/angular_bootstrap/step7.png [Ausgabe von der Konsole nach Aktualisierung der sendToAPIXU-Methode]

Ihre Ausgabe von der Konsole ist ein JSON-Objekt "+ {location:" London "} ". Wenn Sie auf Ihren Standortwert zugreifen möchten, können Sie dazu auf " formValues.location " zugreifen. In ähnlicher Weise würden Sie, wenn Sie andere Eingaben in Ihrem Formular hätten, " .location +" gegen andere Elementnamen tauschen, die Sie hatten.

Die Taste ist jetzt verkabelt und kann Eingaben korrekt empfangen. Als Nächstes veranlassen Sie die Methode "+ sendToAPIXU () +", eine HTTP-Anforderung an die APIXU-API zu senden.

Die APIXU-API akzeptiert Standortinformationen, durchsucht die aktuellen Wetterdetails nach diesem Standort und gibt sie an den Client zurück. Sie ändern Ihre App jetzt so, dass sie Standortdaten an die API sendet, die Antwort erhält und dann die Ergebnisse auf Ihrer Seite anzeigt.

Um HTTP-Anfragen in Angular zu stellen, müssen Sie das + HttpClientModule + importieren. Öffnen Sie Ihr + src / app / app.module.ts + und fügen Sie die folgenden hervorgehobenen Zeilen hinzu:

src / app / app.module.ts

Als Nächstes müssen Sie den Code schreiben, um den HTTP-Aufruf an die APIXU-API durchzuführen. Es wird empfohlen, einen Angular service zu erstellen, um HTTP-Anforderungen zu stellen. Die Trennung von Bedenken ist der Schlüssel in jeder App, die Sie erstellen. Mit einem Service können Sie alle HTTP-Anforderungen, die Ihre App macht, in eine Datei verschieben, die Sie dann in jeder von Ihnen erstellten Datei + .component.ts + aufrufen können. Sie können diese HTTP-Anforderungen "legal" in die spezifische "+ .component.ts +" - Datei schreiben, dies ist jedoch keine bewährte Methode. Möglicherweise stellen Sie fest, dass einige Ihrer Anforderungen komplex sind und dass Sie nach dem Empfang Ihrer Daten einige Nachbearbeitungsschritte ausführen müssen. Einige Ihrer HTTP-Anforderungen werden möglicherweise von mehreren verschiedenen Komponenten in Ihrer App verwendet, und Sie möchten die gleiche Methode nicht mehrmals schreiben.

Führen Sie in einem neuen Terminalfenster oder durch Stoppen des Servers in Ihrer aktuellen Terminalsitzung den folgenden Befehl aus, um einen Dienst mit dem Namen "+ apixu +" zu erstellen:

Die Ausgabe sieht folgendermaßen aus:

Der Befehl hat die Servicedatei (+ apixu.service.ts +) und eine Testdatei (+ apixu.service.spec.ts +) erstellt.

Sie müssen diesen Dienst nun als Provider in Ihre Datei "+ app.module.ts " einfügen. Auf diese Weise können Sie es in Ihrer App verwenden. Öffnen Sie diese Datei und importieren Sie zuerst den ` ApixuService +`:

src / app / app.module.ts

Fügen Sie als nächstes den neu importierten "+ ApixuService " als Provider in den " providers +" -Block ein:

Datei src / app / app.module.ts

Wenn Sie in Angular einen von Ihnen erstellten Dienst verwenden möchten, müssen Sie diesen Dienst als Anbieter in Ihrer Datei + module.ts + angeben. In diesem Fall haben Sie es in Ihrer gesamten Anwendung in "+ app.module.ts +" als Anbieter angegeben.

Öffnen Sie zum Schluss die Datei + src / app / apixu.service.ts +. Sie sehen den Code, den Sie benötigen, um einen Service zu erstellen: Zuerst den Import der Schnittstelle "+ Injectable " von Angular; dann die Tatsache, dass der Service mit dem Root-Injektor " providedIn " (für die gesamte Anwendung) erfolgen soll; und dann das _decorating_ (dies bedeutet effektiv die Angabe) Ihres Dienstes als ` @ Injectable +`.

src / app / apixu.service.ts

Das Dekorieren des Dienstes als "+ @ Injectable " ermöglicht es Ihnen, diesen Dienst innerhalb des Konstruktors in " weather.component.ts +" einzufügen, damit Sie ihn in Ihrer Komponente verwenden können.

Wenn Sie Ihre Anwendung gestoppt haben, starten Sie sie neu, indem Sie Folgendes ausführen:

Wie bereits erwähnt, muss Ihr Dienst HTTP-Anforderungen an die APIXU-API senden und das "+ HttpClientModule " in die Datei " app.module.ts " importieren, um HTTP-Anforderungen in der gesamten Anwendung zu senden. Sie müssen außerdem die Bibliothek " HttpClient " in die Datei " apixu.service.ts " importieren, um HTTP-Anforderungen an die APIXU-API aus der Datei " apixu.service.ts " selbst zu senden. Öffnen Sie die Datei " apixu.service.ts +" und fügen Sie den folgenden hervorgehobenen Inhalt hinzu:

src / app / apixu.service.ts

Jetzt müssen Sie eine Methode schreiben, + getWeather () +, die einen Parameter enthält: location. Diese Methode sendet eine API-Anforderung an APIXU und gibt die abgerufenen Standortdaten zurück.

Dafür benötigen Sie den bereitgestellten API-Schlüssel, wenn Sie sich für die APIXU-API anmelden. Wenn Sie sich bei https://www.apixu.com [APIXU] anmelden, gelangen Sie zum Dashboard:

image: https://assets.digitalocean.com/articles/angular_bootstrap/step8.png [APIXU Dashboard]

Ihr Schlüssel wird angezeigt, und darunter befinden sich Links zur API-URL, wobei Ihr Schlüssel sowohl für das * aktuelle Wetter * als auch für das * prognostizierte Wetter * bereits ausgefüllt ist. Kopieren Sie den HTTPS-Link für die * Current Weather * -Details.

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

Über diese URL erhalten Sie aktuelle Wetterdetails für Paris. Sie möchten stattdessen in der Lage sein, das "+ location " aus Ihrem Formular in den " & q = " - Parameter zu übergeben. Entfernen Sie daher " Paris " aus der URL, wenn Sie diese zu Ihrer " apixu.service.ts +" - Datei hinzufügen:

src / app / apixu.service.ts

Sie haben jetzt "+ HttpClient " importiert und in den Konstruktor eingefügt, damit Sie ihn verwenden können. Sie haben auch eine Methode " getWeather () " erstellt, die einen " location " - Parameter verwendet und eine " GET " -Anforderung an Ihre angegebene URL sendet. Sie haben den Parameter " & q = " leer gelassen, da Sie diesen Speicherort direkt über den Parameter " Speicherort +" in der Methode angeben werden. Zuletzt haben Sie die Daten an denjenigen zurückgegeben, der die Methode aufgerufen hat.

Ihr Service ist jetzt abgeschlossen. Sie müssen Ihren Dienst in Ihre "+ WeatherComponent " importieren, ihn in Ihren Konstruktor einfügen, um ihn zu verwenden, und dann Ihre " sendToAPIXU () " - Methode aktualisieren, um Ihren Standort an Ihren neu erstellten Dienst zu senden. Öffnen Sie die Datei " weather.component.ts +", um diese Aufgaben zu erledigen, indem Sie den hervorgehobenen Inhalt hinzufügen:

src / app / weather.component.ts

Sie haben die vorherige Anweisung "+ console.log " in Ihrer Methode " sendToAPIXU () " entfernt und mit diesem Inhalt aktualisiert. Sie übergeben jetzt Ihren Standort von Ihrem Formular an die zuvor erstellte Methode " sendToAPIXU () ". Anschließend haben Sie diese Daten an die Methode " getWeather () " von " ApixuService " übergeben, die anschließend eine HTTP-Anforderung an die API mit diesem Speicherort gesendet hat. Anschließend haben Sie die Antwort abonniert und in diesem Beispiel diese Daten in der Konsole protokolliert. Sie müssen die subscribe-Methode immer für eine HTTP-Anfrage aufrufen, da die Anfrage erst beginnt, wenn Sie die Antwort " Observable +" lesen können, die Sie zurückerhalten. Observables sind eine Methode zum Senden von Nachrichten zwischen Herausgebern und Abonnenten, mit der Sie jede Art von Daten hin und her übertragen können. Sie können keine Daten von einem Observable empfangen, bis ein Abonnent es abonniert hat, da es vor diesem Zeitpunkt nicht ausgeführt wird.

Öffnen Sie die Konsole in Ihrem Browser erneut. Geben Sie nun * London, UK * ein und klicken Sie auf * Wetter suchen *. Wenn Sie auf die Registerkartenpfeile klicken, wird eine Liste der Wetterdetails in der Konsole angezeigt.

image: https://assets.digitalocean.com/articles/angular_bootstrap/step8b.png [Konsolenausgabe nach aktuellem Wetter in London, Großbritannien]

Die Ausgabe zeigt JSON-Objekte mit allen benötigten Wetterinformationen. Sie haben zwei Objekte zurückgegeben: ein "+ aktuelles" Objekt und ein "+ Ort" Objekt. Ersteres enthält die gewünschten Wetterdaten und letzteres die Angaben zu Ihrem Standort.

Jetzt werden Ihre Wetterdaten erfolgreich in der Konsole angezeigt. Um dieses Tutorial zu beenden, zeigen Sie diese Wetterdetails in Ihrem HTML-Code an.

Das Anzeigen der Ergebnisse in der Konsole ist ein guter erster Schritt, um zu überprüfen, ob alles funktioniert. Sie möchten jedoch eventuell die Wetterdaten in HTML für Ihre Benutzer anzeigen. Dazu erstellen Sie eine Variable, in der Ihre zurückgegebenen Wetterdaten gespeichert werden, und zeigen diese dann mithilfe von Interpolation in Ihrem HTML-Code an.

Durch Interpolation können Sie Daten in Ihren Ansichten anzeigen. Dazu müssen Sie eine Eigenschaft über den Stil "+ {{}} +" binden, um diese Eigenschaft in Ihrem HTML-Code anzuzeigen.

Öffnen Sie die Datei "+ weather.component.ts " und erstellen Sie eine Variable mit dem Namen " weatherData ", der Sie die von der API abgerufenen JSON-Daten zuweisen. Entfernen Sie außerdem den Code, der sich zuvor in den Klammern " .subscribe () +" befand, und ersetzen Sie ihn durch den folgenden hervorgehobenen Code:

src / app / weather / weather.component.ts

Sie haben die Variable "+ weatherData " erstellt und erklärt, dass sie Daten vom Typ " any " enthalten kann. Anschließend haben Sie die Daten, die Sie von Ihrem API-Aufruf erhalten, dieser Variablen zugewiesen. Schließlich haben Sie eine Anweisung " console.log () " hinzugefügt, um zu überprüfen, ob " weatherData +" alle Ihre abgerufenen Informationen enthält.

Ihre + weather.component.ts + Datei sollte in diesem Stadium so aussehen:

src / app / weather / weather.component.ts

Wenn Sie zurückgehen und erneut nach London, UK suchen, wird Ihr Objekt wie gewohnt auf der Konsole ausgedruckt. Nun möchten Sie diese Daten in Ihrem HTML-Code anzeigen. Wenn Sie das aktuelle Objekt aus den abgerufenen Wetterdaten in der Konsole untersuchen, sehen Sie Werte wie "+ condition", "+ feelslike_c", "+ feelslike_f", "+ temp_c", "+ temp_f". und so weiter Sie werden alle fünf dieser Eigenschaften nutzen.

Öffnen Sie die Datei "+ weather.component.html" erneut und fügen Sie die Untertitel zu den Daten hinzu, die Sie anzeigen möchten. Sie fügen die folgenden + <p> + Tags in das zweite + col-md-6 + ein:

src / app / wetter / wetter.komponente.html

Als Nächstes fügen Sie die Daten, die Sie von Ihrem JSON-Objekt erhalten haben, zu Ihrem HTML-Code hinzu:

weather.component.html

Sie haben einen Operator "? +" Verwendet, als Sie Daten aus Ihrer Variablen " weatherData +" in Ihrem HTML-Code abgerufen haben. Dieser Operator wird Elvis Operator genannt.

Da Sie einen HTTP-Anruf tätigen, stellen Sie eine asynchrone Anfrage. Sie werden diese Daten irgendwann zurückbekommen, aber es wird keine sofortige Antwort sein. Angular füllt Ihren HTML-Code jedoch weiterhin mit den Daten aus, die Sie in der Variablen "+ weatherData " angegeben haben. Wenn Sie bis zu dem Zeitpunkt, an dem Angular mit dem Auffüllen Ihrer Absätze beginnt, noch keine Daten erhalten haben, wird ein Fehler angezeigt, der besagt, dass Angular diese Daten nicht finden kann. Beispielsweise wird " .current " oder " .location +" als undefiniert angezeigt.

Der Elvis Operator ist ein sicherer Navigator und verhindert dies. Angular wird angewiesen zu warten und zu prüfen, ob + weatherData + zuerst definiert wurde, bevor fortgefahren wird und diese Daten im HTML angezeigt werden. Sobald + weatherData + alle seine Informationen hat, aktualisiert Angular Ihre Bindungen und zeigt Ihre Daten wie gewohnt an.

Die endgültige Datei "+ weather.component.ts +" sieht folgendermaßen aus:

weather.component.html

Sie haben das Muster des zurückgegebenen JSON-Wetterobjekts befolgt, um die gewünschten Daten auszugeben. Speichern Sie Ihre Datei, kehren Sie zu Ihrem Browser zurück und geben Sie * London, UK * ein. Die Wetterdaten werden auf der rechten Seite angezeigt.

image: https://assets.digitalocean.com/articles/angular_bootstrap/step9.png [Fertige App mit Wetterdaten aus London, Großbritannien]

Probieren Sie es an verschiedenen Orten aus, z. B .: * San Francisco, USA *, * Dakar, Senegal * und * Honolulu, Hawaii *. Sie sehen die jeweiligen Wetterdaten für alle diese Standorte.

Sie haben eine Wetter-App mit Angular, Bootstrap und der APIXU-API erstellt. Sie haben ein Angular-Projekt von Grund auf neu eingerichtet. Dabei haben Sie die bewährten Angular-Methoden befolgt und gleichzeitig sichergestellt, dass Ihre Anwendung gut gestaltet und entsprechend eingerichtet ist.

Angular ist ein fortschrittliches Framework, mit dem Sie problemlos kleine bis hin zu großen, komplexen Webanwendungen erstellen können. Angular hat wie jedes Framework eine Lernkurve, aber kleine Projekte wie dieses können Ihnen helfen, es schnell zu lernen und produktiv zu nutzen.

Eine weitere Funktion, die Sie zu Ihrer Anwendung hinzufügen sollten, ist handling errors aus Ihren HTTP-Anforderungen. Zum Beispiel, wenn Sie einen ungültigen Ort eingeben. Eine weitere Verbesserung wäre die Anzeige unterschiedlicher Bilder, wenn die Temperatur zwischen bestimmten Schwellenwerten liegt. Sie können mit Angular auch andere Anwendungen mit anderen APIs erstellen.

Möglicherweise möchten Sie auch NgBootstrap verwenden, einen speziellen Bootstrap-Typ, der für Angular erstellt wurde. Auf diese Weise können Sie alle Standard-Bootstrap-JavaScript-Widgets sowie einige spezielle Widgets verwenden, die nicht in der speziell für Angular angepassten Standardinstallation enthalten sind.

Der vollständige Code für dieses Tutorial ist unter GitHub verfügbar.