AngularJS - Custom Directives
Hai pengguna AngularJS masa depan! Hari ini, kita akan memulakan sebuah perjalanan menarik ke dunia direktif custom. Jangan bimbang jika anda baru dalam programming - saya akan menjadi pandu anda, dan kita akan membuat ini langkah demi langkah. Pada akhir panduan ini, anda akan dapat membuat direktif custom anda sendiri seperti seorang pro!
Mengerti Direktif Custom
Apa Itu Direktif?
Dalam realm yang magical AngularJS, direktif adalah seperti sihir khas yang memberitahu HTML bagaimana hendak berkelak. Ia adalah cara untuk memperluaskan HTML dengan atribut dan elemen baru, memberikan kekuatan superpadanya!
Imajinasi anda sedang membina rumah (aplikasi web anda). Elemen HTML standard adalah seperti blok bangunan asas - batu bata, jendela, pintu. Tetapi, apa kalau anda mahu sesuatu yang khas, seperti pintu rahasia atau rak buku yang berputar? Itulah tempat direktif custom berada!
Mengapa Menggunakan Direktif Custom?
- Reusability: Buat sekali, guna dimana-mana!
- Encapsulation: Simpan fungsi yang berkaitan bersama-sama.
- Readability: Buat kod anda mudah dipahami.
- Modularity: Pecahkan aplikasi anda kepada bahagian kecil dan mudah dikelola.
Sekarang, mari kita lipatkan lengan dan masuk ke dalam membuat direktif custom pertama kita!
Contoh: Membuat Direktif Custom Sederhana
Langkah 1: Menyiapkan Aplikasi AngularJS Kita
Pertama, mari kita buat aplikasi AngularJS dasar. Jangan bimbang, ia lebih mudah daripada yang anda fikirkan!
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Direktif Custom Pertama Saya</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<!-- Kita akan menambah direktif custom kita disini -->
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
// Kita akan menambah logik kontroler disini
});
</script>
</body>
</html>Ini menyiapkan aplikasi AngularJS dasar bernama 'myApp' dengan kontroler bernama 'MyController'. Anggap kontroler ini sebagai otak aplikasi kita.
Langkah 2: Membuat Direktif Custom Kita
Sekarang, mari kita tambahkan direktif custom kita. Kita akan membuat direktif salam sederhana.
app.directive('myGreeting', function() {
return {
restrict: 'E',
template: '<h1>Hallo, {{name}}!</h1>',
scope: {
name: '@'
}
};
});mari kitauraikan ini:
-
app.directive('myGreeting', function() { ... }): Ini membuat direktif baru bernama 'myGreeting'. -
restrict: 'E': Ini memberitahu AngularJS bahawa direktif kita akan digunakan sebagai elemen HTML baru. -
template: '<h1>Hallo, {{name}}!</h1>': Ini adalah template HTML untuk direktif kita. -
scope: { name: '@' }: Ini mencipta skop isolasi untuk direktif kita, dengan atribut 'name' yang kita boleh passing masuk.
Langkah 3: Menggunakan Direktif Custom Kita
Sekarang, mari kita gunakan direktif baru yang berkilau ini dalam HTML kita:
<div ng-controller="MyController">
<my-greeting name="Dunia"></my-greeting>
</div>Output
Bila anda jalankan kode ini, anda akan lihat:
Hallo, Dunia!Selamat! Anda baru saja membuat dan menggunakan direktif custom pertama anda!
Fitur Direktif Custom Lanjut
Sekarang kita sudah mengetahui dasar-dasar, mari kita jelajahi beberapa fitur lanjut dari direktif custom.
Direktif Dengan Controller
Kita boleh menambah controller ke direktif kita untuk tingkah laku yang lebih kompleks:
app.directive('myAdvancedGreeting', function() {
return {
restrict: 'E',
template: '<h2>{{greeting}}, {{name}}!</h2>',
scope: {
name: '@'
},
controller: function($scope) {
var greetings = ['Hallo', 'Hi', 'Hey', 'Howdy'];
$scope.greeting = greetings[Math.floor(Math.random() * greetings.length)];
}
};
});Direktif ini akan memilih secara rawak setiap kali ia digunakan:
<my-advanced-greeting name="Pembelajar AngularJS"></my-advanced-greeting>Anda mungkin akan lihat:
Howdy, Pembelajar AngularJS!Atau:
Hi, Pembelajar AngularJS!Direktif Dengan Fungsi Link
Fungsi link adalah tempat anda boleh manipulasikan DOM:
app.directive('myColorfulGreeting', function() {
return {
restrict: 'E',
template: '<h3>Hallo, {{name}}!</h3>',
scope: {
name: '@'
},
link: function(scope, element, attrs) {
var colors = ['merah', 'biru', 'hijau', 'ungu', 'oranye'];
var randomColor = colors[Math.floor(Math.random() * colors.length)];
element.css('color', randomColor);
}
};
});Direktif ini akan menampilkan salam dalam warna rawak:
<my-colorful-greeting name="Dunia Warna"></my-colorful-greeting>Tabel Metode
Berikut adalah tabel yang menggabungkan metode utama yang kita gunakan dalam direktif custom kita:
| Metode | Keterangan |
|---|---|
restrict |
Menentukan bagaimana direktif boleh digunakan (E: Elemen, A: Atribut, C: Kelas, M: Komentar) |
template |
Menentukan template HTML untuk direktif |
scope |
Mencipta skop isolasi untuk direktif |
controller |
Menentukan controller untuk direktif |
link |
Membolehkan manipulasi DOM langsung dan menambah tingkah laku ke direktif |
Kesimpulan
Selamat! Anda baru saja membuat langkah pertama ke dalam dunia yang menakjubkan direktif custom AngularJS. Kita telah meliputi dasar-dasar membuat direktif sederhana, dan bahkan menyelami konsep lanjut seperti controllers dan fungsi link.
Ingat, membuat direktif custom adalah seperti belajar kekuatan super - ia memerlukan latihan, tetapi sekali anda menguasaiinya, anda akan dapat membuat komponen yang dinamik dan boleh digunakan semula untuk aplikasi web anda.
Terus mencoba, terus belajar, dan terutamanya, bersenang-senang! Dunia AngularJS luas dan menarik, dan anda kini dilengkapi untuk menjelajahinya lebih jauh. Selamat berkoding, para master AngularJS masa depan!
Credits: Image by storyset