Memahami Konsep Routing Pada Ionic Framework

Dalam tutorial kali ini saya akan menjelaskan konsep dari Routing yang berguna untuk mengatur setiap halaman pada Ionic Framework. Yang perlu anda pahami dari Ionic adalah fungsi dari masing-masing tag serta penempatan yang benar, pada awalnya mungkin teman-teman bingung tapi jika dipahami baik-baik pastinya sangat mudah...

Silahkan kalian buat dulu project Ionic blank template.

Kalau sudah silahkan buka file index.html

Hapus pada bagian yang saya block di atas. Kemudian silahkan ketikan tag ion-nav-view.

Ion-nav-view merupakan salah satu tag yang sangat penting dalam Ionic, kalian harus pahami fungsinya. Jadi fungsi dari tag tersebut adalah sebagai wadah pergantian/pertukaran file-file halaman yang kita buat, misalnya dari home.html menjadi about.html...

Kemudian silahkan teman-teman buat folder dengan nama templates dan buatlah file untuk setiap halaman. 

Pada masing-masing file, silahkan ketik tag ionic berikut.

Tag ion-view berfungsi untuk kita menempatkan title, ion-content adalah sebagai konten/body.

Nah, sekarang saatnya kita mengatur Routenya.. Silahkan teman-teman buka file js/app.js

Silahkan buat bagian config dan kita panggil object yang dibutuhkan yakni $stateProvide dan $urlRouterProvider.

Pada kasus ini, object $stateProvider berfungsi untuk mengatur Routing, sedangkan $urlRouterProvider berfungsi untuk mengatur tampilan default pada saat aplikasi dijalankan.

Untuk lebih jelasnya silahkan pelajari https://github.com/angular-ui/ui-router/wiki/URL-Routing

Kalau sudah mari kita lihat hasilnya...

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 Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat