AngularJS - LastFm-Anwendung: Erstellung einer Musikentdeckungs-App

Einführung

Hallo, angehende Programmierer! Heute werden wir eine aufregende Reise in die Welt der Webentwicklung antreten. Wir werden eine Musikentdeckungsanwendung mit AngularJS und der LastFm-API erstellen. Keine Sorge, wenn Sie noch nie zuvor kodiert haben – ich werde Sie jeden Schritt des Weges begleiten, genau wie ich es in den letzten Jahren für unzählige Schüler getan habe. Los geht's!

AngularJS - Lastfm Application

Was ist AngularJS?

Bevor wir mit dem Coden beginnen, lassen Sie uns verstehen, was AngularJS ist. Stellen Sie sich vor, Sie bauen ein Haus. AngularJS ist wie das Gerüst dieses Hauses – es bietet Struktur und Unterstützung für Ihre Webanwendung. Es ist ein leistungsstarkes JavaScript-Framework, das uns hilft, dynamische, einseitige Anwendungen mühelos zu erstellen.

Einrichtung unseres Projekts

Schritt 1: Erstellung der HTML-Struktur

Lassen Sie uns mit der grundlegenden Struktur unserer Anwendung beginnen. Öffnen Sie Ihren bevorzugten Texteditor und erstellen Sie eine neue Datei namens index.html. Hier ist, was wir hineinsetzen werden:

<!DOCTYPE html>
<html ng-app="lastfmApp">
<head>
<title>LastFm Music Discovery</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainController">
<h1>LastFm Music Discovery</h1>
<input type="text" ng-model="artistName" placeholder="Artistennamen eingeben">
<button ng-click="searchArtist()">Suchen</button>
<div ng-if="artist">
<h2>{{artist.name}}</h2>
<p>{{artist.bio.summary}}</p>
</div>
</body>
</html>

Lassen Sie uns das auseinandernehmen:

ng-app="lastfmApp": Dies tells AngularJS, dass dies das Wurzelelement unserer Anwendung ist.
ng-controller="MainController": Dies gibt an, welcher Controller die Logik für diesen Teil unserer App verwalten soll.
ng-model="artistName": Dies bindet das Eingabefeld an eine Variable namens artistName in unserem Controller.
ng-click="searchArtist()": Dies weist AngularJS an, die Funktion searchArtist() aufzurufen, wenn der Button geklickt wird.
ng-if="artist": Dies zeigt nur die Künstlerinformationen an, wenn ein Künstler gefunden wurde.

Schritt 2: Erstellung der AngularJS-Anwendung

Nun erstellen wir unsere AngularJS-Anwendung. Erstellen Sie eine neue Datei namens app.js und fügen Sie den folgenden Code hinzu:

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

app.controller('MainController', function($scope, $http) {
$scope.searchArtist = function() {
var apiKey = 'YOUR_LASTFM_API_KEY';
var apiUrl = 'http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=' + $scope.artistName + '&api_key=' + apiKey + '&format=json';

$http.get(apiUrl).then(function(response) {
$scope.artist = response.data.artist;
});
};
});

Lassen Sie uns das auseinandernehmen:

Wir erstellen ein AngularJS-Modul namens lastfmApp.
Wir definieren einen Controller namens MainController.
Innerhalb des Controllers definieren wir die Funktion searchArtist, die eine HTTP-Anfrage an die LastFm-API sendet.
Wir verwenden $scope, um Variablen und Funktionen für unsere HTML-Seite zugänglich zu machen.
Wir verwenden $http, um die API-Anfrage zu senden.

Verständnis der AngularJS-Konzepte

Nun, da wir unsere grundlegende Anwendung eingerichtet haben, tauchen wir tiefer in einige AngularJS-Konzepte ein.

Module

In AngularJS sind Module Behälter für verschiedene Teile Ihrer Anwendung. Sie helfen dabei, Ihren Code organisiert und wartbar zu halten. In unserem Fall haben wir ein Modul namens lastfmApp erstellt:

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

Controller

Controller sind där, wo wir das Verhalten unserer Anwendung definieren. Sie enthalten die Logik, die unsere App antreibt. In unserem Beispiel haben wir einen MainController erstellt:

app.controller('MainController', function($scope, $http) {
// Controller-Logik hier
});

Scopes

Scopes sind Objekte, die auf das Modell verweisen. Sie wirken als Kitt, das den Controller und die Ansicht verbindet. Wenn wir $scope in unserem Controller verwenden, machen wir Daten für unsere HTML-Seite zugänglich:

$scope.artist = response.data.artist;

Direktiven

Direktiven sind Markierungen auf DOM-Elementen, die AngularJS anweisen, eine bestimmteaktion an diesem DOM-Element auszuführen. Wir haben mehrere Direktiven in unserem HTML verwendet:

ng-app
ng-controller
ng-model
ng-click
ng-if

Erweiterung unserer Anwendung

Nun, da wir die Grundlagen verstehen, fügen wir unserer Anwendung einige zusätzliche Funktionen hinzu.

Anzeige ähnlicher Künstler

Lassen Sie uns unser HTML ändern, um ähnliche Künstler anzuzeigen:

<div ng-if="artist">
<h2>{{artist.name}}</h2>
<p>{{artist.bio.summary}}</p>
<h3>Ähnliche Künstler</h3>
<ul>
<li ng-repeat="similar in artist.similar.artist">{{similar.name}}</li>
</ul>
</div>

Hier verwenden wir die ng-repeat-Direktive, um durch die ähnlichen Künstler zu iterieren und sie in einer Liste anzuzeigen.

Hinzufügen von Fehlerbehandlung

Lassen Sie uns einige Fehlerbehandlung in unseren Controller hinzufügen:

app.controller('MainController', function($scope, $http) {
$scope.searchArtist = function() {
var apiKey = 'YOUR_LASTFM_API_KEY';
var apiUrl = 'http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=' + $scope.artistName + '&api_key=' + apiKey + '&format=json';

$http.get(apiUrl).then(function(response) {
$scope.artist = response.data.artist;
$scope.error = null;
}, function(error) {
$scope.error = "Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.";
$scope.artist = null;
});
};
});

Und fügen wir dies zu unserem HTML hinzu:

<p ng-if="error" style="color: red;">{{error}}</p>

Schlussfolgerung

Glückwunsch! Sie haben gerade Ihre erste AngularJS-Anwendung erstellt. Wir haben viel Boden abgedeckt, von der Einrichtung der grundlegenden Struktur bis hin zum Hinzufügen von Funktionen und Fehlerbehandlung. Denken Sie daran, dass das Lernen zu programmieren eine Reise ist, und jede Anwendung, die Sie erstellen, lehrt Sie etwas Neues.

Hier ist eine Tabelle, die die wichtigsten AngularJS-Konzepte zusammenfasst, die wir behandelt haben:

Konzept	Beschreibung
Module	Behälter für Teile der App
Controller	Definieren das Verhalten der App
Scopes	Wirken als Kitt zwischen Controller und Ansicht
Direktiven	Erweitern HTML mit benutzerdefinierten Attributen und Elementen

Weiters üben, weiter bauen und vor allem Spaß am Programmieren haben. Vor Ihnen liegen komplexe Webanwendungen, die Sie mühelos erstellen werden. Frohes Programmieren!

Credits: Image by storyset

Vorheriges Tutorial:

AngularJS - Leaflet-Anwendung