AngularJS: Tạo app Angular đơn giản (app shopping cart)


Các khóa học qua video:
Lập trình C Java C# SQL Server PHP HTML5-CSS3-JavaScript

Cho phép sử dụng một số tính năng AngularJS để tạo danh sách mua sắm, nơi bạn có thể thêm hoặc xóa các mặt hàng.

Bước 1. Bắt đầu:

Bắt đầu bằng cách tạo một ứng dụng tên myShoppingList và thêm một controller tên myCtrl.

Controller thêm một mảng được đặt tên products cho $scope hiện tại.

Trong HTML, ta sử dụng chỉ thị ng-repeat để hiển thị danh sách bằng cách sử dụng các mục trong mảng.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/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 sản phẩm:

Trong HTML, thêm trường văn bản và liên kết trường đó với ứng dụng bằng lệnh ng-model.

Trong controller, hãy tạo một hàm tên addItem và sử dụng giá trị của trường addMe để thêm một sản phẩm vào mảng products.

Thêm một nút và cung cấp cho nó một chỉ thị ng-click để gọi hàm addItem khi nút được nhấp.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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:

Ta có thể xóa các mặt hàng khỏi danh sách mua sắm.

Trong controller, hãy tạo một hàm có tên removeItem, lấy chỉ mục của mục bạn muốn xóa, làm tham số.

Trong HTML, hãy tạo một phần tử <span> cho mỗi mục và cung cấp cho chúng một chỉ thị ng-click để gọi hàm removeItem với $index hiện thời.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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. Xử lý lỗi:

Ứng dụng có một số lỗi, như nếu bạn cố gắng thêm cùng một sản phẩm hai lần, ứng dụng sẽ bị treo. Ngoài ra, nó không nên được phép thêm các tên trống.

Ta sẽ khắc phục điều đó bằng cách kiểm tra giá trị trước khi thêm các mặt hàng mới.

Trong HTML, ta sẽ thêm một vùng chứa thông báo lỗi và viết thông báo lỗi khi ai đó cố gắng thêm một mục hiện có.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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ế GUI:

Ứng dụng hoạt động, nhưng có thể sử dụng một thiết kế tốt hơn, ta sử dụng CSS để tạo kiểu cho ứng dụng của mình.

Bạn hãy thêm CSS để có được một giao diện đẹp hơn, hấp dẫn hơn nhé.


Các khóa học qua video:
Lập trình C Java C# SQL Server PHP HTML5-CSS3-JavaScript
« Prev: AngularJS: Routing trong AngularJS
» Next: AngularJS: Angular - Frontend Framework tuyệt vời
Copied !!!