Tutorial AngularJS: Demystifying Custom Directive

Dengan pesatnya pertumbuhan JavaScript sebagai bahasa tumpukan penuh, semakin banyak aplikasi yang menggunakan kerangka kerja yang memungkinkan browser web menangani lebih banyak pemrosesan UI seperti pengikatan data, pengelolaan tampilan data, transformasi data, dan banyak layanan lainnya. Salah satu kerangka kerja yang paling mampu, dapat diperluas, dan populer adalah AngularJS, dan salah satu komponen kerangka kerja AngularJS yang paling berguna adalah sesuatu yang disebut directive . AngularJS menyediakan banyak arahan yang berguna dan, yang lebih penting, menyediakan kerangka kerja yang kaya untuk membuat arahan khusus.

Apa itu direktif? Sederhananya, arahan adalah fungsi JavaScript yang memanipulasi dan menambahkan perilaku ke elemen DOM HTML. Arahan bisa sangat sederhana atau sangat rumit. Oleh karena itu, mendapatkan pemahaman yang kuat tentang banyak opsi dan fungsi yang memanipulasinya sangat penting.

Dalam tutorial ini, empat fungsi yang dijalankan sebagai direktif dibuat dan diterapkan ke DOM akan dieksplorasi dan contoh akan diberikan. Posting ini mengasumsikan beberapa keakraban dengan AngularJS dan arahan khusus. Jika Anda baru mengenal Angular, Anda dapat menikmati tutorial tentang membangun aplikasi AngularJS pertama Anda.

Empat Fungsi Siklus Hidup Arahan AngularJS

Ada banyak opsi yang dapat dikonfigurasi dan bagaimana opsi tersebut terkait satu sama lain adalah penting. Setiap arahan mengalami sesuatu yang mirip dengan siklus hidup saat AngularJS mengkompilasi dan menautkan DOM. Siklus hidup direktif dimulai dan diakhiri dalam proses bootstrap AngularJS, sebelum halaman dirender. Dalam siklus hidup direktif, ada empat fungsi berbeda yang dapat dijalankan jika didefinisikan. Masing-masing memungkinkan pengembang untuk mengontrol dan menyesuaikan arahan pada berbagai titik siklus hidup.

Empat fungsi tersebut adalah: compile , controller , pre-link dan post-Link .

Fungsi kompilasi memungkinkan arahan untuk memanipulasi DOM sebelum dikompilasi dan ditautkan sehingga memungkinkan untuk menambah/menghapus/mengubah arahan, serta, menambah/menghapus/mengubah elemen DOM lainnya.

Fungsi pengontrol memfasilitasi komunikasi direktif. Arahan saudara dan anak dapat meminta pengontrol saudara kandung dan orang tua mereka untuk mengomunikasikan informasi.

Fungsi pra-tautan memungkinkan manipulasi $scope pribadi sebelum proses pasca-tautan dimulai.

Metode pasca-tautan adalah metode pekerja keras utama dari arahan.

