Aplikasi AngularJS
Saatnya membuat Aplikasi AngularJS yang sebenarnya.
Buat Daftar Belanja
Mari gunakan beberapa fitur AngularJS untuk membuat daftar belanja, tempat Anda dapat menambah atau menghapus item:
Daftar Belanja Saya
- susu×
- Roti×
- Keju×
Aplikasi Dijelaskan
Langkah 1. Memulai:
Mulailah dengan membuat aplikasi bernama myShoppingList, dan tambahkan pengontrol bernama myCtrlke dalamnya.
Controller menambahkan sebuah array bernama productske current
$scope.
Dalam HTML, kami menggunakan ng-repeatdirektif untuk menampilkan daftar menggunakan item dalam array.
Contoh
Sejauh ini kami telah membuat daftar HTML berdasarkan item array:
<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>
Langkah 2. Menambahkan Item:
Di HTML, tambahkan bidang teks, dan ikat ke aplikasi dengan ng-model
arahan.
Di pengontrol, buat fungsi bernama addItem, dan gunakan nilai addMebidang input untuk menambahkan item ke productsarray.
Tambahkan tombol, dan berikan ng-clickarahan yang akan menjalankan addItemfungsi saat tombol diklik.
Contoh
Sekarang kita dapat menambahkan item ke daftar belanja kita:
<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>
Langkah 3. Menghapus Item:
Kami juga ingin dapat menghapus item dari daftar belanja.
Di pengontrol, buat fungsi bernama removeItem, yang mengambil indeks item yang ingin Anda hapus, sebagai parameter.
Di HTML, buat <span>elemen untuk setiap item, dan beri mereka ng-clickarahan yang memanggil removeItem
fungsi dengan current $index.
Contoh
Sekarang kita dapat menghapus item dari daftar belanja kita:
<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>
Langkah 4. Penanganan Kesalahan:
Aplikasi memiliki beberapa kesalahan, seperti jika Anda mencoba menambahkan item yang sama dua kali, aplikasi mogok. Juga, seharusnya tidak diizinkan untuk menambahkan item kosong.
Kami akan memperbaikinya dengan memeriksa nilainya sebelum menambahkan item baru.
Dalam HTML, kami akan menambahkan wadah untuk pesan kesalahan, dan menulis pesan kesalahan ketika seseorang mencoba menambahkan item yang ada.
Contoh
Daftar belanja, dengan kemungkinan untuk menulis pesan kesalahan:
<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>
Langkah 5. Desain:
Aplikasi berfungsi, tetapi dapat menggunakan desain yang lebih baik. Kami menggunakan lembar gaya W3.CSS untuk menata aplikasi kami.
Tambahkan lembar gaya W3.CSS, dan sertakan kelas yang tepat di seluruh aplikasi, dan hasilnya akan sama dengan daftar belanja di bagian atas halaman ini.
Contoh
Gaya aplikasi Anda menggunakan lembar gaya W3.CSS:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">