Pindah antar halaman (pages) di Ionic dengan Angular

Dalam membuat aplikasi mobile, sudah pasti kita bekerja dengan lebih dari 1 halaman (page). Salah satu contoh sederhana adalah menu home, kemudian dalam menu home kita merujuk kembali ke menu options atau sebagainya. Itulah fungsi dari page yang dimaksud.

Pada tutorial kali ini kita akan mencoba membuat halaman-halaman dalam aplikasi Android dan tentunya bagaimana kita bisa pergi dari satu halaman ke halaman lain. Pada umumnya cara berpindah-pindah dari satu halaman ke halaman lain adalah dengan menggunakan <a href=""> namun pada kesempatan ini kita akan menggunakan ui-sref yang mana syntax tersebut merupakan syntax angular.

Untuk memulai pembuatan aplikasi halaman, seperti biasa kita memanggil terlebih dahulu library Ionic seperti berikut:

ionic start pages blank
cd pages
ionic platform add android

setelah semua persiapan selesai kita lanjut mempersiapkan halaman yang akan kita buat. buka file index.html pada text editor masing-masing. kemudian ikuti code berikut ini:

<!DOCTYPE html>
<html>

<head>
 <title></title>

 <link href="lib/ionic/css/ionic.css" rel="stylesheet"></link>
 <link href="css/style.css" rel="stylesheet"></link>

 <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

 <!-- ionic/angularjs js -->
 <script src="lib/ionic/js/ionic.bundle.js"></script>

 <!-- cordova script (this will be a 404 during development) -->
 <script src="cordova.js"></script>

 <!-- your app's js -->
 <script src="js/app.js"></script>
</head>

<body ng-app="starter">
 <ion-nav-view>
 </ion-nav-view>
</body>

</html>

Dalam kesempatan ini saya akan membuat 2 page. Page pertama home.html page kedua setting.html.
Page tersebut akan saya simpan pada folder 'templates'. Folder ini terletak di directory www/templates. Karena folder tersebut belum ada maka saya perlu membuat folder templates terlebih dahulu dengan cara. klik kanan pada folder www, kemudian pilih New Folder, Enter. Ketikkan templates kemudian Enter. Folder templates kini telah kita buat.

Tahapan selanjutnya adalah membuat file html yang kita perlukan. file pertama bernama home.html. cara membuatnya adalah klik kanan pada folder templates-New File-Enter. ketikan nama file home.html setelah itu tekan enter. File home.html telah selesai kita buat. Proses yang sama juga dilakukan untuk membuat file kedua yaitu setting.html.

Tahapan selanjutnya adalah mengisi page yang baru kita buat dengan konten sesuai dengan keinginan kita. Untuk mempermudah silahkan masukan kode seperti dibawah ini pada file home.html

<ion-view>
 <ion-header-bar class="bar-positive">
  <h1 class="title">Home</h1>
 </ion-header-bar>
 <ion-content class="padding">
  <h3>Ini adalah halaman home</h3>
  <p>Silahkan ganti halaman ini sesuai keinginan anda</p>
  <button class="button button-positive" ui-sref="setting">Go to setting</button>
 </ion-content>
</ion-view>

dan masukan kode seperti dibawah ini pada file setting.html

<ion-view>
 <ion-header-bar class="bar-positive">
  <h1 class="title">Setting</h1>
 </ion-header-bar>
 <ion-content class="padding">
  <h3>Hai ini adalah halaman Setting</h3>
  <p>silahkan ganti content ini sesuai dengan keperluan anda</p>
  <button class="button button-positive" ui-sref="home">Go to Home</button>
 </ion-content>
</ion-view>

untuk menghandle fungsi berpindah antar halaman terletak pada syntax ui-sref="xxx", nilai xxx dalam petik tersebut merupakan alamat mana yang akan kita tuju. Untuk mendefinisikan alamat mana, kita akan membuatnya di app.js pada directory www/js/app.js. Untuk mempermudah silahkan masukan code dibawah ini pada file app.js.

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider

        .state('home', {
        url: '/home',
        templateUrl: 'templates/home.html'
    })

    .state('setting', {
        url: '/setting',
        templateUrl: 'templates/setting.html'
    });

    $urlRouterProvider.otherwise('/home');
})

Jangan lupa untuk menghandle perpindahan setiap halaman agar dapat kembali ke halaman sebelumnya. Seluruh fungsi perpindahan pada aplikasi saya di handle pada <button>. Dimana pada page home, kita dapat pergi ke page setting, dan dari page stting kita dapat pergi ke page home.
Aplikasi telah selesai dan tinggal dijalankan di device atau di browser kita.
Demikian semoga bermanfaat.

8 comments

Balas

Unknown

June 4, 2016 at 12:05 PM

Hai saya sedang membuat perpindahan antar halaman di aplikasi ionic. Didalam tutorial yang diberikan saya sudah bisa. Namun, saat saya membuat 3 halaman berbeda tidak muncul apa-apa pada saat saya jalankan melalui browser. Bagaimana ya ?

Kiddy

June 9, 2016 at 10:30 AM

This comment has been removed by the author.

June 24, 2016 at 2:33 PM

om, punya saya gak muncul apa-apa

Prawito Hudoro

October 11, 2016 at 5:20 PM

Sudah menggunakan ui-router kan ya? pake $state.go() di controllernya mas.

November 12, 2016 at 5:19 PM

Bisa liat script nya om??

Mansur

February 9, 2017 at 8:55 PM

kosongan gan...ga bisa pindah halaman..maksudnya file index.htmlnya aja ga ada isinya..trs menghubungkan index.html degan file home .html dsb..gmn caranya?