Ask Cara mudah menghilangkan flicker {{ }} pada Angular.js AdityaDees

Jika ada membuat web atau webapp dengan menggunakan framework Angular.js, maka salah satu hal yang hampir selalu ditemui adalah, masalah flicker pada saat web atau webapp tersebut di refresh. Flicker yang saya maksud adalah jeda antara template html yang di dalamnya terdapat tag template {{ }} dengan proses render-nya, sehingga pada halaman web tersebut akan muncul karakter {{ }} selama beberapa saat lalu hilang.

Hal ini biasanya disebabkan oleh penempatan script Angular.js di bagian bawah halaman web, sehingga sebelum script Angular.js tersebut dieksekusi, template/kode html yang berada di atasnya sudah terlebih dahulu selesai dirender dan ditampilkan. Akibatnya muncullah flicker karakter {{ }} selama beberapa saat.

Berikut ini adalah beberapa hal yang bisa dilakukan untuk menghilangkan masalah flicker karakter {{}}di atas.

1. Ubah penempatan Angular.js ke bagian atas kode HTML.

Cara paling mudah adalah dengan mengubah menempatan script Angular.js yang semua di bagian bawah, menjadi di bagian atas. Dengan begini maka script Angular.js akan dibaca dan dieksekusi terlebih dahulu sebelum kode html lainnya dirender.



<!DOCTYPE html>
<html>
<head>
 <title>Angular Hello World</title>
 <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
 <script type="text/javascript" src="app.js"></script>

Solusi ini memang paling mudah, akan tetapi punya kelemahan, yaitu memperlambat tampilnya halaman web. Hal ini dikarenakan browser memerlukan waktu yang lebih lama untuk melakukan parsing dan mengeksekusi kode javacript (apalagi ukuran file Angular.js tidak terlalu kecil), sehingga Browser tampak seperti "hang" selama beberapa saat sebelum akhirnya halaman web muncul.

2. Menggunakan ng-bind

Solusi yang lain adalah dengan tidak menampilkan data dengan menggunakan tag {{ }}, melainkan di "embed" sebagai attribute di dalam tag html. Contohnya, jika sebelumnya kode template angular anda kira-kira seperti di bawah ini,



<div ng-controller="MyController as my">
  Nama : {{my.name}}
  <div>
   <ul>
    <li ng-repeat="obj in my.data">
     {{obj.nama}} {{obj.kelas}}
    </li>
   </ul>
  </div>
</div>

maka silahkan ganti dengan seperti ini.



<div ng-controller="MyController as my">
  Nama : <span ng-bind="my.name"></span>
  <div>
   <ul>
    <li ng-repeat="obj in my.data" ng-bind="obj.nama+' '+obj.kelas">
    </li>
   </ul>
  </div>
</div>

Solusi ini mudah untuk diterapkan jika anda baru mulai membuat projectnya, tetapi akan sulit dan merepotkan jika anda harus memodifikasi file-file dari project yang sudah ada. Bayangkan anda harus mengubah template yang semula menggunakan {{}} menjadi ng-bind di semua tempat.

3. Menggunakan ng-cloak

Solusi lainnya adalah dengan menggunakan ng-cloak. Secara singkat, cara kerja ng-clock adalah pada saat Angular.js belum di load, semua tag html yang mengandung directive ng-cloak akan disembunyikan terlebih dahulu. Nah, jika angular.js sudah selesai diload dan diparsing, baru tag-tag tersebut ditampilkan.

Oleh karena itu, untuk menggunakan ng-cloak ini, anda harus membuat sebuat style.css atau bisa juga dengan menaruhnya langsung pada header template sebagai berikut.



[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

Kemudian, tambahkan directive ng-cloak pada tag-tag yang di dalamnya terdapat {{ }}.



<!DOCTYPE html>
<html>
<head>
 <title>Angular Hello World</title>
 <style type="text/css">
  [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
  } 
 </style>
</head>
<body ng-app="app">

 <div ng-cloak ng-controller="MyController as my">
  Nama : {{my.name}}
  <div>
   <ul>
    <li ng-repeat="obj in my.data">
     {{obj.nama}} {{obj.kelas}}
    </li>
   </ul>
  </div>
 </div>

 <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
 <script type="text/javascript" src="app.js"></script>
</body>
</html>