Saat Anda mengembangkan aplikasi berbasis komponen berskala besar, yang sering berkomunikasi dan menerima data dari server, struktur halaman, fitur, dan komponen mungkin secara alami bergantung pada data yang Anda terima.
Jika Anda memodulasi komponen sebagai unit kecil yang independen, masing-masing bertanggung jawab atas suatu area atau bagian di halaman Anda, maka Anda mungkin memiliki package.json yang penuh dengan dependensi. Seringkali, kecuali komponen 'statis' yang Anda deklarasikan, aplikasi Anda akan mengetahui komponen mana yang akan dirender di 'run-time' berdasarkan logika yang telah Anda implementasikan dan data yang diterima dari server.
Salah satu cara untuk mencapainya adalah dengan membuat daftar semua komponen dengan direktif ng-if bersyarat. Anda mungkin akan mendapatkan daftar membosankan yang tak ada habisnya dari semua dependensi yang telah Anda cantumkan di package.json aplikasi Anda. Ini jelas bukan praktik yang baik — kecuali saat Anda harus menggunakan ng-if. Kode Anda menjadi statis dan panjang, dan sebagian besar bahkan tidak digunakan pada akhirnya. Anda mungkin membuat daftar dua puluh komponen bersyarat hanya untuk menggunakan salah satunya saja. Ada cara yang lebih baik, keren dan rapi, untuk melakukannya dengan menggunakan alat AngularJS yang hebat, $compile
Menggunakan $compile kita dapat secara dinamis membuat konten baru dalam aplikasi AngularJS. Saya akan menyajikan salah satu cara untuk mencapainya dengan mengemas solusi sebagai modul kecil yang dapat dikonsumsi dan independen.
Pertama, mari kita buat komponen sederhana `pilih-item`, nanti kita akan menggunakannya dalam contoh saya.
pilih-item.html:
Di sini kita memiliki elemen drop-down select sederhana yang menerima daftar objek dengan properti `nama` untuk ditampilkan di setiap opsi yang akan dihasilkan ng-options di dalam <select>. Setiap kali item dipilih, ng-change akan memanggil metode onSelect pada pengontrol `pilih-item` di bawah dan meneruskannya ke objek yang dipilih.
pilih-item.js:
Direktif `pilih-item` dibatasi sebagai elemen. Setelah `onSelect` dipanggil, callback onItemSelected akan dipicu untuk memperbarui konsumen <select-items> dengan objek yang baru dipilih.
aplikasi.js:
Di app.js kita menyetel array, mencantumkan semua komponen yang ingin kita kompilasi secara dinamis dalam bentuk objek. Sebagai contoh, kami hanya menggunakan satu. Ia memiliki dua properti: `name` — nama direktif yang baru dikompilasi menjadi dan `bindings` — Kita dapat menetapkan lingkup baru yang kita kompilasi apa pun yang kita inginkan: panggilan balik, objek, dan data primitif. Kita juga dapat menambahkan properti `orderBy` untuk mengontrol urutan direktif masa depan kita yang akan dikompilasi dan ditambahkan ke tampilan.
indeks.html:
Sekarang bagian yang menarik, kami mendeklarasikan arahan khusus <compile-me> yang dibuat berulang kali dengan ng-repeat untuk setiap objek yang membentuk arahan khusus yang kami teruskan ke dalamnya di pengontrol konsumen app.js
kompilasi-me.js
Mari jelaskan apa yang terjadi di pengontrol <compile-me>. Di baris pertama saya meneruskan template ke `angular.element()`, Ini adalah nama direktif <select-items> yang telah kita atur di `customDirectives` array yang saya masukkan ke direktif <compile-me>. Nilai yang dikembalikan $el sekarang menjadi elemen sudut.
Di baris ke-2 elemen sudut $el diteruskan ke $compile. Kompilasi adalah fungsi dalam arahan. Memanipulasi DOM, menambah atau menghapus arahan dan elemen DOM lainnya dilakukan dalam fungsi kompilasi sebelum proses `postLink` dimulai. Kompilasi adalah salah satu dari empat fungsi yang terjadi dalam siklus hidup arahan:
$compile menelusuri pohon DOM dimulai dari elemen sudut dan berlanjut secara rekursif dari atas ke bawah dan mencocokkan elemen DOM dengan arahan. Semua arahan yang ditemukannya juga dikompilasi dan fungsi tautannya (preLink, postLink) dikumpulkan dan dibungkus dengan fungsi tautan yang sama dan dikembalikan.
Dua fungsi dieksekusi untuk setiap arahan yang ditemukan $compile, controller dan preLink dan keduanya dieksekusi secara rekursif atas ke bawah. Fungsi terakhir, postLink dijalankan untuk setiap direktif bawah ke atas.
Fungsi controller dipakai sebelum fase pra-tautan dan dapat diakses dengan arahan lain. Ini memungkinkan komunikasi antar arahan. Pengarahan saudara dapat meminta pengontrol dari saudaranya dan arahan anak dapat meminta pengontrol orang tuanya.
preLink dijalankan sebelum elemen turunan ditautkan dengan tampilan, di sini kita dapat memanipulasi `$scope` pribadi sebelum ditautkan dengan tampilan dan proses postLink dimulai.
Sekarang, ketika kita berada di bagian bawah pohon DOM, proses postLink dimulai, memunculkan pohon dan dieksekusi untuk setiap arahan. Ini sebenarnya adalah singkatan dari fungsi link() yang paling umum digunakan. Ia bertanggung jawab untuk mendaftarkan pendengar DOM serta memperbarui DOM.
Urutan pelaksanaan fungsi direktif:
kompilasi: arahan atas → bawah
controller & preLink: arahan atas → bawah
postLink: bawah → arahan atas
Di baris ke-3, kita membuat cakupan baru `$newScope` dan mewakili cakupan baru untuk komponen baru <select-items> yang dikompilasi `compileMe` untuk kita dalam iterasi saat ini dari `ng-ulangi`. Kita melakukannya dengan memanggil $scope.$parent.$new() , dengan demikian, kita menambahkan cakupan baru ke cakupan induk `compileMe` menjadikannya sebagai saudara kandung dari induk, di pohon cakupan. Nanti kita akan menghancurkan cakupan `compileMe` dan menghapus placeholdernya dari DOM untuk menyelesaikan proses peralihan antara dua direktif.
Di baris ke-4, kita cukup menetapkan semua properti dan nilainya dari bagian `bindings` dari objek `customDirectives` ke $newScope obyek.
Selanjutnya, kita menghubungkan $newScope dengan tampilan, dengan meneruskan fungsi `link` yang kita atur di baris ke-2.
Di baris berikut kita menambahkan elemen baru yang kita buat ke pohon DOM di bawah elemen induk <compile-me> menjadikannya saudara kandung. Sekarang, setelah selesai menggunakan <compile-me>, kami ingin mengucapkan terima kasih dan menghapusnya, baik dari cakupan maupun pohon DOM.
Memanggil $scope.$destroy akan mencegah pengaktifan event handler Angular, serta menyiarkan event `$destroy` pada cakupan dan semua cakupan turunannya. $element.remove() menghapus placeholder dari DOM.
Proses ini akan diulangi untuk setiap item yang kita tambahkan ke objek `customDirectives`.
- Membuat dan elemen sudut.
- Kompilasi elemen dan dapatkan fungsi tautan.
- Membuat cakupan saudara baru.
- Tetapkan pengikatan ke cakupan baru.
- Tautkan cakupan baru dengan tampilan.
- Tambahkan elemen ke induk.
- Hancurkan ruang lingkup lama.
- Hapus elemen lama.
Sekarang kita memiliki komponen baru tanpa mendeklarasikannya secara eksplisit dan Anda memiliki ketergantungan kotak hitam kecil untuk dibawa ke tantangan berikutnya di AngularJS — tentu saja, jika Anda masih menggunakannya.
