Menggunakan Directive ng-cloak Untuk Mencegah Tampilan Angular.Js Muncul Sebelum Data Selesai Dimuat

Ketika Membuat aplikasi menggunakan MEAN stack dan banyak data yang dimuat pada halaman, biasanya data yang dipanggil oleh angular belum selesai diproses dan akan tampil dalam bentuk aslinya yaitu kurung kurawal seperti {{panggilData}}. Hal ini terjadi karena angular ditampilkan sebelum data berhasil dimuat. Untuk mengatasinya gunakan directive ng-cloak untuk menyembunyikan data angular sampai selesai dimuat. Tambahkan ng-cloak pada tag elemen dimana anda memanggil data angular:

<p ng-cloak>{{panggilData}}<p>  

Agar cara ini bisa berhasil maka script angular.js harus dipanggil pada tag <head> bukan pada bagian bawah script. Jika banyak data yang dipanggil oleh angular js dan anda tidak ingin menambahkan ng-cloak pada setiap elemen tersebut maka cukup tambahkan satu ng-cloak pada tag <body>. Untuk melihat document ng-cloak secara lengkap lihat di sini.

Geri Muhano

Web programmer di erabelajar.com. Alumni UIN Jakarta.