AngularJS - AJAX: Hướng dẫn cho người mới bắt đầu

Xin chào bạn, tương lai của ngôi sao lập trình! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình đầy.exciting vào thế giới của AngularJS và AJAX. Là người đã dạy khoa học máy tính trong nhiều năm, tôi có thể告诉你 rằng việc nắm vững những khái niệm này sẽ mở ra một thế giới mới đầy khả năng trong phát triển web. Hãy cùng nhau bắt đầu thôi!

AngularJS - AJAX

AJAX là gì?

Trước khi chúng ta bắt đầu lập trình, hãy hiểu rõ AJAX là gì. AJAX là viết tắt của Asynchronous JavaScript and XML. Đừng để tên gọi sang trọng này làm bạn害怕! Đó chỉ là một kỹ thuật cho phép các trang web cập nhật nội dung mà không cần tải lại toàn bộ trang. Hãy tưởng tượng bạn đang đọc một bài viết dài trực tuyến, và bạn có thể tải thêm nội dung khi cuộn xuống, mà không cần trang web làm mới. Đó chính là AJAX đang hoạt động!

AngularJS và AJAX: Cặp đôi hoàn hảo

AngularJS, framework siêu anh hùng của chúng ta, làm cho việc làm việc với AJAX trở nên dễ dàng. Nó cung cấp một dịch vụ tích hợp sẵn có叫做 $http mà chúng ta sẽ sử dụng để gửi yêu cầu HTTP. Hãy tưởng tượng $http như một người đưa tin có thể lấy dữ liệu từ máy chủ hoặc gửi dữ liệu đến nó.

Hãy bắt đầu lập trình!

Ví dụ 1: Gửi yêu cầu GET đơn giản

Hãy bắt đầu với một ví dụ cơ bản. Chúng ta sẽ tạo một ứng dụng đơn giản để lấy một câu đùa ngẫu nhiên từ một API.

<div ng-app="myApp" ng-controller="myCtrl">
<h2>Câu đùa ngẫu nhiên</h2>
<p>{{joke}}</p>
<button ng-click="getJoke()">Lấy câu đùa mới</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.getJoke = function() {
$http.get("https://official-joke-api.appspot.com/random_joke")
.then(function(response) {
$scope.joke = response.data.setup + " " + response.data.punchline;
});
};
});
</script>

Hãy phân tích điều này:

Chúng ta tạo một ứng dụng AngularJS và một controller.
Trong controller, chúng ta định nghĩa một hàm getJoke().
Hàm này sử dụng $http.get() để lấy dữ liệu từ API câu đùa.
Khi dữ liệu đến, chúng ta cập nhật $scope.joke với câu đùa và punchline.
Trong HTML, chúng ta hiển thị câu đùa và cung cấp một nút để lấy một câu đùa mới.

Ví dụ 2: Xử lý lỗi

Bây giờ, hãy cải thiện mã của chúng ta bằng cách xử lý lỗi tiềm ẩn:

<div ng-app="myApp" ng-controller="myCtrl">
<h2>Câu đùa ngẫu nhiên</h2>
<p ng-if="joke">{{joke}}</p>
<p ng-if="error">{{error}}</p>
<button ng-click="getJoke()">Lấy câu đùa mới</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.getJoke = function() {
$http.get("https://official-joke-api.appspot.com/random_joke")
.then(function(response) {
$scope.joke = response.data.setup + " " + response.data.punchline;
$scope.error = null;
})
.catch(function(error) {
$scope.error = "Oops! Không thể lấy câu đùa. Hãy thử lại sau.";
$scope.joke = null;
});
};
});
</script>

Trong phiên bản cải tiến này:

Chúng ta sử dụng .catch() để xử lý bất kỳ lỗi nào có thể xảy ra.
Nếu có lỗi xảy ra, chúng ta hiển thị thông báo lỗi thay vì câu đùa.
Chúng ta sử dụng ng-if trong HTML để điều kiện hiển thị hoặc câu đùa hoặc thông báo lỗi.

Ví dụ 3: Yêu cầu POST

Bây giờ, hãy thử một điều gì đó nâng cao hơn. Chúng ta sẽ tạo một biểu mẫu đơn giản để gửi dữ liệu đến máy chủ:

<div ng-app="myApp" ng-controller="myCtrl">
<h2>Gửi Phản hồi</h2>
<form ng-submit="submitFeedback()">
<input type="text" ng-model="feedback.name" placeholder="Tên của bạn" required>
<textarea ng-model="feedback.message" placeholder="Phản hồi của bạn" required></textarea>
<button type="submit">Gửi</button>
</form>
<p ng-if="response">{{response}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.feedback = {};
$scope.submitFeedback = function() {
$http.post("https://jsonplaceholder.typicode.com/posts", $scope.feedback)
.then(function(response) {
$scope.response = "Cảm ơn bạn, " + $scope.feedback.name + "! Phản hồi của bạn đã được gửi.";
$scope.feedback = {};
})
.catch(function(error) {
$scope.response = "Oops! Có điều gì đó không đúng. Hãy thử lại sau.";
});
};
});
</script>

Hãy phân tích điều này:

Chúng ta tạo một biểu mẫu với các trường nhập liệu cho tên và phản hồi.
Hàm submitFeedback() được gọi khi biểu mẫu được gửi.
Chúng ta sử dụng $http.post() để gửi dữ liệu đến máy chủ (trong trường hợp này là một API giả).
Nếu thành công, chúng ta hiển thị thông báo cảm ơn và làm sạch biểu mẫu.
Nếu có lỗi, chúng ta hiển thị thông báo lỗi.

Các phương thức AJAX trong AngularJS

Dưới đây là bảng các phương thức AJAX trong AngularJS:

Phương thức	Mô tả
$http.get()	Lấy dữ liệu từ máy chủ
$http.post()	Gửi dữ liệu đến máy chủ
$http.put()	Cập nhật dữ liệu trên máy chủ
$http.delete()	Xóa dữ liệu từ máy chủ
$http.patch()	Cập nhật một phần dữ liệu trên máy chủ

Kết luận

Chúc mừng! Bạn đã刚刚迈出进入 AngularJS 和 AJAX 的世界的第一步。记住，熟能生巧。尝试修改这些示例，玩转不同的 API，不要害怕犯错。这是我们学习的方式！

在我多年的教学经验中，我看到了学生从完全的初学者成长为构建复杂 web 应用程序的人。只要坚持不懈和好奇心，你也会到达那里。继续编码，继续学习，最重要的是，享受乐趣！

Credits: Image by storyset