Ini adalah waktu untuk membuat AngularJS Aplikasi nyata.
Membuat Daftar Belanja
Mari kita menggunakan beberapa fitur AngularJS untuk membuat daftar belanja, yang Anda dapat menambah atau menghapus item:
Saya Daftar Belanja
- {{x}} ×
{{ErrorText}}
aplikasi Dijelaskan
Langkah 1. Persiapan:
Mulailah dengan membuat sebuah aplikasi bernama myShoppingList , dan menambahkan controller bernama myCtrl untuk itu.
Controller menambahkan array bernama products untuk saat ini $scope .
Dalam HTML, kita menggunakan ng-repeat direktif untuk menampilkan daftar menggunakan item dalam array.
Contoh
Sejauh ini kami telah membuat daftar HTML berdasarkan item dari sebuah 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>
Cobalah sendiri " Langkah 2. Menambahkan Item:
Dalam HTML, tambahkan kolom teks, dan mengikat ke aplikasi dengan ng-model direktif.
Di controller, membuat fungsi bernama addItem , dan menggunakan nilai addMe field input untuk menambahkan item ke products larik.
Menambahkan tombol, dan memberikan sebuah ng-click direktif yang akan menjalankan addItem fungsi ketika tombol diklik.
Contoh
Sekarang kita dapat menambahkan item ke daftar belanja kami:
<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>
Cobalah sendiri " Langkah 3. Menghapus Item:
Kami juga ingin dapat menghapus item dari daftar belanja.
Di controller, membuat fungsi bernama removeItem , yang mengambil indeks item yang ingin Anda hapus, sebagai Penyempitan sebuah
Dalam HTML, membuat <span> elemen untuk setiap item, dan memberi mereka ng-click direktif yang menyebut removeItem fungsi dengan saat ini $index .
Contoh
Sekarang kita dapat menghapus item dari daftar belanja kami:
<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>
Cobalah sendiri " Langkah 4. Penanganan Kesalahan:
Aplikasi ini memiliki beberapa kesalahan, seperti jika Anda mencoba untuk menambahkan item yang sama dua kali, aplikasi crash. Selain itu, seharusnya tidak diperbolehkan untuk menambahkan item kosong.
Kami akan memperbaikinya dengan memeriksa nilai sebelum menambahkan item baru.
Dalam HTML, kita akan menambahkan sebuah wadah untuk pesan kesalahan, dan menulis pesan kesalahan ketika seseorang mencoba untuk menambahkan item yang ada.
Contoh
Sebuah daftar belanja, dengan kemungkinan untuk menulis pesan error:
<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>
Cobalah sendiri " Langkah 5. Desain:
Aplikasi ini bekerja, tapi bisa menggunakan desain yang lebih baik. Kami menggunakan stylesheet W3.CSS untuk gaya aplikasi kita.
Tambahkan stylesheet W3.CSS, dan termasuk kelas yang tepat seluruh aplikasi, dan hasilnya akan sama dengan daftar belanja di bagian atas halaman ini.
Contoh
Gaya aplikasi Anda menggunakan stylesheet W3.CSS:
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
Cobalah sendiri "