แอปพลิเคชัน AngularJS
ถึงเวลาสร้างแอปพลิเคชัน AngularJS จริง
ทำรายการช้อปปิ้ง
ให้ใช้คุณลักษณะบางอย่างของ AngularJS เพื่อสร้างรายการซื้อของ ซึ่งคุณสามารถเพิ่มหรือลบรายการได้:
รายการช้อปปิ้งของฉัน
- น้ำนม×
- ขนมปัง×
- ชีส×
แอพลิเคชันอธิบาย
ขั้นตอนที่ 1 เริ่มต้น:
เริ่มต้นด้วยการสร้างแอปพลิเคชันที่เรียกว่าmyShoppingListและเพิ่มคอนโทรลเลอร์ที่มีชื่อmyCtrlเข้าไป
ตัวควบคุมจะเพิ่มอาร์เรย์ที่ตั้งชื่อproductsให้กับไฟล์
$scope.
ใน HTML เราใช้ng-repeatคำสั่งเพื่อแสดงรายการโดยใช้รายการในอาร์เรย์
ตัวอย่าง
จนถึงตอนนี้ เราได้สร้างรายการ HTML ตามรายการของอาร์เรย์:
<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>
ขั้นตอนที่ 2 การเพิ่มรายการ:
ใน HTML ให้เพิ่มฟิลด์ข้อความ และผูกเข้ากับแอปพลิเคชันด้วยng-model
คำสั่ง
ในคอนโทรลเลอร์ สร้างฟังก์ชันชื่อaddItemและใช้ค่าของaddMeฟิลด์อินพุตเพื่อเพิ่มรายการลงในproductsอาร์เรย์
เพิ่มปุ่ม และกำหนดng-clickคำสั่งที่จะเรียกใช้addItemฟังก์ชันเมื่อคลิกปุ่ม
ตัวอย่าง
ตอนนี้เราสามารถเพิ่มสินค้าในรายการช้อปปิ้งของเราได้:
<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>
ขั้นตอนที่ 3 การลบรายการ:
เรายังต้องการที่จะสามารถลบรายการออกจากรายการซื้อของ
ในคอนโทรลเลอร์ ให้สร้างฟังก์ชันชื่อremoveItemซึ่งรับดัชนีของรายการที่คุณต้องการลบเป็นพารามิเตอร์
ใน HTML ให้สร้าง<span>องค์ประกอบสำหรับแต่ละรายการ และให้ng-clickคำสั่งที่เรียกใช้removeItem
ฟังก์ชันด้วยค่า$indexปัจจุบัน
ตัวอย่าง
ตอนนี้เราสามารถลบสินค้าออกจากรายการซื้อของได้:
<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>
ขั้นตอนที่ 4 การจัดการข้อผิดพลาด:
แอปพลิเคชันมีข้อผิดพลาดบางอย่าง เช่น หากคุณพยายามเพิ่มรายการเดียวกันสองครั้ง แอปพลิเคชันจะขัดข้อง นอกจากนี้ ไม่ควรเพิ่มรายการว่าง
เราจะแก้ไขโดยตรวจสอบมูลค่าก่อนเพิ่มรายการใหม่
ใน HTML เราจะเพิ่มคอนเทนเนอร์สำหรับข้อความแสดงข้อผิดพลาด และเขียนข้อความแสดงข้อผิดพลาดเมื่อมีคนพยายามเพิ่มรายการที่มีอยู่
ตัวอย่าง
รายการช้อปปิ้งที่มีความเป็นไปได้ในการเขียนข้อความแสดงข้อผิดพลาด:
<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>
ขั้นตอนที่ 5. การออกแบบ:
แอปพลิเคชันใช้งานได้ แต่สามารถใช้การออกแบบที่ดีกว่านี้ได้ เราใช้สไตล์ชีต W3.CSS เพื่อจัดรูปแบบแอปพลิเคชันของเรา
เพิ่มสไตล์ชีต W3.CSS และรวมคลาสที่เหมาะสมตลอดทั้งแอปพลิเคชัน และผลลัพธ์จะเหมือนกับรายการซื้อที่ด้านบนของหน้านี้
ตัวอย่าง
จัดรูปแบบแอปพลิเคชันของคุณโดยใช้สไตล์ชีต W3.CSS:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">