aldiunanto.com

Angular.js – Membuat Konten Dinamis dengan Injektor Angular-Route

Membuat Konten Dinamis dengan Injektor Angular-Route - Aldi UnantoWell, long time I don’t update this blog. Namun pada kesempatan kali ini saya akan membahas bagaimana caranya melakukan routing, atau yang lebih mudah dicerna, bagaimana cara membuat dynamic content pada sebuah web application yang menggunakan Angular.js sebagai pondasinya.

Routing? yap. Routing menurut saya penting sekali karena dengan menggunakan teknik routing, maka kita tidak perlu load banyak-banyak HTML markup yang padahal memiliki fungsi dan display yang sama.

Let’s Start!

Pertama kita inisialisasi module apa yang akan kita gunakan pada website ini. Contoh kita akan memberi nama moduleapp‘. Taruh directive ‘data-ng-app’ pada property di tag <html>.

Okay, contoh kasusnya adalah: anggap kita sedang membuat sebuah website yang memiliki format seperti gambar di bawah ini.

Membuat Konten Dinamis dengan Injektor Angular-Route - Aldi UnantoDi section SIDEBAR, akan ada beberapa link yang isinya akan diarahkan ke section [DYNAMIC CONTENT]. Contoh kita beri link Home, About, dan Testimonial.

harap diperhatikan snippet code di atas, pada value property href isikan diawali dengan ‘#/‘ dan dilanjutkan dengan string apapun (bebas) namun string ini akan berpengaruh pada konfigurasi routing nanti jadi harus tetap konsisten. Untuk Home, biarkan string kosong karena merupakan halaman default.

Selanjutnya pada bagian header, contoh kita beri tag <h1>. Berfungsi sebagai caption saja untuk membedakan halaman nanti yang akan berubah-ubah.

Beri directive ‘data-ng-bind’ dan ‘caption’ sebagai value-nya.

Dan ini bagian yang penting. Berilah directive ‘data-ng-view’ pada section [DYNAMIC CONTENT] yang berfungsi sebagai container halaman nanti.

Untuk value-nya biarkan kosong.

 

Angular Routing

Yap. Setelah semua markup selesai dibuat, mari kita koding Angular-nya!
Oh ya, untuk bisa menggunakan Angular-Routing, kita harus meng-import satu buah file js lagi yaitu angular-route.js. Anda bisa men-download-nya di sini:

https://code.angularjs.org/1.5.0/

Setelah selesai di-download, import file angular-route setelah angular.js

Tahap pertama, saya asumsikan module yang akan kita buat bernama ‘app‘, dan kemudian inject angular-routing dengan ‘ngRoute‘ ke dalam parameter kedua .module() untuk bisa menginjeksinya.

Kemudian lakukan konfigurasi. Sesuaikan dengan kebutuhan kalian yaa.

Seperti yang anda lihat, setiap .when() menandakan satu routing. Yang pertama untuk Home, .when() kedua untuk About, dan ketika untuk Testimonial. Parameter pertama pada .when() merupakan string yang sebelumnya sudah kita set pada property href di link markup tadi, harus sesuai, itu kenapa saya bilang harus konsisten.

Parameter kedua adalah sebuah object dengan beberapa properties. Property pertama adalah caption; yang akan kita pakai untuk data binding pada tag <h1> di header. Property kedua adalah controller, di mana value yang di-set pada property ini merupakan nama controller yang akan digunakan untuk setiap halaman yang berpindah. Dan terakhir templateUrl, kita isi dengan lokasi file yang akan di-load di section [DYNAMIC CONTENT]. Dan selain itu kita set juga .otherwise() yang berfungsi jika parameter di address bar yang diberikan tidak ada yang sesuai dengan .when(), maka .otherwise() akan diaktifkan dan akan redirect/berpindah ke halaman yang sudah di-set untuk property redirectTo.

Kemudian snippet code di atas berfungsi untuk menjalankan routing yang sudah kita konfigurasi tadi. Bisa diperhatikan, dengan meng-inject ngRoute pada module app, maka kita akan mendapatkan variable $rootScope, $routeChangeSuccess, dan $routeProvider pada konfigurasi sebelumnya. Variablevariable ini merupakan variable bawaan yang memiliki fungsi callback tersendiri. Contohnya pada block code ini, ketika routing dijalankan dengan angular.run(), maka kita bisa kontrol event handler setelah routing berhasil dilakukan dengan:

Dan kitapun bisa mendapatkan nilai dari property-property yang sudah dikonfigurasi(dalam hal ini: caption).

Terakhir kita inisialisasi tiga buah controller untuk masing-masing page yang sudah kita set. Walaupun tidak semua page memerlukan controller, namun kita harus tetap menginisialisasinya agar tidak terjadi undefined controller pada console browser.

Oya, jangan lupa siapkan home.html, about.html, dan testimonial.html di folder views ya. Untuk memastikan routing berfungsi.

 

Try It Yourself!

Setelah membaca ini, cobalah melakukan studi kasus. Jika berhasil, maka caption akan berubah, link akan berfungsi, section [DYNAMIC CONTENT] akan berisi file home.html, atau about.html, atau testimonial.html tergantung current location mana anda berada.

Keuntungannya tentu saja kita tidak perlu membuat markup header, sidebar, maupun footer secara berkelanjutan dan menaruhnya di masing-masing file, sangat merepotkan dan tidak efisien. Bukan hanya itu saja, Angular-Routing berefek kepada history browser loh. What does it mean? itu berarti tombol Go back one page, dan Go forward one page akan tetap berfungsi dan konten akan tetap dinamis!

Semoga bermanfaat!

2 thoughts on “Angular.js – Membuat Konten Dinamis dengan Injektor Angular-Route

Leave a Reply

%d bloggers like this: