Menampilkan Data JSON dan Detail Pada Ionic Framework Part 1

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.

7 Agustus 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat