Ứng dụng AngularJS
Đã đến lúc tạo một Ứng dụng AngularJS thực sự.
Làm một danh sách mua sắm
Hãy sử dụng một số tính năng của AngularJS để tạo danh sách mua sắm, nơi bạn có thể thêm hoặc xóa các mục:
Danh sách mua sắm của tôi
- {{x}} ×
{{văn bản lỗi}}
Giải thích ứng dụng
Bước 1. Bắt đầu:
Bắt đầu bằng cách tạo một ứng dụng có tên myShoppingList và thêm bộ điều khiển có tên myCtrl vào đó.
Bộ điều khiển thêm một mảng có tên products vào $scope hiện tại.
Trong HTML, chúng tôi sử dụng lệnh ng-repeat để hiển thị danh sách sử dụng các mục trong mảng.
Ví dụ
Cho đến nay chúng ta đã tạo một danh sách HTML dựa trên các mục của một mảng:
<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>
Hãy tự mình thử » Bước 2. Thêm mục:
Trong HTML, thêm một trường văn bản và liên kết nó với ứng dụng bằng lệnh ng-model .
Trong bộ điều khiển, tạo một hàm có tên addItem và sử dụng giá trị của trường đầu vào addMe để thêm một mục vào mảng products .
Thêm một nút và cung cấp cho nó một lệnh ng-click sẽ chạy hàm addItem khi nút được nhấp vào.
Ví dụ
Bây giờ chúng ta có thể thêm các mặt hàng vào danh sách mua sắm của mình:
<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>
Hãy tự mình thử »Bước 3. Xóa các mục:
Chúng tôi cũng muốn có thể xóa các mục khỏi danh sách mua sắm.
Trong bộ điều khiển, tạo một hàm có tên removeItem , hàm này lấy chỉ mục của mục bạn muốn xóa làm tham số.
Trong HTML, tạo phần tử <span> cho mỗi mục và cung cấp cho chúng lệnh ng-click gọi hàm removeItem với $index hiện tại.
Ví dụ
Bây giờ chúng ta có thể xóa các mục khỏi danh sách mua sắm của mình:
<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>
Hãy tự mình thử »Bước 4. Xử lý lỗi:
Ứng dụng có một số lỗi như nếu bạn cố thêm cùng một mục hai lần thì ứng dụng sẽ gặp sự cố. Ngoài ra, không được phép thêm các mục trống.
Chúng tôi sẽ khắc phục điều đó bằng cách kiểm tra giá trị trước khi thêm mục mới.
Trong HTML, chúng tôi sẽ thêm 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ó.
Ví dụ
Danh sách mua sắm, có khả năng viết thông báo lỗi:
<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>
Hãy tự mình thử »Bước 5. Thiết kế:
Ứng dụng này hoạt động nhưng có thể sử dụng thiết kế tốt hơn. Chúng tôi sử dụng biểu định kiểu W3.CSS để tạo kiểu cho ứng dụng của mình.
Thêm biểu định kiểu W3.CSS và bao gồm các lớp thích hợp trong toàn bộ ứng dụng và kết quả sẽ giống như danh sách mua sắm ở đầu trang này.
Ví dụ
Tạo kiểu cho ứng dụng của bạn bằng biểu định kiểu W3.CSS:
<link rel="stylesheet" href="https://www.example.com.vn/w3css/4/w3.css">
Hãy tự mình thử »