AngularJS - LastFm 應用程序：建立音樂探索應用

前言

你好，有志於成為程序員的各位！今天，我們將踏上一段令人興奮的網頁開發之旅。我們將使用 AngularJS 和 LastFm API 來創建一個音樂探索應用。別擔心如果你之前從未編過程——我會陪伴你走過每一步，就像這些年來我陪伴無數學生一樣。讓我們一起來看看吧！

AngularJS - Lastfm Application

AngularJS 是什麼？

在我們開始編程之前，讓我們先了解一下 AngularJS 是什麼。想像你正在蓋一棟房子。AngularJS 就像是那棟房子的框架——它為你的網頁應用提供結構和支持。它是一個強大的 JavaScript 框架，能夠讓我們輕鬆地創建動態的單頁應用。

建立我們的專案

步驟 1：創建 HTML 結構

讓我們從創建應用的基本結構開始。打開你喜歡的文本編輯器，創建一個名為 index.html 的新文件。這是我們將要放入其中的內容：

<!DOCTYPE html>
<html ng-app="lastfmApp">
<head>
<title>LastFm 音樂探索</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 音樂探索</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"：這指定哪個控制器應該處理這部分應用的邏輯。
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;
});
};
});

讓我們來解析一下：

我們創建了一個名為 lastfmApp 的 AngularJS 模塊。
我們定義了一個名為 MainController 的控制器。
在控制器中，我們定義了 searchArtist 函數，它向 LastFm API 發出 HTTP 請求。
我們使用 $scope 使變量和函數在 HTML 中可用。
我們使用 $http 來發出 API 請求。

理解 AngularJS 概念

現在，我們已經設置好了基本應用程序，讓我們更深入地了解一些 AngularJS 的概念。

模塊

在 AngularJS 中，模塊是應用程序不同部分的容器。它們幫助你將代碼組織起來並保持可維護性。在我們的例子中，我們創建了一個名為 lastfmApp 的模塊：

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

控制器

控制器是我們定義應用程序行為的地方。它們包含驅動我們應用的邏輯。在我們的例子中，我們創建了一個 MainController：

app.controller('MainController', function($scope, $http) {
// 控制器邏輯在這裡
});

作用域

作用域是引用模型的對象。它們在控制器和視圖之間起到粘合劑的作用。當我們在控制器中使用 $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 應用程序。我們已經涉足了許多內容，從設置基本結構到添加功能和錯誤處理。記住，學習編程是一段旅程，你建立的每一個應用程序都會教會你一些新知識。

這裡是一個總結我們所學主要 AngularJS 概念的表格：

概念	描述
模塊	應用程序不同部分的容器
控制器	定義應用程序行為
作用域	控制器和視圖之間的粘合劑
指令	擴展 HTML 的自定义屬性和元素

繼續練習，繼續建造，最重要的是，享受編程的樂趣。在你意識到之前，你將能夠輕鬆地創建複雜的網頁應用程序。快樂編程！

Credits: Image by storyset

上一教程:

AngularJS - Leaflet應用程式