AngularJS - Приложение LastFm: Создание приложения для discovery музыки

Введение

Здравствуйте,野心勃勃ые программисты! Сегодня мы отправимся в увлекательное путешествие в мир веб-разработки. Мы создадим приложение для discovery музыки, используя AngularJS и API LastFm. Не волнуйтесь, если вы никогда раньше не программировали – я буду с вами на каждом шагу, как я делал для countless студентов на протяжении многих лет преподавания. Погружаемся!

AngularJS - Lastfm Application

Что такое AngularJS?

Прежде чем мы начнем программировать, давайте поймем, что такое AngularJS. Представьте, что вы строите дом. AngularJS как каркас этого дома – он предоставляет структуру и поддержку для вашего веб-приложения. Это мощный JavaScript фреймворк, который помогает нам создавать динамические, одностраничные приложения с легкостью.

Настройка нашего проекта

Шаг 1: Создание HTML структуры

Давайте начнем с создания базовой структуры нашего приложения. Откройте ваш любимый текстовый редактор и создайте новый файл под названием index.html. Вот что мы туда положим:

<!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="Введите имя исполнителя">
<button ng-click="searchArtist()">Искать</button>
<div ng-if="artist">
<h2>{{artist.name}}</h2>
<p>{{artist.bio.summary}}</p>
</div>
</body>
</html>

Давайте разберем это:

ng-app="lastfmApp": Это говорит AngularJS, что это корневой элемент нашего приложения.
ng-controller="MainController": Это specifies, который контроллер должен обрабатывать логику для этой части нашего приложения.
ng-model="artistName": Это связывает поле ввода с переменной artistName в нашем контроллере.
ng-click="searchArtist()": Это говорит AngularJS вызывать функцию searchArtist(), когда кнопка нажата.
ng-if="artist": Это отображает информацию об исполнителе только в том случае, если исполнитель найден.

Шаг 2: Создание AngularJS приложения

Теперь давайте создадим наше AngularJS приложение. Создайте новый файл под названием app.js и добавьте следующий код:

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;
});
};
});

Давайте разберем это:

Мы создаем AngularJS модуль под названием lastfmApp.
Мы определяем контроллер под названием MainController.
Внутри контроллера мы определяем функцию searchArtist, которая делает HTTP запрос к API LastFm.
Мы используем $scope, чтобы сделать переменные и функции доступными для нашего HTML.
Мы используем $http для выполнения API запроса.

Понимание концепций AngularJS

Теперь, когда у нас есть базовое приложение настроено, давайте углубимся в некоторые концепции AngularJS.

Модули

В AngularJS модули являются контейнерами для различных частей вашего приложения. Они помогают поддерживать ваш код организованным и maintainable. В нашем случае, мы создали модуль под названием lastfmApp:

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

Контроллеры

Контроллеры – это место, где мы определяем поведение нашего приложения. Они содержат логику, которая питает наше приложение. В нашем примере, мы создали MainController:

app.controller('MainController', function($scope, $http) {
// Логика контроллера здесь
});

Сcope

Scope – это объекты, которые ссылаются на модель. Они действуют как клей между контроллером и видом. Когда мы используем $scope в нашем контроллере, мы делаем данные доступными для нашего HTML:

$scope.artist = response.data.artist;

Директивы

Директивы – это маркеры на DOM элементах, которые говорят AngularJS привязать определенное поведение к этому DOM элементу. Мы использовали несколько директив в нашем HTML:

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

Улучшение нашего приложения

Теперь, когда мы понимаем основы, давайте добавим несколько новых функций в наше приложение.

Отображение схожих исполнителей

Давайте изменим наш HTML, чтобы отобразить схожих исполнителей:

<div ng-if="artist">
<h2>{{artist.name}}</h2>
<p>{{artist.bio.summary}}</p>
<h3>Схожие исполнители</h3>
<ul>
<li ng-repeat="similar in artist.similar.artist">{{similar.name}}</li>
</ul>
</div>

Здесь мы используем директиву ng-repeat, чтобы循环 по схожим исполнителям и отображать их в списке.

Добавление обработки ошибок

Давайте добавим обработку ошибок в наш контроллер:

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 = "Произошла ошибка. Пожалуйста, попробуйте еще раз.";
$scope.artist = null;
});
};
});

И добавим это в наш HTML:

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

Заключение

Поздравления! Вы только что создали свое первое приложение на AngularJS. Мы covered много terreno, от настройки базовой структуры до добавления функций и обработки ошибок. Помните, что обучение программированию – это путешествие, и каждое приложение, которое вы создаете, учит вас чему-то новому.

Вот таблица, резюмирующая основные концепции AngularJS, которые мы covered:

Концепция	Описание
Модули	Контейнеры для частей приложения
Контроллеры	Определяют поведение приложения
Сcope	Действуют как клей между контроллером и видом
Директивы	Расширяют HTML с помощью пользовательских атрибутов и элементов

Продолжайте практиковаться, продолжайте создавать, и, самое главное, продолжайте наслаждаться программированием. Before you know it, вы будете создавать сложные веб-приложения с легкостью. Счастливого кодирования!

Credits: Image by storyset

Предыдущий учебник:

AngularJS - Приложение Leaflet