Malay

Tutorial AngularJS

Aplikasi AngularJS

Panduan Awal Mengenai Directives AngularJS

Hai sana, para ahli AngularJS masa depan! Hari ini, kita akan memulai perjalanan menarik ke dalam dunia directives AngularJS. Jangan khawatir jika Anda baru dalam programming - saya akan menjadi panduan ramah Anda, menjelaskan segala sesuatunya langkah demi langkah. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita masuk ke dalamnya!

AngularJS - Directives

apa itu Directives?

Sebelum kita mulai, mari kita mengerti apa itu directives. Pihak directives adalah petunjuk khusus yang kita berikan kepada HTML. Itu seperti mantra sihir yang membuat halaman web kita hidup dengan konten dan perilaku dinamis. Keren, kan?

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

Directive ng-app

Directive ng-app adalah seperti dasar rumah AngularJS kita. Itu memberitahu AngularJS, "Halo, 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 semua yang berada di dalam <body> adalah bagian dari aplikasi AngularJS kita.

Directive ng-init

Directive ng-init adalah seperti topi sihir - itu memungkinkan kita menginisialisasi variabel langsung di HTML. Itu bagus untuk demo sederhana, tapi di 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).

Directive ng-model

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

  1. Mengikat input, select, atau textarea ke properti di dalam scope
  2. Menyediakan validasi jenis data untuk data aplikasi
  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 bawah. Itu seperti magik, tapi itu hanya kekuatan ng-model!

Directive ng-repeat

Directive 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. Directive ng-repeat akan meniru elemen <li> untuk setiap buah dalam array.

Contoh Komprehensif

Sekarang, mari kita gabungkan semuanya 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>Penyusun Nilai Siswa</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 Siswa 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 Siswa</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 siswa awal.
  3. Kita menggunakan ng-repeat untuk membuat baris tabel untuk setiap siswa.
  4. Kita menggunakan ng-model untuk mengikat input field ke variabel.
  5. Kita menggunakan ng-click (directive baru!) untuk menambah siswa baru ke array saat tombol ditekan.

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

Kesimpulan

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

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

Happy coding, para ahli AngularJS masa depan!

Credits: Image by storyset

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