Wetter App mit Angular 18.04

1. Einleitung

In der heutigen Softwareentwicklung gewinnen Frontend-Frameworks immer mehr an Bedeutung. Sie ermöglichen die Entwicklung von interaktiven, responsiven und skalierbaren Webanwendungen. Eines der beliebtesten Frameworks in diesem Bereich ist Angular. Angular ist ein Open-Source-Framework, das von Google entwickelt wurde und auf TypeScript basiert. Es bietet eine umfangreiche Sammlung von Werkzeugen und Funktionen, die es Entwicklern ermöglichen, komplexe Webanwendungen effizient zu erstellen.

In diesem Bericht werden wir uns auf Angular konzentrieren und eine Einführung in dieses Framework geben. Wir werden die Grundlagen von Angular, seine Architektur und einige der wichtigsten Funktionen und Konzepte behandeln. Außerdem werden wir ein Beispielprojekt erstellen, um die Verwendung von Angular in der Praxis zu demonstrieren. Das Projekt ist eine Weather App, mit der man grundlegende Wetterdaten einer Stadt angezeigt werden.

2. Grundlagen

([Abb.1]): Angular Logo

Was ist Angular?

Angular ist ein JavaScript-Framework zur Entwicklung von Webanwendungen. Es ermöglicht die Erstellung von Single-Page-Anwendungen (SPAs) und bietet eine strukturierte Herangehensweise an die Entwicklung von Frontend-Anwendungen. Angular basiert auf TypeScript, einer typsicheren Erweiterung von JavaScript, die statische Typprüfung und andere fortschrittliche Funktionen bietet.

Angular wurde von Google entwickelt und wurde erstmals im Jahr 2010 veröffentlicht. Seitdem hat es sich zu einem der beliebtesten Frameworks in der Webentwicklung entwickelt und wird von einer großen Community unterstützt. Angular wird aktiv weiterentwickelt und regelmäßig mit neuen Funktionen und Verbesserungen aktualisiert. (1)

Architektur von Angular

Die Architektur von Angular basiert auf dem Prinzip des komponentenbasierten Designs. Eine Angular-Anwendung besteht aus einer Hierarchie von Komponenten, die miteinander interagieren, um die Funktionalität der Anwendung zu implementieren. Jede Komponente besteht aus drei Hauptteilen: dem Template, der Klasse und den Metadaten.

Das Template definiert die Darstellung und Struktur der Benutzeroberfläche. Es ist in HTML geschrieben und kann Angular-spezifische Directives und Ausdrücke enthalten, um die Dynamik der Anwendung zu steuern. Die Klasse enthält den JavaScript-Code, der die Logik der Komponente implementiert. Hier werden Funktionen definiert, Daten verarbeitet und mit anderen Komponenten kommuniziert. Die Metadaten werden in einer speziellen Decorator-Syntax angegeben und enthalten zusätzliche Informationen über die Komponente, wie z.B. ihren Namen, ihre Abhängigkeiten und ihre Konfiguration. Neben Komponenten verwendet Angular auch Module, um den Code in logischen Einheiten zu organisieren. Ein Modul definiert eine Zusammenstellung von Komponenten, Directives, Services und weiterern Ressourcen. Module ermöglichen eine modulare und wiederverwendbare Codeorganisation und erleichtern die Skalierung und Wartung der Anwendung.

Wichtige Konzepte und Funktionen von Angular

Angular bietet eine Vielzahl von Funktionen und Konzepten, die die Entwicklung von Webanwendungen erleichtern. Im Folgenden werden einige der wichtigsten Konzepte und Funktionen von Angular vorgestellt:

Komponenten und Templates: Angular basiert auf dem Konzept der Komponenten, die einzelne Teile der Benutzeroberfläche repräsentieren. Jede Komponente besteht aus einem Template, das die Darstellung der Benutzeroberfläche definiert, und einer Klasse, die die Logik und das Verhalten der Komponente implementiert. Templates werden in HTML geschrieben und können Angular-spezifische Direktiven und Ausdrücke enthalten, um dynamische Inhalte, Ereignisbehandlung und Datenbindung zu ermöglichen.

Datenbindung: Angular bietet eine leistungsstarke Datenbindungsfunktion, die die Verknüpfung von Daten zwischen Komponenten und Templates ermöglicht. Es gibt verschiedene Arten der Datenbindung, wie z.B. die Interpolation, die Property-Bindung und die Event-Bindung. Die Datenbindung ermöglicht es, Daten nahtlos zwischen Komponenten auszutauschen und die Anwendung reaktionsfähig zu gestalten.

Directives: Angular-Directives sind spezielle HTML-Attribute oder Elemente, die das Verhalten von DOM-Elementen steuern. Es gibt verschiedene Arten von Directives, wie z.B. strukturelle Directives (z.B. ngIf und ngFor), die die Struktur des DOM-Baums ändern können, und Attributdirektiven (z.B. ngStyle und ngClass), die das Verhalten von DOM-Elementen anpassen können.

Services: Services sind in Angular eine wichtige Komponente, um die Geschäftslogik und die Datenverarbeitung zu trennen. Services sind in der Regel singletonartige Klassen, die von verschiedenen Komponenten verwendet werden können, um gemeinsame Funktionen und Daten bereitzustellen. Sie werden über die Dependency Injection in Komponenten und andere Services eingebunden.

