Deutsch

AngularJS-Tutorial

AngularJS-Anwendungen

AngularJS - Wetteranwendung

Hallo da draußen, zukünftige Codingsuperstars! Heute machen wir uns auf eine aufregende Reise, um eine Wetteranwendung mit AngularJS zu erstellen. Keine Sorge, wenn Sie noch nie eine Zeile Code geschrieben haben – ich werde Ihr freundlicher Guide durch dieses Abenteuer sein, genau wie ich es für unzählige Schüler in meinen Jahren als Lehrer getan habe. Also, rollen wir die Ärmel hoch und tauchen ein!

AngularJS - Weather Application

Was ist AngularJS?

Bevor wir mit der Erstellung unserer Wetter-App beginnen, lassen Sie uns über AngularJS sprechen. Stellen Sie sich vor, Sie bauen ein Haus. AngularJS ist wie das Gerüst dieses Hauses – es gibt Ihrer Webanwendung Struktur und Unterstützung. Es ist ein leistungsstarkes JavaScript-Framework, das uns dabei hilft, dynamische, einseitige Anwendungen mit Leichtigkeit zu erstellen.

Einrichtung unseres Projekts

Schritt 1: AngularJS einbinden

Zuerst müssen wir AngularJS in unser Projekt einbinden. Wir tun dies, indem wir einen Script-Tag zu unserer HTML-Datei hinzufügen:

<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
<title>Meine Wetter-App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Unsere App kommt hier hin -->
<script src="app.js"></script>
</body>
</html>

Sehen Sie das ng-app="weatherApp" im <html>-Tag? Das sagt AngularJS, "Hey, hier lebt unsere App!"

Schritt 2: Unsere App erstellen

Nun erstellen wir unsere app.js-Datei:

var app = angular.module('weatherApp', []);

Diese Zeile ist so, als würden Sie sagen, "Hallo, AngularJS! Bitte erstellen Sie eine neue App mit dem Namen 'weatherApp'." Einfach, oder?

Erstellung unserer Wetter-App

Schritt 3: einen Controller erstellen

In AngularJS sind Controller der Ort, an dem wir das Verhalten unserer App platzieren. Lassen Sie uns einen erstellen:

app.controller('WeatherController', function($scope, $http) {
$scope.weather = {};

$scope.getWeather = function() {
var apiKey = 'YOUR_API_KEY';
var city = $scope.city;
var url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

$http.get(url)
.then(function(response) {
$scope.weather = response.data;
});
};
});

Wow, das ist viel! Lassen Sie uns das zusammenbrechen:

  1. Wir erstellen einen Controller namens 'WeatherController'.
  2. $scope ist, wie wir Daten zwischen unserem Controller und unserer Ansicht übergeben.
  3. $http ist die Methode von AngularJS, um HTTP-Anfragen zu stellen.
  4. Wir erstellen eine Funktion namens getWeather, die Wetterdaten abruft, wenn sie aufgerufen wird.

Schritt 4: Unsere Ansicht erstellen

Nun aktualisieren wir unsere HTML-Datei, um unseren Controller zu verwenden:

<body ng-controller="WeatherController">
<h1>Wetter-App</h1>
<input type="text" ng-model="city" placeholder="Geben Sie Stadtname ein">
<button ng-click="getWeather()">Wetter abrufen</button>

<div ng-if="weather.main">
<h2>Wetter in {{weather.name}}</h2>
<p>Temperatur: {{weather.main.temp}}°C</p>
<p>Beschreibung: {{weather.weather[0].description}}</p>
</div>
</body>

Hier ist, was passiert:

  1. ng-controller="WeatherController" verbindet unsere Ansicht mit unserem Controller.
  2. ng-model="city" bindet die Eingabe an unsere $scope.city-Variable.
  3. ng-click="getWeather()" ruft unsere getWeather-Funktion auf, wenn der Button geklickt wird.
  4. ng-if="weather.main" zeigt nur die Wetterinformationen an, wenn wir Daten abgerufen haben.
  5. {{}} ist, wie wir Daten aus unserem $scope in der Ansicht anzeigen.

Es hübsch machen

Schritt 5: Ein bisschen Stil hinzufügen

Fügen wir ein wenig CSS hinzu, um unsere App ansprechend zu gestalten:

<style>
body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
input, button {
font-size: 16px;
padding: 5px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>

Alles zusammenfügen

Hier ist unsere vollständige index.html-Datei:

<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
<title>Meine Wetter-App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
/* CSS aus Schritt 5 kommt hier hin */
</style>
</head>
<body ng-controller="WeatherController">
<h1>Wetter-App</h1>
<input type="text" ng-model="city" placeholder="Geben Sie Stadtname ein">
<button ng-click="getWeather()">Wetter abrufen</button>

<div ng-if="weather.main">
<h2>Wetter in {{weather.name}}</h2>
<p>Temperatur: {{weather.main.temp}}°C</p>
<p>Beschreibung: {{weather.weather[0].description}}</p>
</div>
<script src="app.js"></script>
</body>
</html>

Und hier ist unsere vollständige app.js-Datei:

var app = angular.module('weatherApp', []);

app.controller('WeatherController', function($scope, $http) {
$scope.weather = {};

$scope.getWeather = function() {
var apiKey = 'YOUR_API_KEY';
var city = $scope.city;
var url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

$http.get(url)
.then(function(response) {
$scope.weather = response.data;
});
};
});

Fazit

Und voilà, Leute! Wir haben eine einfache, aber funktionale Wetter-App mit AngularJS erstellt. Denken Sie daran, dass das Lernen von Code wie das Lernen einer neuen Sprache ist – es erfordert Übung und Geduld. Lassen Sie sich nicht entmutigen, wenn Sie nicht alles sofort verstehen. Bleiben Sie experimentierfreudig, weiter coden und vor allem, haben Sie Spaß!

Hier ist eine Tabelle, die die Hauptbegriffe von AngularJS zusammenfasst, die wir verwendet haben:

Konzept Beschreibung
ng-app Definiert das Wurzelelement einer AngularJS-Anwendung
ng-controller Definiert den Controller für einen Abschnitt der Anwendung
ng-model Bindet eine Eingabe an eine Variable im Bereich
ng-click Definiert ein Klickereignis
ng-if Bedingte Darstellung eines Elements
{{}} Zeigt Daten aus dem Bereich in der Ansicht an
$scope Überträgt Daten zwischen Controller und Ansicht
$http Macht HTTP-Anfragen

Happy Coding, alle! Erinnern Sie sich daran, jeder Experte war einmal ein Anfänger. Bleiben Sie dran, und bevor Sie es wissen, werden Sie erstaunliche Anwendungen erstellen. Nun, machen Sie sich auf den Weg und erobern Sie die Welt des Codings!

Credits: Image by storyset

Vorheriges Tutorial:
AngularJS - Anwendungs-Sharing
Nächstes Tutorial:
AngularJS - Timer-Anwendung