AngularJS - HTML DOM

Hai, pengembang web yang sedang mencari ilmu! Hari ini, kita akan manduk ke dalam dunia yang menarik AngularJS dan bagaimana ia berinteraksi 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 saja memulai programming – kita akan mulai dari dasar dan maju secara bertahap. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita mulai!

Pengenalan ke AngularJS dan HTML DOM

Sebelum kita masuk ke dalam detil, mari kita mengerti secara cepat 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 programming 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 seperti lampu lalu lintas untuk elemen HTML Anda. Itu dapat mengaktifkan atau menonaktifkan elemen berdasarkan kondisi. Mari kita lihat contoh:

<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 bisa 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. Bayangkan itu seperti mantel penyihir – itu dapat membuat elemen muncul atau hilang berdasarkan 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 muncul 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 jalan hitam ng-show. Sementara ng-show menampilkan elemen saat kondisi benar, ng-hide menyembunyikannya. Mari kita lihatnya dalam aksi:

<div ng-hide="loading">
<h2>Selamat datang di 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 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 menambahkan variabel count, yang ditampilkan di dalam teks tombol. Itu seperti memiliki penghitung klik pribadi!

Contoh: Menggabungkan Semua

Sekarang, mari kita gabungkan direktif ini ke dalam contoh yang lebih kompleks. Bayangkan kita menciptakan 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

Dan itu dia, teman-teman! Kita telah mengeksplorasi beberapa direktif AngularJS yang paling umum digunakan untuk memodifikasi HTML DOM. 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 cepat direktif yang kita pelajari:

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

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

Credits: Image by storyset