Indonesia

Tutorial AngularJS

Aplikasi AngularJS

Panduan Awal Mengenai Direktif AngularJS

Hai teman-teman masa depan para ahli AngularJS! Hari ini, kita akan memulai perjalanan menarik ke dunia direktif AngularJS. Jangan khawatir jika Anda baru dalam programming – saya akan menjadi panduan ramah Anda, menjelaskan segala sesuatu secara langkah demi langkah. Jadi, ambil secangkir kopi (atau teh, jika itu yang Anda sukai), dan mari kita masuk ke dalam!

AngularJS - Directives

Apa Itu Direktif?

Sebelum kita mulai, mari kita pahami apa itu direktif. Berpikir tentang direktif sebagai petunjuk khusus yang kita berikan kepada HTML. Mereka seperti mantra magis yang membuat halaman web kita hidup dengan konten dan perilaku dinamis. Keren, kan?

Sekarang, mari kita jelajahi beberapa direktif yang paling umum digunakan dalam AngularJS.

Direktif ng-app

Direktif ng-app adalah seperti dasar rumah AngularJS kita. Itu memberitahu AngularJS, "Hey, ini tempat aplikasi saya dimulai!"

Contoh:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app>
<p>Selamat datang di aplikasi AngularJS saya!</p>
</body>
</html>

Dalam contoh ini, kita menambahkan ng-app ke tag <body>. Ini memberitahu AngularJS bahwa segala sesuatu di dalam <body> adalah bagian dari aplikasi AngularJS kita.

Direktif ng-init

Direktif ng-init adalah seperti topi sihir – itu memungkinkan kita menginisialisasi variabel langsung di HTML. Itu bagus untuk demo sederhana, tapi dalam aplikasi nyata, kita biasanya menginisialisasi data di dalam controller.

Contoh:

<div ng-app ng-init="firstName='John'; lastName='Doe'">
<p>Nama adalah {{ firstName + " " + lastName }}</p>
</div>

Di sini, kita menggunakan ng-init untuk mengatur nilai firstName dan lastName. Kemudian, kita menampilkan nilai ini menggunakan ekspresi AngularJS (dua kurung kurawal).

Direktif ng-model

Direktif ng-model adalah seperti jalan dua arah antara HTML Anda dan data aplikasi. Itu dapat:

  1. Mengikat input, select, atau textarea ke properti di dalam scope
  2. Menyediakan validasi jenis data
  3. Mengatur kelas CSS untuk elemen
  4. Mengikat elemen HTML ke validasi formulir

Contoh:

<div ng-app>
<input type="text" ng-model="name">
<p>Hai, {{ name }}!</p>
</div>

Dalam contoh ini, apa pun yang Anda ketik di kotak input akan segera muncul setelah "Hai," di paragraf di bawahnya. Itu seperti magis, tapi itu hanya kekuatan ng-model!

Direktif ng-repeat

Direktif ng-repeat adalah seperti mesin fotokopi untuk elemen HTML. Itu dapat meniru set elemen HTML untuk setiap item dalam array. Itu sangat berguna untuk membuat daftar atau tabel secara dinamis.

Contoh:

<div ng-app ng-init="fruits=['Apple', 'Banana', 'Orange']">
<ul>
<li ng-repeat="fruit in fruits">
{{ fruit }}
</li>
</ul>
</div>

Ini akan membuat daftar buah-buahan. Direktif ng-repeat akan mengulang elemen <li> untuk setiap buah di dalam array.

Contoh Komprehensif

Sekarang, mari kita gabungkan semua ini dalam contoh yang lebih kompleks:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app ng-init="students=[
{name:'John Doe', grade: 85},
{name:'Jane Smith', grade: 92},
{name:'Bob Johnson', grade: 78}
]">
<h2>Penyusunan Nilai Murid</h2>
<table border="1">
<tr>
<th>Nama</th>
<th>Nilai</th>
</tr>
<tr ng-repeat="student in students">
<td>{{ student.name }}</td>
<td>{{ student.grade }}</td>
</tr>
</table>
<br>
<h3>Tambah Murid Baru</h3>
<form>
Nama: <input type="text" ng-model="newName"><br>
Nilai: <input type="number" ng-model="newGrade"><br>
<button ng-click="students.push({name:newName, grade:newGrade})">Tambah Murid</button>
</form>
</body>
</html>

mari kitauraikan ini:

  1. Kita mulai dengan ng-app di tag <body> untuk menginisialisasi aplikasi AngularJS kita.
  2. Kita menggunakan ng-init untuk membuat array murid awal.
  3. Kita menggunakan ng-repeat untuk membuat baris tabel untuk setiap murid.
  4. Kita menggunakan ng-model untuk mengikat input field ke variabel.
  5. Kita menggunakan ng-click (direktif baru!) untuk menambah murid baru ke array saat tombol diklik.

Contoh ini menunjukkan bagaimana direktif ini bekerja bersama-sama untuk membuat aplikasi web dinamis dan interaktif. Anda dapat menambah murid baru, dan mereka akan segera muncul di tabel!

Kesimpulan

Selamat! Anda baru saja mengambil langkah pertama ke dunia direktif AngularJS. Kita telah menutupi dasar-dasar ng-app, ng-init, ng-model, dan ng-repeat. Ini hanya beberapa dari banyak direktif yang ditawarkan AngularJS, tapi mereka adalah titik awal yang bagus.

Ingat, belajar programming seperti belajar bahasa baru. Itu memerlukan waktu dan latihan, tapi sebelum Anda tahu, Anda akan "berbicara" AngularJS dengan lancar! Terus mencoba dengan direktif ini, cobalah menggabungkannya dalam cara yang berbeda, dan yang paling penting, bersenang-senang!

Selamat coding, para ahli AngularJS masa depan!

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Aplikasi Pertama
Tutorial Selanjutnya:
AngularJS - Ekspresi