Aplikasi AngularJS

Waktu untuk membuat aplikasi AngularJS yang sebenarnya telah tiba.

Buat daftar belanja

Biarkan kami menggunakan beberapa fitur AngularJS untuk membuat daftar belanja, di mana Anda dapat menambahkan atau menghapus produk:

Daftar belanja saya
  • {{x}}×

{{errortext}}


Keterangan aplikasi

Langkah ke 1: Mulai

Pertama-tama buat nama myShoppingList aplikasi, dan tambahkan yang dinamai myCtrl kontroler

kontroler yang dinamai products mengisi array ke $scope dalam.

Di HTML, kami menggunakan ng-repeat perintah untuk menampilkan daftar yang di buat dari item array.

Contoh

Sampai saat ini, kami telah membuat daftar HTML yang di buat 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>
    Sekarang kami dapat menambahkan produk ke daftar belanja:
  </ul>
</div>

Coba Sendiri

Langkah ke 2: Tambahkan produk

Di HTML, tambahkan bidang teks dan gunakan ng-model perintah untuk menghubungkannya ke aplikasi.

Kami juga ingin dapat menghapus produk dari daftar belanja. addItem fungsi, dan gunakan addMe Nilai input bidang akan menambahkan produk ke products di dalam array.

Tambahkan tombol satu dan tentukan ng-click Perintah, perintah ini akan dijalankan saat tombol ini diklik addItem Fungsi.

Contoh

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>
    Sekarang kami dapat menambahkan produk ke daftar belanja:
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Tambah</button>
</div>

Coba Sendiri

<li ng-repeat="x in products">{{x}}</li>

Langkah ke 3: Menghapus Produk

Kami juga ingin dapat menghapus produk dari daftar belanja. removeItem Pada kontroler, buat fungsi bernama

Pada HTML, buat elemen untuk setiap item yang akan dihapus, fungsi ini akan menerima indeks item yang ingin dihapus sebagai parameter. <span> dan menyediakan ng-click Instruksi, instruksi ini menggunakan elemen saat ini indeks Panggilan removeItem Fungsi.

Contoh

Sekarang kami dapat menghapus produk dari daftar belanja:

<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()">Tambah</button>
</div>

Coba Sendiri

Langkah ke 4: Pengelolaan Kesalahan

Aplikasi ini memiliki beberapa kesalahan, seperti, jika Anda mencoba menambahkan produk yang sama dua kali, aplikasi akan patah. Juga, tidak seharusnya diizinkan untuk menambahkan produk kosong.

Kami akan memperbaiki ini dengan memeriksa nilai sebelum menambahkan produk baru.

Pada HTML, kami akan menambahkan sebuah kontainer untuk pesan kesalahan dan menulis pesan kesalahan saat ada yang mencoba menambahkan produk yang sudah ada.

Contoh

Daftar Belanja, dapat 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 = "该商品已经在您的购物清单中。";
    }
  }
  $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()">Tambah</button>
  <p>{{errortext}}</p>
</div>

Coba Sendiri

Langkah ke 5: Desain

Aplikasi ini dapat dijalankan, tetapi dapat digunakan dengan desain yang lebih baik. Kita menggunakan tabel gaya W3.CSS untuk merancang aplikasi kami.

Tambahkan tabel gaya W3.CSS dan termasuk kelas yang sesuai di seluruh aplikasi, hasilnya akan sama seperti daftar belanja di bagian atas halaman ini.

Contoh

Gunakan tabel gaya W3.CSS untuk merancang aplikasi Anda:

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

Coba Sendiri