[AngularJS] Phần 23: Xây dựng ứng dụng AngularJS (phần cuối)

Trong bài này, chúng ta sẽ tiến hành xây dựng một ứng dụng tạo giỏ hàng đơn giản trong AngularJS.

Bước 1: Bắt đầu
Đầu tiên, chúng ta tạo 1 giỏ hàng tên là myShoppingList với điều khiển myCtrl. Điều khiển này sẽ thêm 1 mảng tên sản phẩm vào $scope hiện tại. Trong HTML, chúng ta dùng chỉ thị ng-repeat để hiển thị danh sách dùng các phần tử trong mảng. Ví dụ, chúng ta tạo 1 danh sách HTML dựa trên các phần tử trong 1 mảng:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<script>
var app = angular.module("myShoppingList", []); 
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}</li>
  </ul>
</div>

<p>So far we have made an HTML list based on the items of an array.</p>

</body>
</html>

Bước 2. Thêm các sản phẩm
Trong HTML, thêm 1 trường văn bản và trói nó với ứng dụng bằng chỉ thị ng-model. Ở controller, tạo 1 hàm tên là addItem, sử dụng giá trị đầu vào addMe để thêm 1 sản phẩm vào mảng sản phẩm. Thêm 1 nút, và gán nó bằng chỉ thị ng-click, khi nhấn nút thì chạy hàm addItem. Ví dụ thêm 1 sản phẩm vào danh sách.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<script>
var app = angular.module("myShoppingList", []); 
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    $scope.addItem = function () {
        $scope.products.push($scope.addMe);
    }    
});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}</li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Add</button>
</div>

<p>Write in the input field to add items.</p>

</body>
</html>

Bước 3. Xóa sản phẩm
Trong controller, tạo 1 hàm tên là removeItem, lấy chỉ số index của sản phẩm muốn xóa. Trong HTML, tạo 1 phần tử span cho mỗi sản phẩm, và gán chỉ thị ng-click sẽ gọi hàm removeItem với biến $index hiện tại. Ví dụ xóa 1 sản phẩm trong danh sách.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<script>
var app = angular.module("myShoppingList", []); 
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    $scope.addItem = function () {
        $scope.products.push($scope.addMe);
    }    
    $scope.removeItem = function (x) {
        $scope.products.splice(x, 1);
    }
});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">×</span></li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Add</button>
</div>

<p>Click the little x to remove an item from the shopping list.</p>

</body>
</html>

Bước 4. Điều khiển lỗi
Chương trình có 1 số lỗi, chẳng hạn như thêm tên sản phẩm 2 lần hay thêm sản phẩm có tên trống, khi đó ứng dụng sẽ bị lỗi. Để xử lý lỗi, chúng ta kiểm tra giá trị sản phẩm trước khi thêm vào danh sách, và xuất ra thông báo lỗi.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<script>
var app = angular.module("myShoppingList", []); 
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    $scope.addItem = function () {
        $scope.errortext = "";
        if (!$scope.addMe) {return;}        
        if ($scope.products.indexOf($scope.addMe) == -1) {
            $scope.products.push($scope.addMe);
        } else {
            $scope.errortext = "The item is already in your shopping list.";
        }
    }
    $scope.removeItem = function (x) {
        $scope.errortext = "";    
        $scope.products.splice(x, 1);
    }
});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">×</span></li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Add</button>
  <p>{{errortext}}</p>
</div>

<p>Try to add the same item twice, and you will get an error message.</p>

</body>
</html>

Bước 5. Thiết kế
Ở bước này, đơn giản là chỉ cần thiết kế giao diện cho đẹp, chúng ta có thể sử dụng W3.CSS. Sau đây là ứng dụng hoàn chỉnh.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="/w3css/4/w3.css">
<body>

<script>
var app = angular.module("myShoppingList", []); 
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    $scope.addItem = function () {
        $scope.errortext = "";
        if (!$scope.addMe) {return;}
        if ($scope.products.indexOf($scope.addMe) == -1) {
            $scope.products.push($scope.addMe);
        } else {
            $scope.errortext = "The item is already in your shopping list.";
        }
    }
    $scope.removeItem = function (x) {
        $scope.errortext = "";    
        $scope.products.splice(x, 1);
    }
});
</script>

<div ng-app="myShoppingList" ng-cloak ng-controller="myCtrl" class="w3-card-2 w3-margin" style="max-width:400px;">
  <header class="w3-container w3-light-grey w3-padding-16">
    <h3>My Shopping List --- dammio.com</h3>
  </header>
  <ul class="w3-ul">
    <li ng-repeat="x in products" class="w3-padding-16">{{x}}<span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">×</span></li>
  </ul>
  <div class="w3-container w3-light-grey w3-padding-16">
    <div class="w3-row w3-margin-top">
      <div class="w3-col s10">
        <input placeholder="Add shopping items here" ng-model="addMe" class="w3-input w3-border w3-padding">
      </div>
      <div class="w3-col s2">
        <button ng-click="addItem()" class="w3-btn w3-padding w3-green">Add</button>
      </div>
    </div>
    <p class="w3-text-red">{{errortext}}</p>
  </div>
</div>

</body>
</html>

Kết luận: Vậy là bạn đã học xong series bài học cơ bản về AngularJS, để triển khai ứng dụng thực tế, bạn phải học và trải nghiệm nhiều hơn. Chúc bạn may mắn và thành công trên con đường đã chọn! 🙂

<< Bài trước

Trang mục lục

Liên quan: [AngularJS] Phần 11: AngularJS http

Trích dẫn bài viết

APA:
Dammio. (2017). [AngularJS] Phần 23: Xây dựng ứng dụng AngularJS (phần cuối). https://www.dammio.com/2017/09/14/angularjs-phan-23-xay-dung-ung-dung-angularjs-phan-cuoi.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[AngularJS] Phần 23: Xây dựng ứng dụng AngularJS (phần cuối)}, year = {2017}, url = {https://www.dammio.com/2017/09/14/angularjs-phan-23-xay-dung-ung-dung-angularjs-phan-cuoi}, urldate = {2025-03-24} }

Kết nối