Routing: Angular bietet eine leistungsstarke Routing-Funktionalität, mit der man zwischen verschiedenen Ansichten und Komponenten in einer Single-Page-Anwendung navigieren kann. Das Routing ermöglicht es, URLs mit bestimmten Komponenten zu verknüpfen und die Anwendungszustände zu verwalten. Es ermöglicht auch das Laden von Komponenten asynchron und das Implementieren von geschützten Routen.

Forms: Angular stellt eine umfangreiche Unterstützung für Formulare bereit, sowohl für Template-driven Forms als auch für Reactive Forms. Template-driven Forms verwenden eine deklarative Ansatzweise, bei der die Formulare im Template definiert werden. Reactive Forms hingegen basieren auf reaktiven Programmierkonzepten und ermöglichen eine präzise Steuerung des Formularverhaltens und der Validierung.

3. Versuchsdurchführung

Schritt 1: Erstellen des Angular-Projekts

Öffnen des Terminals. Navigieren zum gewünschten Speicherort für das Angular-Projekt. Folgender Befehl wird eingegeben, um ein neues Angular-Projekt mit dem Namen „weather-app“ zu erstellen:

ng new weather-app

Wechseln in das Projektverzeichnis

Schritt 2: Erstellen der Wetterkomponente

Der folgende Befehl erstellt eine neue Angular-Komponente mit dem Namen „weather“:

ng generate component weather

Öffnen der Datei weather.component.html und ersetzen des vorhandenen Inhalts durch folgenden Code:

<div>
  <h3>Enter City:</h3>
  <form #searchForm="ngForm" (ngSubmit)="searchWeather(searchForm)">
      <label>City: </label>
      <input ngModel name="city" #city="ngModel">
      <button type="submit">Search</button>
  </form>
  <p>
    Updated time in "{{realcity}}" is {{localtime}}.
  </p>
  <p>
    The exact temperature is {{temp}}°C.
  </p>
  <p>
    The feelslike temperature is {{feelslike}}°C.
  </p>
  <p>
    The humidity is {{humidity}}%.
  </p>
  <p>
    {{text}}
  </p>
  <img src="{{icon}}" alt="">
</div>

Öffnen der Datei weather.component.ts und ersetzen des vorhandenen Codes durch folgenden Code:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})

export class AppComponent{
  weather: any;
  temp: any;
  feelslike: any;
  localtime: any;
  realcity: any = ' ';
  humidity: any;
  text: any;
  icon: any = '';

  constructor(private fb: FormBuilder, private service: WeatherService) { }

  searchWeather(form: NgForm): void{
    console.log(form.value.city);
    this.service.searchWeatherByCity(form.value.city).subscribe({
      next: (res)=>{
      const weather: any = res;
      console.log(weather);
      this.localtime = weather.location.localtime;
      this.temp = weather.current.temp_c;
      this.feelslike = weather.current.feelslike_c;
      this.realcity = weather.location.name;
      this.humidity = weather.current.humidity;
      this.text = weather.current.condition.text;
      this.icon = weather.current.condition.icon;
      }
    });
  }
}

Ersetzen des Platzhalters YOUR_API_KEY durch unsren tatsächlichen API-Schlüssel für die Wetter-API von der Website des Wetteranbieters.

Schritt 3: Konfigurieren der HTTP-Client-Module

Öffnen der Datei app.module.ts und Hinzufügen des folgenden Imports:

import { HttpClientModule } from '@angular/common/http';

Hinzufügen von HttpClientModule zur imports-Liste im @NgModule-Dekorator:

  @NgModule({
declarations: [
  AppComponent
],
imports: [
  BrowserModule,
  ReactiveFormsModule,
  FormsModule,
  HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Schritt 4: Starten des Entwicklungsservers

Öffnen des Terminals (sicherstellen, dass wir uns im Projektverzeichnis befinden (weather-app)) und eingeben des folgenden Befehls: (2)

npm start

Warten Sie, bis der Build abgeschlossen ist und der Entwicklungsserver gestartet wurde. Sie sollten eine Meldung ähnlich wie die folgende sehen:

([Abb.2]): Screenshot der commands

Öffnen des Browsers und eingeben der URL http://localhost:4200/. Die Wetter-App sollte geladen werden und die Wetterdaten für Augsburg anzeigen.

([Abb.3]) Screenshot der finalen Anwendung

4. Fazit

Zusammenfassend kann gesagt werden, dass wir erfolgreich eine einfache Wetter-App mit Angular erstellt haben. Wir haben gelernt, wie man Angular-Komponenten erstellt, den HTTP-Client verwendet, um Daten von einer API abzurufen, und den Entwicklungsserver gestartet, um die App im Browser anzuzeigen. Angular bietet eine robuste Entwicklungsplattform mit umfangreichen Funktionen und einer aktiven Community, die es Entwicklern ermöglicht, leistungsstarke Webanwendungen zu erstellen. Die Verwendung von Angular ermöglicht eine strukturierte und modulare Entwicklung und bietet eine gute Unterstützung für die Erstellung reaktiver Benutzeroberflächen.

5. Literaturangaben

1

https://angular.io/

2

https://www.weatherapi.com/

Abbildungen:

Abb.1

: Quelle: https://de.m.wikipedia.org/wiki/Datei:Angular_full_color_logo.svg

Abb.2

: Quelle: Screenshot

Abb.3

: Quelle: Screenshot