Tiếng Việt

Hướng dẫn AngularJS

Ứng dụng AngularJS

AngularJS - Ứng dụng LastFm: Xây dựng một ứng dụng Khám phá Nhạc

Giới thiệu

Xin chào các bạn học lập trình! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới phát triển web. Chúng ta sẽ tạo một ứng dụng khám phá nhạc sử dụng AngularJS và API LastFm. Đừng lo lắng nếu bạn chưa bao giờ viết mã trước đây - tôi sẽ cùng bạn từng bước, giống như tôi đã làm với hàng trăm học sinh trong những năm dạy học của mình. Hãy cùng bắt đầu!

AngularJS - Lastfm Application

AngularJS là gì?

Trước khi chúng ta bắt đầu viết mã, hãy hiểu AngularJS là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. AngularJS giống như khung công tác của ngôi nhà đó - nó cung cấp cấu trúc và hỗ trợ cho ứng dụng web của bạn. Đây là một khung công tác JavaScript mạnh mẽ giúp chúng ta tạo ra các ứng dụng trang đơn động một cách dễ dàng.

Thiết lập Dự án của Chúng ta

Bước 1: Tạo Cấu trúc HTML

Hãy bắt đầu bằng cách tạo cấu trúc cơ bản của ứng dụng chúng ta. Mở trình soạn thảo văn bản yêu thích của bạn và tạo một tệp mới có tên index.html. Dưới đây là những gì chúng ta sẽ đặt trong đó:

<!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="Nhập tên nghệ sĩ">
<button ng-click="searchArtist()">Tìm kiếm</button>
<div ng-if="artist">
<h2>{{artist.name}}</h2>
<p>{{artist.bio.summary}}</p>
</div>
</body>
</html>

Hãy phân tích này:

  • ng-app="lastfmApp": Điều này cho biết phần tử này là phần tử gốc của ứng dụng chúng ta.
  • ng-controller="MainController": Điều này xác định bộ điều khiển nào nên xử lý logic cho phần này của ứng dụng.
  • ng-model="artistName": Điều này liên kết trường nhập với biến artistName trong bộ điều khiển.
  • ng-click="searchArtist()": Điều này cho biết AngularJS nên gọi hàm searchArtist() khi nút được nhấp.
  • ng-if="artist": Điều này chỉ hiển thị thông tin nghệ sĩ nếu đã tìm thấy nghệ sĩ.

Bước 2: Tạo Ứng dụng AngularJS

Bây giờ, hãy tạo ứng dụng AngularJS của chúng ta. Tạo một tệp mới có tên app.js và thêm mã sau:

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

Hãy phân tích này:

  • Chúng ta tạo một mô-đun AngularJS叫做 lastfmApp.
  • Chúng ta xác định một bộ điều khiển叫做 MainController.
  • Trong bộ điều khiển, chúng ta xác định hàm searchArtist, która gửi yêu cầu HTTP đến API LastFm.
  • Chúng ta sử dụng $scope để làm biến và hàm khả dụng cho HTML của chúng ta.
  • Chúng ta sử dụng $http để gửi yêu cầu API.

Hiểu Các Khái niệm AngularJS

Bây giờ chúng ta đã thiết lập ứng dụng cơ bản, hãy đi sâu hơn vào một số khái niệm AngularJS.

Mô-đun

Trong AngularJS, các mô-đun là các containner cho các phần khác nhau của ứng dụng. Chúng giúp giữ mã của bạn tổ chức và dễ bảo trì. Trong trường hợp của chúng ta, chúng ta đã tạo một mô-đun叫做 lastfmApp:

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

Bộ Điều Khiển

Bộ điều khiển là nơi chúng ta xác định hành vi của ứng dụng. Chúng chứa logic giúp ứng dụng của chúng ta hoạt động. Trong ví dụ của chúng ta, chúng ta đã tạo một MainController:

app.controller('MainController', function($scope, $http) {
// Logic của bộ điều khiển ở đây
});

Phạm vi

Phạm vi là các đối tượng mà tham chiếu đến mô hình. Chúng hoạt động như một chất keo giữa bộ điều khiển và giao diện người dùng. Khi chúng ta sử dụng $scope trong bộ điều khiển, chúng ta đang làm dữ liệu khả dụng cho HTML của chúng ta:

$scope.artist = response.data.artist;

Chỉ thị

Chỉ thị là các dấu hiệu trên các phần tử DOM cho biết AngularJS nên gắn một hành vi cụ thể vào phần tử DOM đó. Chúng ta đã sử dụng một số chỉ thị trong HTML của mình:

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

Cải thiện Ứng dụng của Chúng ta

Bây giờ chúng ta đã hiểu các nguyên tắc cơ bản, hãy thêm một số tính năng khác vào ứng dụng của chúng ta.

Hiển thị Các Nghệ sĩ Tương Tự

Hãy thay đổi HTML của chúng ta để hiển thị các nghệ sĩ tương tự:

<div ng-if="artist">
<h2>{{artist.name}}</h2>
<p>{{artist.bio.summary}}</p>
<h3>Nghệ sĩ Tương tự</h3>
<ul>
<li ng-repeat="similar in artist.similar.artist">{{similar.name}}</li>
</ul>
</div>

Ở đây, chúng ta sử dụng chỉ thị ng-repeat để lặp qua các nghệ sĩ tương tự và hiển thị chúng trong danh sách.

Thêm Xử lý Lỗi

Hãy thêm một số xử lý lỗi vào bộ điều khiển của chúng ta:

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 = "Đã xảy ra lỗi. Vui lòng thử lại.";
$scope.artist = null;
});
};
});

Và hãy thêm này vào HTML của chúng ta:

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

Kết luận

Chúc mừng! Bạn đã xây dựng thành công ứng dụng AngularJS đầu tiên của mình. Chúng ta đã bao gồm rất nhiều nội dung, từ việc thiết lập cấu trúc cơ bản đến việc thêm tính năng và xử lý lỗi. Nhớ rằng học lập trình là một hành trình, và mỗi ứng dụng bạn xây dựng đều dạy bạn một điều gì đó mới.

Dưới đây là bảng tóm tắt các khái niệm AngularJS chính chúng ta đã bao gồm:

Khái niệm Mô tả
Mô-đun Containner cho các phần của ứng dụng
Bộ Điều Khiển Xác định hành vi của ứng dụng
Phạm vi Làm chất keo giữa bộ điều khiển và giao diện người dùng
Chỉ thị Mở rộng HTML với các thuộc tính và phần tử tùy chỉnh

Tiếp tục thực hành, tiếp tục xây dựng, và quan trọng nhất, tiếp tục vui vẻ với việc lập trình. Trước khi bạn biết, bạn sẽ dễ dàng tạo ra các ứng dụng web phức tạp. Chúc bạn lập trình vui vẻ!

Credits: Image by storyset

Hướng Dẫn Trước:
AngularJS - Ứng dụng Leaflet