Apa itu Petunjuk Kustom?
Arahan kustom di Angular Js adalah arahan yang ditentukan pengguna dengan fungsionalitas yang Anda inginkan. Meskipun AngularJS memiliki banyak arahan yang kuat di luar kotak, terkadang arahan khusus diperlukan.
Dalam tutorial ini, Anda akan belajar-
- Bagaimana Cara Membuat Petunjuk Khusus?
- Arahan dan Cakupan AngularJs
- Menggunakan pengontrol dengan arahan
- Cara membuat arahan yang dapat digunakan kembali
- AngularJS Directive dan komponen - ng-transclude
- Direktif bersarang
- Menangani acara dengan direktif
Bagaimana Cara Membuat Petunjuk Khusus?
Mari kita lihat contoh bagaimana kita bisa membuat custom directive.
Direktif kustom dalam kasus kami hanya akan memasukkan tag div yang memiliki teks "AngularJS Tutorial" di halaman kami saat direktif dipanggil.
Event Registration Guru99 Global Event
Penjelasan Kode:
- Kami pertama kali membuat modul untuk aplikasi sudut kami. Ini diperlukan untuk membuat custom directive karena directive akan dibuat menggunakan modul ini.
- Kita sekarang membuat perintah kustom yang disebut "ngGuru" dan menentukan fungsi yang akan memiliki kode kustom untuk perintah kita.
Catatan:-
Perhatikan bahwa saat mendefinisikan direktif, kami telah mendefinisikannya sebagai ngGuru dengan huruf 'G' sebagai kapital. Dan saat kami mengaksesnya dari tag div kami sebagai arahan, kami mengaksesnya sebagai ng-guru. Beginilah cara angular memahami arahan kustom yang ditentukan dalam aplikasi. Pertama, nama direktif kustom harus dimulai dengan huruf 'ng'. Kedua, simbol tanda hubung '-' hanya boleh disebutkan saat memanggil perintah. Dan ketiga huruf pertama setelah huruf 'ng' saat mendefinisikan direktif bisa berupa huruf kecil atau besar.
- Kami menggunakan parameter template yang ditentukan oleh parameter Angular untuk perintah khusus. Dalam hal ini, kami mendefinisikan bahwa setiap kali direktif ini digunakan, cukup gunakan nilai template dan masukkan ke dalam kode panggilan.
- Di sini kita sekarang menggunakan perintah "ng-guru" yang dibuat secara kustom. Saat kita melakukan ini, nilai yang kita tentukan untuk template kita "Angular JS Tutorial" sekarang akan dimasukkan di sini.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
- Keluaran di atas dengan jelas menunjukkan bahwa perintah ng-guru kustom kami, yang memiliki template yang ditentukan untuk menampilkan teks kustom akan ditampilkan di browser.
Arahan dan Cakupan AngularJs
Cakupan didefinisikan sebagai perekat yang mengikat pengontrol ke tampilan dengan mengelola data antara tampilan dan pengontrol.
Saat membuat direktif AngularJs kustom, mereka secara default akan memiliki akses ke objek cakupan di pengontrol induk.
Dengan cara ini, menjadi mudah bagi custom directive untuk menggunakan data yang diteruskan ke main controller.
Mari kita lihat contoh bagaimana kita bisa menggunakan lingkup pengontrol induk di direktif kustom kita.
Event Registration Guru99 Global Event
Penjelasan Kode:
- Kami pertama kali membuat pengontrol yang disebut, "DemoController". Dalam hal ini, kami mendefinisikan variabel yang disebut tutorialName dan melampirkannya ke objek lingkup dalam satu pernyataan - $ scope.tutorialName = "AngularJS".
- Di custom directive kita, kita bisa memanggil variabel "tutorialName" dengan menggunakan ekspresi. Variabel ini dapat diakses karena didefinisikan dalam pengontrol "DemoController", yang akan menjadi induk untuk direktif ini.
- Kami mereferensikan pengontrol dalam tag div, yang akan bertindak sebagai tag div induk kami. Perhatikan bahwa ini harus dilakukan terlebih dahulu agar perintah kustom kita mengakses variabel tutorialName.
- Kami akhirnya hanya melampirkan direktif kustom kami "ng-guru" ke tag div kami.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
- Output di atas dengan jelas menunjukkan bahwa custom directive kita "ng-guru" menggunakan variabel scope tutorialName pada pengontrol induk.
Menggunakan pengontrol dengan arahan
Angular memberikan fasilitas untuk mengakses variabel anggota pengontrol secara langsung dari perintah kustom tanpa memerlukan objek cakupan.
Ini menjadi perlu di kali karena dalam aplikasi Anda mungkin memiliki beberapa objek lingkup milik beberapa pengontrol.
Jadi ada kemungkinan besar Anda bisa membuat kesalahan dengan mengakses objek cakupan dari pengontrol yang salah.
Dalam skenario seperti itu, ada cara untuk secara khusus menyebutkan mengatakan "Saya ingin mengakses pengontrol khusus ini" dari arahan saya.
Mari kita lihat contoh bagaimana kita bisa mencapai ini.
Event Registration Guru99 Global Event
Penjelasan Kode:
- Kami pertama kali membuat pengontrol yang disebut, "DemoController". Dalam hal ini kita akan mendefinisikan variabel yang disebut "tutorialName" dan kali ini alih-alih melampirkannya ke objek lingkup, kita akan melampirkannya langsung ke pengontrol.
- Dalam custom directive kami, kami secara khusus menyebutkan bahwa kami ingin menggunakan controller "DemoController" dengan menggunakan kata kunci parameter controller.
- Kami membuat referensi ke controller menggunakan parameter "controllerAs". Ini didefinisikan oleh Angular dan merupakan cara untuk mereferensikan controller sebagai referensi.
Catatan: - Dimungkinkan untuk mengakses beberapa pengontrol dalam satu arahan dengan menentukan blok masing-masing dari pernyataan controller, controllerAs dan template.
- Terakhir, di template kami, kami menggunakan referensi yang dibuat di langkah 3 dan menggunakan variabel anggota yang dilampirkan langsung ke pengontrol di Langkah 1.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Keluarannya dengan jelas menunjukkan bahwa custom directive secara khusus mengakses DemoController dan variabel anggota tutorialName yang dilampirkan padanya dan menampilkan teks "Angular".
Cara membuat arahan yang dapat digunakan kembali
Kami sudah melihat kekuatan arahan khusus, tetapi kami dapat membawanya ke tingkat berikutnya dengan membuat arahan kami sendiri yang dapat digunakan kembali.
Misalnya, kami ingin memasukkan kode yang akan selalu menampilkan tag HTML di bawah ini di beberapa layar, yang pada dasarnya hanyalah masukan untuk "Nama" dan "usia" pengguna.
Untuk menggunakan kembali fungsi ini di beberapa layar tanpa coding setiap kali, kami membuat kontrol master atau arahan bersudut untuk menahan kontrol ini ("Nama" dan "usia" pengguna).
Jadi sekarang, alih-alih memasukkan kode yang sama untuk layar di bawah ini setiap saat, kami sebenarnya dapat menyematkan kode ini dalam arahan dan menyematkan arahan itu kapan saja.
Mari kita lihat contoh bagaimana kita bisa mencapai ini.
Event Registration Guru99 Global Event
Penjelasan Kode:
- Dalam cuplikan kode untuk custom directive kami, yang berubah hanyalah nilai yang diberikan ke parameter template custom directive kami.
Alih-alih tag atau teks rencana lima, kami sebenarnya memasukkan seluruh fragmen dari 2 kontrol masukan untuk "Nama" dan "usia" yang perlu ditampilkan di laman kami.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari output di atas, kita dapat melihat bahwa cuplikan kode dari template direktif kustom ditambahkan ke halaman.
AngularJS Directive dan komponen - ng-transclude
Seperti yang kami sebutkan sebelumnya, Angular dimaksudkan untuk memperluas fungsionalitas HTML. Dan kami telah melihat bagaimana kami dapat memiliki injeksi kode dengan menggunakan arahan yang dapat digunakan kembali kustom.
Namun dalam pengembangan aplikasi web modern juga terdapat konsep pengembangan komponen web. Yang pada dasarnya berarti membuat tag HTML kita sendiri yang dapat digunakan sebagai komponen dalam kode kita.
Oleh karena itu angular memberikan tingkat kekuatan lain untuk memperluas tag HTML dengan memberikan kemampuan untuk memasukkan atribut ke dalam tag HTML itu sendiri.
Ini dilakukan dengan tag " ng-transclude ", yang merupakan semacam pengaturan untuk memberitahu angular untuk menangkap segala sesuatu yang diletakkan di dalam direktif di markup.
Mari kita ambil contoh bagaimana kita bisa mencapai ini.
Event Registration Guru99 Global Event
Angular JS
Penjelasan Kode:
- Kami menggunakan arahan untuk menentukan tag HTML khusus yang disebut 'panel' dan menambahkan fungsi yang akan menempatkan beberapa kode khusus untuk tag ini. Dalam output, tag panel kustom kami akan menampilkan teks "AngularJS" dalam persegi panjang dengan batas hitam solid.
- Atribut "transclude" harus disebutkan sebagai benar, yang dibutuhkan oleh angular untuk memasukkan tag ini ke DOM kami.
- Dalam ruang lingkup, kami mendefinisikan atribut judul. Atribut biasanya didefinisikan sebagai pasangan nama / nilai seperti: name = "value". Dalam kasus kami, nama atribut di tag HTML panel kami adalah "judul". Simbol "@" adalah persyaratan dari sudut. Ini dilakukan agar ketika baris title = {{title}} dijalankan pada Langkah 5, kode kustom untuk atribut title ditambahkan ke panel HTML tag.
- Kode khusus untuk atribut judul yang hanya menggambar batas hitam pekat untuk kontrol kita.
- Terakhir, kami memanggil tag HTML khusus kami bersama dengan atribut judul yang telah ditentukan.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
- Keluarannya dengan jelas menunjukkan bahwa atribut judul dari tag html5 panel telah disetel ke nilai khusus "Angular.JS".
Direktif bersarang
Arahan dalam sudut bisa disarangkan. Seperti modul atau fungsi dalam saja dalam bahasa pemrograman apa pun, Anda mungkin perlu menyematkan arahan di dalam satu sama lain.
Anda bisa mendapatkan pemahaman yang lebih baik tentang ini dengan melihat contoh di bawah ini.
Dalam contoh ini, kami membuat 2 arahan yang disebut "luar" dan "dalam".
- Perintah bagian dalam menampilkan teks yang disebut "Batin".
- Sedangkan outer directive sebenarnya melakukan panggilan ke inner directive untuk menampilkan teks yang disebut "Inner".
Guru99 Global Event