简体中文

AngularJS 教程

AngularJS 应用

AngularJS - LastFm 应用程序：构建音乐发现应用

简介

你好，有抱负的程序开发者们！今天，我们将踏上一段激动人心的网页开发之旅。我们将使用 AngularJS 和 LastFm API 创建一个音乐发现应用程序。如果你之前从未编写过代码，不用担心——我会陪伴你每一步，就像我多年来为无数学生所做的那样。让我们开始吧！

AngularJS - Lastfm Application

AngularJS 是什么？

在开始编码之前，让我们先了解下 AngularJS。想象你正在建造一座房子。AngularJS 就像是这座房子的框架——它为你的 web 应用程序提供结构和支撑。它是一个强大的 JavaScript 框架，可以帮助我们轻松创建动态的单页应用程序。

设置我们的项目

第一步：创建 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": 这只有在找到艺术家时才显示艺术家信息。

第二步：创建 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应用程序