Ứng dụng AngularJS

Đã đến lúc tạo một ứng dụng AngularJS thực sự.

Tạo danh sách mua sắm

Hãy sử dụng một số tính năng của AngularJS để tạo một danh sách mua sắm, nơi bạn có thể thêm hoặc xóa hàng hóa:

Danh sách mua sắm của tôi
  • {{x}}×

{{errortext}}


Giới thiệu ứng dụng

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

thứ nhất tạo một tên myShoppingList ứng dụng của mình, và thêm một tên myCtrl trình điều khiển.

trình điều khiển có tên products mảng để thêm vào $scope trong đó.

Trong HTML, chúng ta sử dụng ng-repeat lệnh để hiển thị danh sách các mục trong mảng.

Mô hình

Đến nay, chúng ta đã tạo một danh sách HTML dựa trên các mục của mảng:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}</li>
  </ul>
</div>

Thử ngay

Bước 2: Thêm hàng hóa

Trong HTML, thêm một trường văn bản và sử dụng ng-model lệnh để gắn kết nó vào ứng dụng.

Trong controller, tạo một hàm có tên addItem hàm, và sử dụng addMe Giá trị của trường nhập sẽ thêm hàng hóa vào products trong mảng.

thêm một nút, và chỉ định một ng-click Lệnh, lệnh này sẽ được chạy khi bạn nhấp vào nút đó addItem hàm.

Mô hình

Bây giờ chúng ta có thể thêm mặt hàng vào danh sách mua sắm:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
  $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()">Thêm</button>
</div>

Thử ngay

Bước 3: Xóa mặt hàng

Chúng ta cũng hy vọng có thể xóa mặt hàng khỏi danh sách mua sắm.

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

Trong HTML, tạo một thẻ cho mỗi mục, thẻ này sẽ chứa một <span> thẻ, và cung cấp một ng-click hướng dẫn, hướng dẫn này sử dụng hiện tại $index gọi removeItem hàm.

Mô hình

Bây giờ chúng ta có thể xóa mặt hàng khỏi danh sách mua sắm:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
  $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()">Thêm</button>
</div>

Thử ngay

Bước 4: Xử lý lỗi

Ứng dụng này có một số lỗi, ví dụ, nếu bạn cố gắng thêm cùng một mặt hàng hai lần, ứng dụng sẽ bị崩溃. Ngoài ra, cũng không nên cho phép thêm mặt hàng trống.

Chúng ta sẽ giải quyết vấn đề này bằng cách kiểm tra giá trị trước khi thêm mặt hàng mới.

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

Mô hình

Danh sách mua sắm, có thể ghi thông báo lỗi:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
  $scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe) {return;}
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
    } else {
      $scope.errortext = "该商品已经在您的购物清单中。";
    }
  }
  $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()">Thêm</button>
  <p>{{errortext}}</p>
</div>

Thử ngay

Bước 5: Thiết kế

Ứng dụng này có thể chạy, nhưng có thể sử dụng thiết kế tốt hơn. Chúng tôi sử dụng bảng định dạng W3.CSS để thiết kế ứng dụng của mình.

Thêm bảng định dạng W3.CSS và bao gồm các lớp phù hợp trong toàn bộ ứng dụng, kết quả sẽ giống như danh sách mua hàng ở đầu trang.

Mô hình

Sử dụng bảng định dạng W3.CSS để thiết kế ứng dụng của bạn:

<link rel="stylesheet" href="https://www.codew3c.com/lib/style/w3.css">

Thử ngay