aldiunanto.com

Animasi loading dengan AngularJS

Animasi loading dengan AngularJSHalo! sudah sekian lama ga nulis karena banyak hal. Ya ini lah, ya itu lah, pokoknya banyak banget yg bikin ribet dan menyita banyak waktu sehingga jangankan nge-blog, keperluan yg primary-pun beberapa harus ada yg dikorbankan. Tapi gapapa, yg penting tetap menjalaninya dengan serius dan semangat ya gak? hehe

Okay pada kesempatan kali ini, oiya, akhir-akhir ini memang lg sibuk bgt belajar sesuatu yg baru-baru nih, dan gw lagi cinta banget sama si cantik Laravel Framework, Git, Github, AngularJS, Composer, Fitness, dan The Beatles! yessss hahaa (no body cares ya ga sih? wkwk) dan kyknya part yg ini akan dibahas di posting yang berbeda nih. 😀 Lanjut…

Okay kembali ke topik utama. bagi yang sudah tau basic AngularJS(konsep, flow, syntax) akan lebih gampang mempelajari ini. Kalau belum, silakan tinggalkan comment di bawah ya.. hehe nanti akan dibuatin postingannya.

Kita tentu sudah tahu AngularJS sangat powerfull untuk front-end. Kecepatan sebuah website atau aplikasi akan semakin berkali-kali lipat cepat, efisien, dan responsive. Pada beberapa kasus pemanggilan data dari server dengan bantuan JSON, proses tersebut akan memakan waktu yang ‘sangat terlihat’ perbedaannya lebih-lebih jika data yang diambil mencapai ribuan. Bete nunggu? nah makanya kita buat sedikit animasi loading biar ada manis-manisnya gitu..

Note: pada kasus ini saya menggunakan sebuah object yg di-define sendiri sebagai kumpulan data, tidak memakai data dari server.

Buat Sebuah Markup

Langkah pertama kita buat dahulu sebuah markup-nya, beri nama index.html

  1. Beri nilai pada directive ngApp = ‘app’ (custom value, tergantung penamaan di file .js)
  2. Load Font Awesome (yang sudah ada di lokal silakan load dari lokal, namun di sini saya load dari CDN).
  3. Load style.css -> untuk sentuhan style sedikit biar tidak berantakan. (optional)
  4. Load library AngularJS(bisa dari lokal maupun CDN) dan app.js (akan kita buat nanti)
  5. Beri nilai pada directive ngController = ‘main’ (custom value, tergantung penamaan di file .js)
  6. Buat sebuah button dan beri directive ngClick = ‘showData()’
  7. Buat sebuah tag untuk animasi loading-nya. Di sini saya menggunakan tag <p> sebagai container dan sebuah class dari Font Awesome (fa, fa-spinner, fa-spin, fa-5x) untuk menampilkan sebuah loader. Dan jangan lupa beri sebuah directive ngShow dengan nilai sebuah $scope atau variable bernama loading
  8. Buat sebuah table dengan diberikan directive ngHide bernilai $scope loading (variable-nya sama dengan loader).
  9. Terkahir buat perulangan di table body dengan directive ngRepeat dan items sebagai object-nya. (akan kita atur di app.js)

 

Beri Sentuhan CSS

Buat sebuah file bernama style.css. Dan untuk part ini tidak usah dijelaskan ya karena pasti sudah paham.

Mari Kita Buat File app.js

Buatlah sebuah file js, beri nama app.js dan paste kode dibawah ini

  1. Buat sebuah module dan beri nama ‘app’ (harus sesuai dengan markup di atas tadi)
  2. Buat sebuah controller bernama ‘main’ (harus sesuai dengan markup di atas tadi).
  3. Beri nilai false pada $scope.loading. Dengan ini kita sudah memberi tahu directive ngHide untuk dimunculkan, dan ngShow untuk dihilangkan/disembunyikan.
  4. Beri nilai sebuah function pada $scope.showdata yang akan perform action ketika kita mengklik tombol. Function ini berisi :
    • $scope.loading = true. Munculkan animasi loading (directive ngShow) dan sembunyikan table data list (directive ngHide).
    • Initialize sebuah object bernama commodities dan isi sesuai kebutuhan.
    • Beri nilai $scope.items dengan object commodities tadi untuk dilakukan fetching data.
    • Terakhir beri nilai FALSE pada $scope.loading untuk menyembunyikan loader dan memunculkan data yang sudah di-fetch.

 

Running Time!

Cobalah run file index.html yang sudah dibuat. Jika ada error atau bingung, feel free to comment below yaks!

Note:

  1. Dalam contoh ini saya gunakan CDN untuk Font Awesome dan mungkin jika anda menggunakan CDN juga untuk file library AngularJS, maka dibutuhkan koneksi internet. (You don’t say wkwk)
  2. Jika di-running maka effect loading tidak akan terlalu kelihatan karena object/data yang di-fetching sangat sedikit (dalam case ini hanya 4 buah data).
  3. Jika anda perhatikan saya juga gunakan prefix ‘data-‘ untuk penamaan directive. Why? because this is truly a validated HTML markup in W3C.

 

Semoga bermanfaat vroh! see yaa..

6 thoughts on “Animasi loading dengan AngularJS

Leave a Reply

%d bloggers like this: