Tiếng Việt

Hướng dẫn AngularJS

Ứng dụng AngularJS

AngularJS - Ứng dụng Giỏ Hàng

Xin chào các bạn đang học lập trình! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị để tạo một ứng dụng giỏ hàng sử dụng AngularJS. Là một giáo viên khoa học máy tính gần gũi, tôi rất vui mừng được hướng dẫn bạn qua quá trình này, ngay cả khi bạn hoàn toàn mới bắt đầu học lập trình. Vậy, hãy lấy một cốc cà phê (hoặc đồ uống yêu thích của bạn) và cùng nhau vào cuộc!

AngularJS - Cart Application

AngularJS là gì?

Trước khi chúng ta bắt đầu xây dựng ứng dụng giỏ hàng, hãy dành một chút thời gian để hiểu AngularJS là gì. AngularJS 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 web động. Nó giống như một cây kéo đa năng cho các nhà phát triển web, cung cấp các công cụ để làm cho cuộc sống của chúng ta dễ dàng hơn và mã của chúng ta trở nên có tổ chức hơn.

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 một cấu trúc HTML cơ bản cho ứng dụng giỏ hàng của chúng ta. Đừng lo lắng nếu bạn không quen thuộc với HTML; tôi sẽ giải thích từng phần khi chúng ta đi qua.

<!DOCTYPE html>
<html ng-app="cartApp">
<head>
<title>Giỏ Hàng Của Tôi</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="CartController">
<h1>Giỏ Hàng Của Tôi</h1>
<!-- Chúng ta sẽ thêm nội dung hơn ở đây sau -->
</body>
</html>

Trong cấu trúc HTML này, chúng ta đã làm một vài điều quan trọng:

  1. Chúng ta đã bao gồm thư viện AngularJS sử dụng một liên kết CDN.
  2. Chúng ta đã liên kết tệp JavaScript của riêng chúng ta (app.js) mà chúng ta sẽ tạo sau.
  3. Chúng ta đã thêm ng-app="cartApp" vào thẻ <html>, điều này cho biết rằng đây là phần tử gốc của ứng dụng của chúng ta.
  4. Chúng ta đã thêm ng-controller="CartController" vào thẻ <body>, mà chúng ta sẽ sử dụng để quản lý logic của giỏ hàng.

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

Bây giờ, hãy tạo tệp app.js và thiết lập ứng dụng AngularJS của chúng ta:

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

app.controller('CartController', function($scope) {
$scope.items = [];
$scope.total = 0;

$scope.addItem = function(item) {
$scope.items.push(item);
$scope.calculateTotal();
};

$scope.removeItem = function(index) {
$scope.items.splice(index, 1);
$scope.calculateTotal();
};

$scope.calculateTotal = function() {
$scope.total = $scope.items.reduce(function(sum, item) {
return sum + item.price;
}, 0);
};
});

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

  1. Chúng ta tạo một mô-đun AngularJS có tên 'cartApp'.
  2. Chúng ta xác định một controller có tên 'CartController'.
  3. Trong controller, chúng ta thiết lập một mảng trống cho các mục và một biến tổng.
  4. Chúng ta tạo các hàm để thêm mục, xóa mục và tính tổng.

Xây dựng Giao diện Người Dùng

Bước 3: Tạo Danh sách Mục

Hãy cập nhật HTML của chúng ta để hiển thị các mục trong giỏ hàng:

<body ng-controller="CartController">
<h1>Giỏ Hàng Của Tôi</h1>
<ul>
<li ng-repeat="item in items">
{{item.name}} - ${{item.price}}
<button ng-click="removeItem($index)">Xóa</button>
</li>
</ul>
<p>Tổng: ${{total}}</p>
</body>

Ở đây, chúng ta đang sử dụng các hướng dẫn AngularJS:

  • ng-repeat để lặp qua các mục
  • {{}} để绑定 dữ liệu để hiển thị các thuộc tính mục
  • ng-click để gọi hàm removeItem khi nút được nhấp

Bước 4: Thêm Mới Các Mục

Hãy thêm một biểu mẫu để cho phép người dùng thêm các mục mới:

<form ng-submit="addItem(newItem)">
<input type="text" ng-model="newItem.name" placeholder="Tên mục" required>
<input type="number" ng-model="newItem.price" placeholder="Giá" required>
<button type="submit">Thêm vào giỏ hàng</button>
</form>

Biểu mẫu này sử dụng:

  • ng-submit để gọi hàm addItem khi biểu mẫu được gửi
  • ng-model để liên kết các giá trị đầu vào với đối tượng newItem

Cải thiện Ứng dụng

Bước 5: Thêm Số Lượng Mục

Hãy điều chỉnh ứng dụng của chúng ta để xử lý số lượng mục:

app.controller('CartController', function($scope) {
// ... mã trước đó ...

$scope.addItem = function(item) {
var existingItem = $scope.items.find(function(i) {
return i.name === item.name;
});

if (existingItem) {
existingItem.quantity += 1;
} else {
item.quantity = 1;
$scope.items.push(item);
}
$scope.calculateTotal();
$scope.newItem = {};
};

$scope.removeItem = function(index) {
var item = $scope.items[index];
item.quantity -= 1;
if (item.quantity === 0) {
$scope.items.splice(index, 1);
}
$scope.calculateTotal();
};

$scope.calculateTotal = function() {
$scope.total = $scope.items.reduce(function(sum, item) {
return sum + (item.price * item.quantity);
}, 0);
};
});

Và cập nhật HTML của chúng ta:

<li ng-repeat="item in items">
{{item.name}} - ${{item.price}} x {{item.quantity}}
<button ng-click="removeItem($index)">Xóa</button>
</li>

Kết luận

Chúc mừng! Bạn đã vừa xây dựng xong một ứng dụng giỏ hàng chức năng sử dụng AngularJS. Chúng ta đã bao gồm các khía cạnh cơ bản của việc thiết lập một ứng dụng AngularJS, tạo controllers, sử dụng các hướng dẫn cho việc liên kết dữ liệu và xử lý sự kiện, và thậm chí thêm một số tính năng nâng cao như quản lý số lượng mục.

Nhớ rằng, học lập trình là một hành trình, và đây chỉ là bước đầu tiên. Hãy tiếp tục thực hành, thử nghiệm và quan trọng nhất là hãy vui vẻ với nó!

Dưới đây là bảng tóm tắt các khái niệm chính của AngularJS mà chúng ta đã sử dụng:

Khái niệm Mô tả Ví dụ
Mô-đun Các容器 cho các phần khác nhau của ứng dụng angular.module('cartApp', [])
Controller Chứa logic kinh doanh cho một phần của ứng dụng app.controller('CartController', function($scope) {...})
Scope Đối tượng mà tham chiếu đến mô hình ứng dụng $scope.items = []
Hướng dẫn Mở rộng HTML với các thuộc tính và phần tử tùy chỉnh ng-repeat, ng-click, ng-submit
Liên kết dữ liệu Đồng bộ hóa dữ liệu giữa mô hình và giao diện người dùng {{item.name}}

Tiếp tục lập mã, và nhớ rằng: mỗi chuyên gia từng là một người mới bắt đầu. Bạn đang làm rất tốt!

Credits: Image by storyset

Hướng Dẫn Trước:
AngularJS - Ứng dụng Kéo
Hướng Dẫn Tiếp Theo:
AngularJS - Ứng dụng Dịch