Tiếng Việt

Hướng dẫn AngularJS

Ứng dụng AngularJS

AngularJS - Biểu mẫu Đặt hàng: Hướng dẫn cho Người mới bắt đầu

Xin chào các pháp sư AngularJS tương lai! Hôm nay, chúng ta sẽ bắt đầu một chuyến hành trình đầy thú vị vào thế giới của các biểu mẫu đặt hàng AngularJS. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - chúng ta sẽ bắt đầu từ những điều cơ bản và dần dần nâng cao. Cuối cùng của bài hướng dẫn này, bạn sẽ có khả năng tạo ra các biểu mẫu đặt hàng động như một chuyên gia!

AngularJS - Order Form

AngularJS là gì?

Trước khi chúng ta nhảy vào các biểu mẫu đặt hàng, hãy dành một chút thời gian để hiểu AngularJS là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. HTML giống như gạch và vữa, CSS giống như sơn và trang trí, còn AngularJS? Đó là như hệ thống nhà thông minh làm mọi thứ trở nên tương tác và động.

AngularJS là một khung công tác JavaScript.extend HTML với các thuộc tính mới, làm cho nó hoàn hảo cho việc tạo ra các ứng dụng web động. Nó giống như tặng siêu năng lực cho HTML tĩnh của bạn!

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

Trước tiên, hãy thiết lập dự án của chúng ta. Chúng ta cần bao gồm thư viện AngularJS trong tệp HTML của mình. Dưới đây là cách chúng ta làm:

<!DOCTYPE html>
<html ng-app="orderApp">
<head>
<title>Biểu mẫu Đặt hàng AngularJS của Tôi</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Biểu mẫu của chúng ta sẽ ở đây -->
<script src="app.js"></script>
</body>
</html>

Trong đoạn mã này, chúng ta đã làm một số điều quan trọng:

  1. Chúng ta đã thêm ng-app="orderApp" vào thẻ <html>. Điều này告诉 AngularJS rằng này là phần tử gốc của ứng dụng của chúng ta.
  2. Chúng ta đã bao gồm thư viện AngularJS bằng cách sử dụng thẻ <script>.
  3. Chúng ta cũng đã bao gồm tệp JavaScript của riêng chúng ta (app.js) nơi chúng ta sẽ viết mã AngularJS của mình.

Tạo Module và Controller AngularJS

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

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

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};
});

Dưới đây là những gì đang xảy ra:

  1. Chúng ta đang tạo một module AngularJS có tên là 'orderApp'.
  2. Chúng ta đang xác định một controller có tên là 'OrderController'.
  3. Trong controller, chúng ta đang khởi tạo một đối tượng order trên $scope. Đối tượng này sẽ giữ các mục đặt hàng và tổng số.

Xây dựng Biểu mẫu Đặt hàng

Bây giờ, hãy tạo biểu mẫu đặt hàng của chúng ta trong HTML:

<div ng-controller="OrderController">
<h2>Đặt hàng của bạn</h2>
<form>
<label>Tên Mặt hàng: <input type="text" ng-model="newItem.name"></label><br>
<label>Giá: $<input type="number" ng-model="newItem.price"></label><br>
<button ng-click="addItem()">Thêm Mặt hàng</button>
</form>

<h3>Tóm tắt Đặt hàng</h3>
<ul>
<li ng-repeat="item in order.items">
{{item.name}} - ${{item.price}}
<button ng-click="removeItem($index)">Xóa</button>
</li>
</ul>
<p>Tổng: ${{order.total}}</p>
</div>

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

  1. Chúng ta đang sử dụng ng-controller để liên kết phần này với OrderController của chúng ta.
  2. Chúng ta có các trường nhập cho tên mặt hàng và giá, sử dụng ng-model để liên kết chúng với newItem.name và newItem.price.
  3. Chúng ta có một nút "Thêm Mặt hàng" gọi hàm addItem() khi được nhấp.
  4. Chúng ta sử dụng ng-repeat để hiển thị mỗi mục trong đơn đặt hàng.
  5. Mỗi mục có một nút "Xóa" gọi hàm removeItem().
  6. Chúng ta hiển thị tổng số đơn đặt hàng.

Triển khai Logic Controller

Bây giờ, hãy thêm các hàm cần thiết vào controller của chúng ta:

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};

$scope.newItem = {name: '', price: ''};

$scope.addItem = function() {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
};

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

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

Dưới đây là những gì mỗi hàm làm:

  1. addItem(): Thêm một mặt hàng mới vào đơn đặt hàng, tính toán tổng mới và đặt lại các trường nhập.
  2. removeItem(): Xóa một mặt hàng khỏi đơn đặt hàng và tính toán lại tổng.
  3. calculateTotal(): Tính tổng giá của tất cả các mặt hàng trong đơn đặt hàng.

Cải thiện Trải nghiệm Người dùng

Để làm cho biểu mẫu của chúng ta thân thiện hơn với người dùng, hãy thêm một số�� kiểm tra:

<form name="orderForm" ng-submit="addItem()" novalidate>
<label>Tên Mặt hàng: <input type="text" ng-model="newItem.name" required></label><br>
<label>Giá: $<input type="number" ng-model="newItem.price" min="0" step="0.01" required></label><br>
<button type="submit" ng-disabled="orderForm.$invalid">Thêm Mặt hàng</button>
</form>

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

$scope.addItem = function() {
if ($scope.orderForm.$valid) {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
$scope.orderForm.$setPristine();
}
};

Những thay đổi này:

  1. Thêm kiểm tra biểu mẫu để đảm bảo tất cả các trường đều được điền đầy đủ và giá là một số dương.
  2. Vô hiệu hóa nút "Thêm Mặt hàng" khi biểu mẫu không hợp lệ.
  3. Chỉ thêm mặt hàng nếu biểu mẫu hợp lệ.
  4. Đặt biểu mẫu về trạng thái tinh khiết sau khi thêm mặt hàng.

Kết luận

Chúc mừng! Bạn vừa xây dựng xong một biểu mẫu đặt hàng AngularJS chức năng. Chúng ta đã bao gồm các khái niệm cơ bản của AngularJS, bao gồm module, controller, hai chiều dữ liệu liên kết và kiểm tra biểu mẫu. Hãy nhớ rằng, thực hành là chìa khóa của thành công, vì vậy đừng ngần ngại thử nghiệm và mở rộng biểu mẫu này. Có thể thêm tính năng giảm giá hoặc khả năng lưu đơn đặt hàng? Các khả năng là vô tận!

Dưới đây là bảng tóm tắt các chỉ thị AngularJS chính chúng ta đã sử dụng:

Chỉ thị Mục đích
ng-app Xác định phần tử gốc của một ứng dụng AngularJS
ng-controller Xác định một controller cho một phần của ứng dụng
ng-model Tạo hai chiều dữ liệu liên kết
ng-click Xác định một hàm để chạy khi một phần tử được nhấp
ng-repeat Lặp lại một phần tử cho mỗi mục trong một bộ sưu tập
ng-submit Xác định một hàm để chạy khi một biểu mẫu được gửi
ng-disabled Vô hiệu hóa một phần tử dựa trên một điều kiện

Chúc mừng coding, và hãy nhớ - mỗi chuyên gia từng là một người mới bắt đầu. Hãy tiếp tục thực hành, và bạn sẽ trở thành một.master AngularJS trong thời gian ngắn!

Credits: Image by storyset

Hướng Dẫn Trước:
AngularJS - Thay đổi Menu
Hướng Dẫn Tiếp Theo:
AngularJS - Thẻ Tìm kiếm