Menampilkan Data JSON dan Detail Pada Ionic Framework Part 1

07/08/2016    Reza Indra    4002     Website

Bertemu lagi, lagi-lagi kita bertemu... dalam kesempatan kali ini saya akan mengulas kembali tentang Ionic Framework. Yang akan saya ajarkan kepada teman-teman pada artikel ini adalah bagaimana menampilkan data dengan JSON dan membuat halaman detailnya. Oke, mari kita mulai...

Pertama-tama siapkan terlebih dahulu, Ionic projectnya dengan cara mendownload lewat CMD...

Masuk ke dalam project folder dan run pada browser..

Silahkan buka project pada Sublime Text 3.

Teman-teman silahkan buka URL berikut https://gist.github.com/planetoftheweb/f748ac9fac592d103529. Silahkan download file data.json dan simpan di dalam folder www/js/

Selanjutnya, silahkan teman-teman buka js/controller.js dan ketiklah perintah JavaScript berikut.

Di dalam file tersebut, kita membuat sebuah controller dengan nama "artistsCtrl", kemudian kita panggil data.json dan kita passing ke view (html).

Nah, selanjutnya kita akan buat viewnya, pada folder templates, silahkan teman-teman buat terlebih dahulu file artists.html. Kalau sudah buatlah "ion-view".

Kemudian kita atur "stateProvider" pada config. Teman-teman silahkan buka file js/app.js. Pada bagian config, buatlah baris perintah berikut.

stateProvider ini berfungsi untuk mengatur Routing URL. (Saya akan lebih jelaskan dalam artikel selanjutnya).

Kalau sudah mari kita coba tampilkan data yang kita ambil dari JSON pada templates/artists.html.

Hasilnya adalah seperti berikut..

Kalau sudah seperti itu, saatnya kita looping menggunakan ng-repeat...

Kita jalankan lagi.. dan hasilnya adalah...

Selanjutnya kita akan menampilkan detail... Menampilkan Data JSON dan Detail Pada Ionic Framework Part 2.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More