Dalam arahan, manipulasi DOM pasca-kompilasi terjadi, pengendali acara dikonfigurasi, dan begitu juga jam tangan dan hal-hal lain. Dalam deklarasi direktif, keempat fungsi didefinisikan seperti ini.

 .directive("directiveName",function () { return { controller: function() { // controller code here... }, compile: { // compile code here... return { pre: function() { // pre-link code here... }, post: function() { // post-link code here... } }; } } })

Umumnya, tidak semua fungsi diperlukan. Dalam sebagian besar keadaan, pengembang hanya akan membuat pengontrol dan fungsi pasca-tautan mengikuti pola di bawah ini.

 .directive("directiveName",function () { return { controller: function() { // controller code here... }, link: function() { // post-link code here... } } })

Dalam konfigurasi ini, link mengacu pada fungsi post-link .

Apakah semua atau beberapa fungsi didefinisikan, urutan eksekusinya penting, terutama eksekusinya relatif terhadap aplikasi AngularJS lainnya.

Eksekusi Fungsi Arahan AngularJS Relatif terhadap Arahan lain

Pertimbangkan cuplikan HTML berikut dengan arahan parentDir , childDir dan grandChildDir yang diterapkan ke fragmen HTML.

 <div parentDir> <div childDir> <div grandChildDir> </div> </div> </div>

Urutan eksekusi fungsi dalam direktif, dan relatif terhadap direktif lain, adalah sebagai berikut:

• Fase Kompilasi
  • Fungsi Kompilasi : parentDir
  • Fungsi Kompilasi : childDir
  • Fungsi Kompilasi : grandChildDir
• Kontroler & Fase Pra-Tautan
  • Fungsi Pengendali : parentDir
  • Fungsi Pra-Tautan : parentDir
  • Fungsi Pengendali : childDir
  • Fungsi Pra-Tautan : childDir
  • Fungsi Pengendali : grandChildDir
  • Fungsi Pra-Tautan : grandChildDir
• Fase Pasca Tautan
  • Fungsi Post-Link : grandChildDir
  • Fungsi Post-Link : childDir
  • Fungsi Post-Link : parentDir

Penjelasan Fungsi Arahan AngularJS: Menyelam Jauh

Tahap kompilasi terjadi terlebih dahulu. Pada dasarnya, fase kompilasi menempelkan event listener ke elemen DOM. Misalnya, jika elemen DOM tertentu terikat ke properti $scope , event listener yang mengizinkannya diperbarui dengan nilai properti $scope diterapkan ke elemen DOM. Proses kompilasi dimulai dengan elemen DOM root dari mana aplikasi AngularJS di-bootstrap dan melintasi cabang-cabang DOM menggunakan traversal depth-first, mengkompilasi induk terlebih dahulu kemudian anak-anaknya sampai ke simpul daun.

Setelah kompilasi selesai, direktif tidak dapat lagi ditambahkan atau dihapus dari DOM (walaupun ada cara untuk mengatasinya dengan langsung menggunakan layanan kompilasi. Tahap selanjutnya adalah pemanggilan pengontrol dan fungsi pra-tautan untuk semua direktif. Saat pengontrol dipanggil, $scope tersedia dan dapat digunakan $element yang disuntikkan ke controller berisi template yang dikompilasi tetapi tidak termasuk konten anak yang ditransklusikan (konten yang ditransklusikan adalah konten antara tag HTML awal dan akhir di mana direktif berada diterapkan). Menurut definisi, pengontrol dalam pola MVC hanya meneruskan model ke tampilan dan mendefinisikan fungsi untuk menangani peristiwa. Oleh karena itu, pengontrol direktif tidak boleh mengubah DOM direktif karena dua alasan: hal itu melanggar tujuan dari controller, dan konten anak yang ditransklusikan belum ditambahkan ke DOM. Jadi apa yang dilakukan controller selain memodifikasi $scope ? Controller memungkinkan perintah anak untuk berkomunikasi dengan arahan orang tua. Fungsi pengontrol itu sendiri harus dianggap sebagai objek pengontrol yang akan diteruskan ke fungsi pasca-tautan direktif anak jika direktif anak memintanya. Oleh karena itu, pengontrol biasanya digunakan untuk memfasilitasi komunikasi direktif dengan membuat objek dengan properti dan metode yang dapat digunakan oleh direktif saudara dan turunannya. Arahan induk tidak dapat menentukan apakah arahan anak dapat memerlukan pengontrolnya, jadi yang terbaik adalah membatasi kode dalam metode ini ke fungsi dan properti yang dapat digunakan dengan aman oleh arahan anak.

Setelah fungsi pengontrol, fungsi pra-tautan dijalankan. Fungsi pra-tautan misterius bagi banyak orang. Jika Anda membaca banyak dokumentasi di Internet dan di buku, orang menulis bahwa fungsi ini hanya digunakan dalam keadaan langka dan orang hampir tidak akan pernah membutuhkannya. Penjelasan yang sama kemudian gagal memberikan contoh situasi yang dapat digunakan.

Fungsi pra-tautan sebenarnya tidak rumit sama sekali. Pertama, jika Anda meninjau kode sumber AngularJS, Anda akan menemukan contoh yang sangat baik dari fungsi pra-tautan: direktif ng-init menggunakannya. Mengapa? Ini hanyalah metode yang bagus untuk mengeksekusi kode pribadi yang melibatkan $scope ; kode yang tidak dapat dipanggil dengan arahan saudara dan anak. Berbeda dengan fungsi pengontrol, fungsi pra-tautan tidak diteruskan ke direktif. Oleh karena itu, ini dapat digunakan untuk mengeksekusi kode yang memodifikasi $scope dari direktifnya. Arahan ng-init melakukan hal ini. Ketika fungsi pra-tautan untuk ng-init dijalankan, itu hanya mengeksekusi JavaScript yang diteruskan ke direktif terhadap $scope . Hasil eksekusi tersedia melalui pewarisan prototipe $scope ke arahan anak selama eksekusi fungsi pengontrol, pra-tautan, dan pasca-tautan, tetapi tanpa memberikan akses ke arahan anak tersebut untuk mengeksekusi ulang kode di pra-tautan induk. fungsi tautan. Juga, direktif mungkin perlu mengeksekusi kode lain yang tidak terkait dengan $scope yang ingin dirahasiakan.

Beberapa pengembang AngularJS yang berpengalaman akan mengatakan bahwa kode pribadi ini masih dapat ditempatkan di pengontrol dan kemudian tidak dipanggil oleh arahan anak. Argumen itu akan berlaku jika arahan hanya akan digunakan oleh pengembang asli yang mengkodekannya tetapi jika arahan akan didistribusikan dan digunakan kembali oleh pengembang lain maka enkapsulasi kode pribadi dalam fungsi pra-tautan bisa sangat bermanfaat. Karena pengembang tidak pernah tahu bagaimana arahan mereka akan digunakan kembali seiring berjalannya waktu, melindungi kode pribadi agar tidak dieksekusi oleh arahan anak adalah pendekatan yang baik untuk enkapsulasi kode arahan. Saya menganggapnya sebagai praktik yang baik untuk menempatkan kode publik komunikasi direktif dalam fungsi pengontrol, dan kode pribadi dalam fungsi pra-tautan. Seperti pengontrol, pra-tautan tidak boleh melakukan manipulasi DOM atau menjalankan fungsi transklusi, karena konten untuk arahan turunan belum ditautkan.

Untuk setiap direktif, fungsi pengontrol dan pra-tautannya dijalankan sebelum pengontrol dan fungsi pra-tautan dari arahan turunannya. Setelah fase pengontrol dan pra-tautan untuk semua arahan selesai, AngularJS memulai fase penautan, dan menjalankan fungsi pasca-tautan untuk setiap arahan. Fase penautan berjalan berlawanan dengan alur kompilasi, pengontrol, dan eksekusi pra-tautan dengan memulai dengan simpul DOM daun dan melanjutkan hingga ke simpul akar DOM. Traversal DOM pasca-tautan mengikuti sebagian besar jalur depth-first. Karena setiap direktif anak ditautkan, fungsi pasca-tautannya dijalankan.

Fungsi post-link adalah fungsi yang paling umum diimplementasikan dalam arahan AngularJS kustom. Dalam fungsi ini, hampir semua hal yang wajar dapat dilakukan. DOM dapat dimanipulasi (hanya untuk dirinya sendiri dan elemen turunan), $scope tersedia, objek pengontrol untuk arahan induk dapat digunakan, fungsi transklusi dapat dijalankan, dll. Namun, ada beberapa batasan. Arahan baru tidak dapat ditambahkan ke DOM karena tidak akan dikompilasi. Selain itu, semua manipulasi DOM harus dilakukan menggunakan fungsi DOM. Cukup memanggil fungsi html pada elemen DOM dan meneruskan HTML baru akan menghapus semua event handler yang ditambahkan selama proses kompilasi. Misalnya, ini tidak akan berfungsi seperti yang diharapkan:

 element.html(element.html());

atau

 element.html(element.html() + "<div>new content</div>");

Kode tidak akan menyebabkan HTML berubah, tetapi menetapkan kembali versi string elemen DOM akan menghapus semua event handler yang dibuat selama proses kompilasi. Biasanya, fungsi post-link digunakan untuk menghubungkan event handler, $watch es dan $observe s.

Setelah semua fungsi pasca-tautan dijalankan, $scope diterapkan ke struktur DOM yang dikompilasi dan ditautkan, dan halaman AngularJS menjadi hidup.

Bagan Fungsi Arahan

Berikut adalah bagan yang mencantumkan tujuan setiap fungsi, apa yang tersedia saat dijalankan, dan praktik terbaik tentang cara menggunakan setiap fungsi dengan tepat.

Ringkasan

Dalam tutorial tentang direktif AngularJS ini, kita telah mempelajari tentang tujuan, urutan eksekusi, dan kemampuan serta kegunaan keseluruhan untuk masing-masing dari empat fungsi direktif: compile , controller , pre-link dan post-link . Dari keempat fungsi tersebut, pengontrol dan pasca-tautan adalah yang paling umum digunakan tetapi untuk arahan yang lebih kompleks yang perlu memiliki kontrol DOM yang lebih besar atau memerlukan lingkungan eksekusi lingkup pribadi, fungsi kompilasi dan pra-tautan dapat digunakan.