Malay

Tutorial AngularJS

Aplikasi AngularJS

AngularJS - Borang Pesanan: Panduan Pemula

Hai sana, para ahli AngularJS masa depan! Hari ini, kita akan memulakan sebuah perjalanan menarik ke dunia borang pesanan AngularJS. Jangan khawatir jika anda belum pernah menulis satu baris kod sebelum ini - kita akan mulakan dari asas dan maju ke arah atas. Pada akhir panduan ini, anda akan dapat membuat borang pesanan yang dinamik seperti seorang pro!

AngularJS - Order Form

Apa Itu AngularJS?

Sebelum kita melihat borang pesanan, mari kitaambil sedikit masa untuk memahami apa itu AngularJS. Bayangkan anda sedang membina sebuah rumah. HTML adalah seperti batu dan mortar, CSS adalah cat dan hiasan, dan AngularJS? Well, itu seperti sistem rumah pintar yang membuat segalanya interaktif dan dinamik.

AngularJS adalah kerangka kerja JavaScript yang memperluangkan HTML dengan atribut baru, menjadikannya sesuai untuk membuat aplikasi web dinamik. Itu seperti memberi kekuatan super kepada HTML anda yang biasanya statik!

Menyiapkan Projek Kita

Pertama-tama, mari kita siapkan projek kita. Kita perlu menyertakan pustaka AngularJS dalam fail HTML kita. Berikut cara untuk melakukannya:

<!DOCTYPE html>
<html ng-app="orderApp">
<head>
<title>Borang Pesanan AngularJS Saya</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Borang kita akan diletakkan di sini -->
<script src="app.js"></script>
</body>
</html>

Dalam kod ini, kita melakukan beberapa hal yang penting:

  1. Kita menambah ng-app="orderApp" ke tag <html>. Ini memberitahu AngularJS bahawa ini adalah elemen root aplikasi kita.
  2. Kita menyertakan pustaka AngularJS menggunakan tag <script>.
  3. Kita juga menyertakan fail JavaScript sendiri (app.js) di mana kita akan menulis kod AngularJS kita.

Membuat Modul dan Pengawal AngularJS

Sekarang, mari kita buat fail app.js dan mensetkan modul dan pengawal AngularJS kita:

var app = angular.module('orderApp', []);

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};
});

Berikut apa yang berlaku:

  1. Kita mencipta modul AngularJS bernama 'orderApp'.
  2. Kita menentukan pengawal bernama 'OrderController'.
  3. Dalam pengawal, kita menginitialkan objek order di $scope. Objek ini akan menyimpan item pesanan dan jumlah keseluruhan.

Membina Borang Pesanan

Sekarang, mari kita buat borang pesanan kita dalam HTML:

<div ng-controller="OrderController">
<h2>Tempah Pesanan Anda</h2>
<form>
<label>Nama Item: <input type="text" ng-model="newItem.name"></label><br>
<label>Harga: $<input type="number" ng-model="newItem.price"></label><br>
<button ng-click="addItem()">Tambah Item</button>
</form>

<h3>Ringkasan Pesanan</h3>
<ul>
<li ng-repeat="item in order.items">
{{item.name}} - ${{item.price}}
<button ng-click="removeItem($index)">Buang</button>
</li>
</ul>
<p>Jumlah: ${{order.total}}</p>
</div>

mari kitaongkoskan ini:

  1. Kita menggunakan ng-controller untuk menghubungkan seksyen ini dengan Pengawal OrderController.
  2. Kita ada ruangan untuk nama item dan harga, menggunakan ng-model untuk mengikat mereka ke newItem.name dan newItem.price.
  3. Kita ada tombol "Tambah Item" yang memanggil fungsi addItem() apabila diklik.
  4. Kita menggunakan ng-repeat untuk menunjukkan setiap item dalam pesanan.
  5. Setiap item mempunyai tombol "Buang" yang memanggil fungsi removeItem().
  6. Kita menunjukkan jumlah pesanan keseluruhan.

Implementasi Logik Pengawal

Sekarang, mari kita tambah fungsi yang diperlukan ke pengawal kita:

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};

$scope.newItem = {name: '', price: ''};

$scope.addItem = function() {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
};

$scope.removeItem = function(index) {
$scope.order.items.splice(index, 1);
$scope.calculateTotal();
};

$scope.calculateTotal = function() {
$scope.order.total = $scope.order.items.reduce(function(sum, item) {
return sum + item.price;
}, 0);
};
});

Berikut apa yang setiap fungsi lakukan:

  1. addItem(): Menambah item baru ke pesanan, menghitung jumlah baru, dan menreset ruangan input.
  2. removeItem(): Menghapus item dari pesanan dan menghitung jumlah baru.
  3. calculateTotal(): Menjumlahkan harga semua item dalam pesanan.

Menambahbaik Pengalaman Pengguna

Untuk membuat borang kita lebih ramah pengguna, mari kita tambah beberapa validasi:

<form name="orderForm" ng-submit="addItem()" novalidate>
<label>Nama Item: <input type="text" ng-model="newItem.name" required></label><br>
<label>Harga: $<input type="number" ng-model="newItem.price" min="0" step="0.01" required></label><br>
<button type="submit" ng-disabled="orderForm.$invalid">Tambah Item</button>
</form>

Dan kemaskini pengawal kita:

$scope.addItem = function() {
if ($scope.orderForm.$valid) {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
$scope.orderForm.$setPristine();
}
};

Perubahan ini:

  1. Menambah validasi borang untuk memastikan semua ruangan dipenuhi dan harga adalah nombor positif.
  2. Menyembunyikan tombol "Tambah Item" apabila borang adalah invalid.
  3. Menambah item hanya jika borang adalah valid.
  4. Mengembalikan borang ke keadaan asal selepas menambah item.

Kesimpulan

Tahniah! Anda telah membina borang pesanan AngularJS yang berfungsi. Kita telah meliputi asas AngularJS, termasuk modul, pengawal, pengikatan data dwi-hala, dan validasi borang. Ingat, latihan membuat ahli, jadi jangan takut untuk mencuba dan memperluangkan borang ini. Mungkin menambah fitur diskon atau kemampuan menyimpan pesanan? Kesempatan adalah tak terbatas!

Berikut adalah jadual yang menggabungkan direktif AngularJS utama yang kita gunakan:

Direktif Tujuan
ng-app Menentukan elemen root aplikasi AngularJS
ng-controller Menentukan pengawal untuk seksyen aplikasi
ng-model Membuat pengikatan data dwi-hala
ng-click Menentukan fungsi untuk dijalankan apabila elemen diklik
ng-repeat Mengulang elemen untuk setiap item dalam koleksi
ng-submit Menentukan fungsi untuk dijalankan apabila borang diserahkan
ng-disabled Menyembunyikan elemen berdasarkan syarat

Berkoding suka, dan ingat - setiap ahli pernah menjadi pemula. Terus latih, dan anda akan menjadi ahli AngularJS dalam masa yang singkat!

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Menu Tukar
Tutorial Seterusnya:
AngularJS - Tab Carian