AngularJS - HTML DOM

Hai, para pengembang web yang sedang mencari tantangan! Hari ini, kita akan mendalam ke dunia yang menarik AngularJS dan bagaimana cara kerjanya bersamaan dengan HTML DOM (Document Object Model). Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk membimbing Anda dalam perjalanan ini. Jangan khawatir jika Anda baru dalam dunia pemrograman – kita akan memulai dari dasar dan kemudian maju perlahan. Jadi, ambil secangkir kopi (atau teh, jika itu hal yang Anda sukai), dan mari kita mulai!

Pengenalan ke AngularJS dan HTML DOM

Sebelum kita masuk ke hal-hal khusus, mari kita mengerti secara singkat apa itu AngularJS dan HTML DOM.

AngularJS adalah kerangka kerja JavaScript yang kuat yang memperpanjang HTML dengan atribut baru, membuatnya mudah untuk menciptakan aplikasi web dinamis. Itu seperti memberikan superpower ke HTML biasa Anda!

Sementara itu, HTML DOM adalah antarmuka pemrograman untuk dokumen HTML. Itu mewakili struktur dokumen sebagai hierarki seperti pohon, memungkinkan Anda mengakses dan memodifikasi konten, struktur, dan gaya halaman web.

Sekarang, mari kita jelajahi bagaimana AngularJS meningkatkan kemampuan kita untuk bekerja dengan HTML DOM melalui direktifnya.

Direktif ng-disabled

Direktif ng-disabled mirip dengan lampu lalu lintas untuk elemen HTML Anda. Itu dapat mengaktifkan atau menonaktifkan elemen berdasarkan suatu kondisi. Mari kita lihat contohnya:

<input type="checkbox" ng-model="myCheckbox">
<button ng-disabled="!myCheckbox">Klik saya!</button>

Dalam contoh ini, tombol dinonaktifkan sampai kotak centang dicentang. Itu seperti mengatakan ke tombol, "Kamu tidak dapat bermain sampai temanmu kotak centang mengatakan itu baik!"

Ketika kotak centang dicentang, myCheckbox adalah false, jadi !myCheckbox adalah true, menonaktifkan tombol. Ketika dicentang, halnya sebaliknya, mengaktifkan tombol.

Direktif ng-show

Berikutnya adalah direktif ng-show. Pahami ini seperti mantel penyihir – itu dapat membuat elemen muncul atau hilang berdasarkan suatu kondisi. Berikut cara kerjanya:

<p ng-show="showSecret">Kode rahasia adalah 42!</p>
<button ng-click="showSecret = !showSecret">
{{showSecret ? 'Sembunyikan' : 'Tampilkan'}} Rahasia
</button>

Dalam contoh ini, paragraf dengan kode rahasia hanya ditampilkan saat showSecret adalah true. Tombol mengubah nilai ini. Itu seperti bermain peek-a-boo dengan elemen halaman web Anda!

Direktif ng-hide

Direktif ng-hide adalah saudara jitu ng-show. Sedangkan ng-show menampilkan elemen saat kondisi benar, ng-hide menyembunyikannya. Mari kita lihatnya dalam aksi:

<div ng-hide="loading">
<h2>Selamat datang ke website saya!</h2>
<p>Konten ini dimuat saat siap.</p>
</div>
<p ng-show="loading">Memuat... Mohon menunggu.</p>

Di sini, kita menyembunyikan konten utama saat halaman sedang dimuat, dan menampilkan pesan memuat sebagai gantinya. Ketika loading menjadi false, itu seperti menarik kain penutup untuk menampilkan website Anda!

Direktif ng-click

Direktif ng-click adalah seperti menambah tombol ke remote TV Anda – itu memungkinkan Anda menentukan apa yang terjadi saat elemen diklik. Berikut contoh sederhana:

<button ng-click="count = count + 1" ng-init="count=0">
Klik: {{count}}
</button>

Ini menciptakan tombol yang menghitung berapa kali ia diklik. Setiap klik menambah variabel count, yang ditampilkan dalam teks tombol. Itu seperti memiliki penghitung klik pribadi Anda!

Contoh: Menggabungkan Semua

Sekarang, mari kita gabungkan direktif ini ke dalam contoh yang lebih kompleks. Bayangkan kita membuat pengelola tugas sederhana:

<div ng-app="taskManager" ng-controller="taskCtrl">
<h2>Pengelola Tugas Saya</h2>

<input type="text" ng-model="newTask" placeholder="Masukkan tugas baru">
<button ng-click="addTask()" ng-disabled="!newTask">Tambah Tugas</button>

<ul>
<li ng-repeat="task in tasks">
{{task}}
<button ng-click="removeTask($index)">Selesai</button>
</li>
</ul>

<p ng-show="tasks.length == 0">Belum ada tugas. Tambahkan beberapa tugas di atas!</p>

<button ng-click="clearAll()" ng-hide="tasks.length == 0">Bersihkan Semua Tugas</button>
</div>

<script>
var app = angular.module('taskManager', []);
app.controller('taskCtrl', function($scope) {
$scope.tasks = [];

$scope.addTask = function() {
if ($scope.newTask) {
$scope.tasks.push($scope.newTask);
$scope.newTask = '';
}
};

$scope.removeTask = function(index) {
$scope.tasks.splice(index, 1);
};

$scope.clearAll = function() {
$scope.tasks = [];
};
});
</script>

Mari kitauraikan ini:

1. Kita menggunakan ng-disabled untuk mencegah penambahan tugas kosong.
2. ng-click digunakan untuk menambah tugas, menghapus tugas individual, dan membersihkan semua tugas.
3. ng-show menampilkan pesan saat tidak ada tugas.
4. ng-hide menyembunyikan tombol "Bersihkan Semua Tugas" saat tidak ada tugas.
5. Kita juga memperkenalkan ng-repeat, yang menciptakan item daftar untuk setiap tugas dalam array.

Output

Ketika Anda menjalankan kode ini, Anda akan melihat pengelola tugas sederhana tapi berfungsi. Anda dapat menambah tugas, menandai mereka sebagai selesai (yang menghapusnya), dan membersihkan semua tugas. UI diperbarui secara dinamis berdasarkan tindakan Anda, menunjukkan kekuatan direktif AngularJS.

Kesimpulan

Danitu, teman-teman! Kita telah mengenal beberapa direktif AngularJS yang paling banyak digunakan untuk memanipulasi HTML DOM. Alat-alat ini memungkinkan Anda menciptakan aplikasi web dinamis dan responsif dengan mudah. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba direktif ini dalam proyek Anda sendiri.

Berikut adalah tabel rujukan singkat dari direktif yang kitaulas:

Direktif	Tujuan
ng-disabled	Menonaktifkan elemen berdasarkan suatu kondisi
ng-show	Menampilkan elemen saat kondisi benar
ng-hide	Menyembunyikan elemen saat kondisi benar
ng-click	Menentukan perilaku saat elemen diklik

Tetap kode, tetap belajar, dan terutama, bersenang-senang! Dunia pengembangan web luas dan menarik, dan Anda baru saja memulai. Sampai jumpa lagi, selamat coding!

Credits: Image by storyset