Memulai Ionic: Navigasi

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

Final product image — What You'll Be Creating

Kita telah membahas cukup banyak di dalam seri ini, termasuk navigasi. Namun, Ionic menyediakan beberapa komponen yang menyediakan fitur tambahan untuk membangun navigasi yang lebih fungsional. Di dalam tutorial ini, kita menambahkan menu samping dan komponen tab ke dalam aplikasi, dan kita juga membahas beberapa layanan tambahan untuk membuat navigasi aplikasi yang lebih pintar.

File-File Project Tutorial

File-file untuk project tutorial tersedia di GitHub. The general premise of the app is that it shows some information about local facilities. Di dalam tutorial ini, kita menambahkan kemampuan untuk menunjukkan perpustakaan, museum, taman, dan rumah sakit. Saat ini, itu hanya menampilkan lokasi di Chicago, sesuatu yang akan kita perbaiki dalam tutorial berikutnya.

Kamu bisa mengunduh project lengkap untuk tutorial ini dari GitHub. Jika kamu mengklon project, kamu bisa juga melakukan coding dengan menggunakan Git dan menjalankan git checkout –b start. Contoh akhir juga tersedia untuk pratinjau.

Perhatikan bahwa saya telah menghapus resolve dari tampilan tempat yang kita punya di bagian ketiga seri ini. Saya tidak ingin membahasnya lebih dalam, namun controller memuat data sekarang dan membuat navigasi lebih sederhana.

1. Menambahkan Menu Samping

Salah satu pola navigasi umum dalam aplikasi mobile adalah menu samping. Ini merupakan sebuah kotak yang bergeser dari bagian samping dan menampilkan tautan navigasi dan barangkali konten lainnya, seperti status login terkini. Berdasarkan desain, mereka di luar layar dan terbuka oleh beberapa jenis tombol, seringkali berupa icon hamburger, walaupun orang-orang tidak setuju dengan penggunaan icon tersebut.

Menu samping seringkali dapat dibuka dengan menggeser dari bagian samping untuk membukanya atau menggeser balik untuk menutupnya. Ini bisa berguna, namun terkadang itu bisa mengganggu gestur lainnya dan kamu hendaklah memperhatikan perilaku yang bertentangan. Kamu hendaklah mempertimbangkan penggunaan terbaik dalam menggeser dengan visi dan pengelaman menyeluruh aplikasi dalam benakmu, dan jika ada permasalahan kamu bisa menonaktifkannya.

Ionic menyediakan beberapa komponen yang membuatnya sepele untuk mengatur sebuah menu samping. Kamu bisa membuat hingga dua menu samping, satu di sisi kanan dan satu lagi di sisi kiri. Sebuah menu samping A side menu terdiri dari beberapa komponen, ionSideMenus, ionSideMenu, dan ionSideMenuContent.

Untuk melihat aksi dari komponen ini, mari perbaharui www/index.html dan atur sebuah menu samping. Kamu akan mengganti konten yang telah ada dengan code di bawah, yang menambahkan komponen menu samping pada code yang telah ada.

<body ng-app="App">
  <ion-side-menus>
    <ion-side-menu side="left">
      <ion-header-bar>
        <h1 class="title">Civinfo</h1>
      </ion-header-bar>
      <ion-content>
        <ion-list>
          <ion-item ui-sref="places" menu-close>Places</ion-item>
          <ion-item ui-sref="settings.preferences" menu-close>Settings</ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu>
    <ion-side-menu-content drag-content="false">
      <ion-nav-bar class="bar-balanced">
        <ion-nav-buttons side="left">
          <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
        </ion-nav-buttons>
        <ion-nav-back-button class="button-clear">
          <i class="ion-arrow-left-c"></i> Back
        </ion-nav-back-button>
      </ion-nav-bar>
      <ion-nav-view></ion-nav-view>
    </ion-side-menu-content>
  </ion-side-menus>
</body>

Untuk mengaktifkan menu samping, kita mulai dengan membungkus konten aplikasi dalam ionSideMenus. Itu memungkinkan Ionic untuk mengkoordinasikan area menu samping dan konten. Kemudian kita memiliki ionSideMenu dengan atribut side="left" untuk menentukan sisi itu berada.

Di dalam menu samping, kita bisa meletakkan konten yang kita inginkan. Dalam kasus ini, dan mungkin skenario yang paling umum, kontennya adalah komponen ionHeaderBar dan komponen ionList untuk me-render masing-masing judul aplikasi dan daftar tautan. Kita belum menentukan tampilan pengaturan, jadi tautan tersebut akan gagal untuk saat ini. Juga perhatikan bahwa komponen ionItem memiliki atribut menu-close. Ini secara otomatis menutup menu samping ketika pengguna mengklik tautan, jika tidak itu tetap terbuka.

Komponen ionSideMenuContent digunakan untuk menampung area konten utama. Area konten ini mengambil keseluruhan layar, namun komponen ini hanya membantu komponen menu samping melakukan rendering dengan benar. Kita juga menggunakan atribut drag-content="false" untuk menonaktifkan gestur seret karena mereka akan mengganggu proses scrolling daftar dan tab.

Kita juga menambahkan tombol baru pada bar navigasi dengan menggunakan ionNavButtons. Ini adalah menu samping yang muncul pada kanan atas sebagai tiga garis bersusun. Tombol ini memiliki atribut menu-toggle="left", yang memicu menu samping kiri untuk aktif ketika dipilih.

Sekarang setelah menu samping berada pada tempatnya, mari kerjakan pengaturan komponen navigasional besar berikutnya dengan menambahkan tab untuk tampilan pengaturan.

2. Tab Dengan Histori Navigasi Individual

Tab merupakan pola navigasi umum lainnya untuk melakukan navigasi dalam aplikasi. Tab mudah dimengerti karena kita melihatnya dalam begitu banyak jenis antarmuka, tidak hanya aplikasi mobile.

Tab bisa berupa stateful atau stateless. Sebuah tab yang menampilkan konten yang tidak menyimpan memori perubahan disebut stateless sementara tab yang menjaga kondisi berdasarkan interaksi pengguna disebut stateful (sebagai contoh, mempertahankan hasil pencarian). Kita melihat bagaimana membuat tab stateful dengan Ionic karena mereka lebih kompleks dan lebih bertenaga.

Pengaturan tab cukup mudah dengan komponen ionTabs dan ionTab. Cukup mirip seperti menu sampingan, kamu menempatkan komponen tab sebanyak yang kamu sukai. Tidak ada batasan, namun saya melihat bahwa lima merupakan nilai maksimum yang sehat. Pada perangkat yang lebih kecil, terlalu banyak icon membuat sulit untuk memilih tab.

Kita akan mengatur tab dengan membuat beberapa file baru. Pertama-tama, mari atur template dengan membuat file baru di www/views/settings/settings.html. Tambahkan code berikut pada file baru.

<ion-tabs class="tabs-icon-top tabs-stable">

  <ion-tab title="Preferences" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline" ui-sref="settings.preferences">
    <ion-nav-view name="preferences"></ion-nav-view>
  </ion-tab>

  <ion-tab title="About" icon-on="ion-ios-information" icon-off="ion-ios-information-outline" ui-sref="settings.about">
    <ion-nav-view name="about"></ion-nav-view>
  </ion-tab>

</ion-tabs>

Komponen ionTabs digunakan untuk membungkus komponen ionTab bagian dalam. Ada beberapa class yang bisa menentukan bagaimana tab muncul, seperti menempatkan tab di bagian atas atau bawah, dengan menggunakan icon dengan atau tanpa judul, dan banyak lagi. Di sini, kita telah memutuskan untuk menggunakan tab yang memiliki judul dengan icon di bagian atas dengan preset warna yang stabil.

Komponen ionTab memiliki sejumlah atribut yang bisa digunakan untuk menentukan perilakunya. Itu mendukung banyak fitur, seperti menunjukkan badge kecil notifikasi, menautkan tab ke kondisi, perilaku icon, dan banyak lagi. Untuk tab kita, masing-masing memiliki title, sebuah class icon untuk ketika tab sedang aktif (icon-on) atau nonaktif (icon-off), dan menautkan ke kondisi dengan menggunakan ui-sref.

Di dalam tiap tab merupakan ionNavView lainnya. Ini mungkin tampak di luar tempatnya karena kita telah mengatur ionNavView di index.html. Apa yang kita sedang lakukan adalah menyatakan lokasi tambahan dimana kondisi bisa di-render, yang bisa dipikirkan sebagai tampilan turunan (child views).

Tiap tab dapat memiliki histori navigasinya sendiri, karena tiap ionNavView independen terhadap lainnya. Tiap tab juga memiliki nama unik, yang akan berguna sehingga kita bisa menentukan kondisi tertentu untuk muncul di dalam ionNavView yang diberi nama.

Kamu mungkin menyadari tidak ada elemen ionView pada halaman ini dan itu penting untuk dicatat ketika menggunakan tab stateful. Itu tidak diperlukan ketika kamu menggunakan ionTabs dalam cara ini, hanya jika kamu menggunakan tab stateless, versi komponen CSS, kamu akan memerlukannya.

Kita sekarang perlu mengatur beberapa kondisi tambahan untuk membuat contoh berfungsi. Buat file lainnya di www/views/settings/settings.js dan tambahkan code berikut.

angular.module('App')
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.state('settings', {
    url: '/settings',
    abstract: true,
    templateUrl: 'views/settings/settings.html'
  })
  .state('settings.about', {
    url: '/about',
    views: {
      about: {
        templateUrl: 'views/settings/tab.about.html'
      }
    }
  })
  .state('settings.license', {
    url: '/license',
    views: {
      about: {
        templateUrl: 'views/settings/tab.license.html'
      }
    }
  })
  .state('settings.preferences', {
    url: '/preferences',
    views: {
      preferences: {
        controller: 'PreferencesController',
        controllerAs: 'vm',
        templateUrl: 'views/settings/tab.preferences.html'
      }
    }
  });

  $urlRouterProvider.when('/settings', '/settings/preferences');
})
.controller('PreferencesController', function(Types) {
  var vm = this;

  vm.types = Types;
});

Kamu bisa melihat bahwa kita mengatur beberapa kondisi baru, namun ini tampak berbeda dari lainnya yang telah kita tentukan sejauh ini. Kondisi pertama merupakan kondisi abstrak, yang pada dasarnya merupakan kondisi yang tidak dapat dimuat secara langsung secara mandiri dan memiliki turunan. Ini masuk akal bagi kita dengan antarmuka tab karena kondisi settings memuat template komponen tab, namun pengguna tidak pernah hanya pada komponen tab. Mereka selalu melihat tab aktif, yang mengandung kondisi lainnya. Jadi dengan menggunakan abstrak memberikan kita kemampuan untuk mengikat dengan benar.

Ketiga kondisi lainnya ditentukan sebagai settings.[name]. Ini memungkinkan kita menentukan hubungan induk-turunan antara kondisi tersebut, yang pada dasarnya mencerminkan hubungan induk-turunan antara komponen ionTabs dan ionTab. Kondisi tersebut menggunakan properti view, yang merupakan sebuah obyek dengan properti yang diberi nama untuk digunakan oleh view.

Nama yang kamu berikan pada template dengan ionNavView hendaklah cocok dengan nama properti. Nilai properti tersebut kemudian memiliki definisi kondisi yang sama, tanpa url yang dinyatakan dengan cara biasa. url juga mengikuti hubungan induk-turunan dengan menggabungkan keduanya. Jadi semua kondisi turunan ini di-render seperti /settings/preferences.

Kamu perlu menambahkan settings.js pada index.html dengan menggunakan tag script lainnya. Setelah kamu melakukan itu, kamu akan melihat beberapa error karena kita mengacukan sejumlah file yang belum kita buat. Mari selesaikan dengan template tab kita.

1	<script src="views/settings/settings.js"></script>

Kita perlu membuat tiga. Dua pertama merupakan konten statis sehingga saya tidak akan membahasnya secara detail. Buat file di www/views/settings/tab.about.html dan tambahkan konten berikut.

<ion-view view-title="About" hide-back-button="true">
  <ion-content>
    <div class="list">
      <a href="https://github.com/gnomeontherun/civinfo-part-3" target="_blank" class="item">
        <h2>Project on GitHub</h2>
        <p>Click to view project</p>
      </a>
      <div class="item" ui-sref="settings.license">
        <h2>License</h2>
        <p>See full license</p>
      </div>
    </div>
  </ion-content>
</ion-view>

Ini mengandung sebuah template yang menampilkan beberapa informasi. Itu tertaut ke project GitHub dan lisensi. Tampilannya seperti berikut ini.

Buat file lainnya di www/views/settings/tab.license.html dan tambahkan konten berikut.

<ion-view view-title="License">
  <ion-content>
    <div class="card">
      <div class="item item-divider">
        The MIT License (MIT)
      </div>
      <div class="item item-text-wrap">
        <p>Copyright (c) 2016 Jeremy Wilken</p>
        <p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
        <p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
        <p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
      </div>
    </div>
  </ion-content>
</ion-view>

Ini berisi konten lisensi (MIT) untuk code ini. Ada kartu sederhana untuk memuat konten. Tampilan sebagai berikut.

Template akhir memuat beberapa elemen form. Saya akan membahasnya lebih detail. Buat sebuah file baru di www/views/settings/tab.preferences.html dan tambahkan konten berikut.

<ion-view view-title="Preferences" hide-back-button="true">
  <ion-content>
    <ul class="list">
      <li class="item item-divider">
        Types of Locations
      </li>
      <li class="item item-toggle" ng-repeat="type in vm.types">
        {{type.type}}
        <label class="toggle">
          <input type="checkbox" ng-model="type.enabled">
          <div class="track">
            <div class="handle"></div>
          </div>
        </label>
      </li>
    </ul>
  </ion-content>
</ion-view>

Tampilan ini memuat daftar toggles yang menunjukkan empat jenis tempat yang bisa ditampilkan oleh aplikasi, museum, taman, perpustakaan, dan rumah sakit. Masing-masing item daftar ini memungkinkanmu untuk mengaktifkan atau menonaktifkan jenis tempat dari daftar. Tombol toggle merupakan komponen CSS. Kita hanya perlu menggunakan input kotak centang dengan penanda spesifik ini dan struktur class CSS untuk membuatnya tampak sebuah tombol toggle mobile.

Tampilan ini memiliki kontroler yang dinyatakan dalam settings.js, namun itu memasukkan layanan Types yang belum kita buat. Kita akan memperbaiki itu dengan menambahkan layanan baru pada www/js/app.js.

.factory('Types', function() {
  return [
    {type: 'Park', enabled: true},
    {type: 'Hospital', enabled: true},
    {type: 'Library', enabled: true},
    {type: 'Museum', enabled: true}
  ];
})

Layanan ini memegang kumpulan jenis tempat. Itu memiliki properti untuk nama masing-masing tempat dan apakah itu diaktifkan atau dinonaktifkan. Kita menggunakan properti yang diaktifkan dalam tombol toggle ngModel untuk melacak keadaan jika jenis tersebut harus ditampilkan.

Pada poin ini, kamu bisa membuka menu samping dan melakukan navigasi pada tautan pengaturan. Kamu dapat melihat dua tab, preferences dan about. Di dalam tab preferences, kamu bisa melakukan toggle jenis tempat ke posisi on atau off.

Jika kamu pergi ke tab about, kamu bisa memilih lisensi dan melihat bagaimana itu melakukan navigasi ke rute lainnya di dalam tab. Jika kamu berpindah antara tab preferences dan about setelah melihat lisensi, kamu bisa melihat bahwa tab mengingat tempatmu sebelumnya pada kondisi lisensi bahkan setelah kamu meninggalkannya, yang menunjukkan sifat stateful dari tab ini.

Langkah terakhir dalam tutorial ini adalah memperbaharui tampilan tempat untuk menggunakan layanan Types yang hanya memuat jenis tempat yang diinginkan dan menggunakan layanan histori untuk menangani ketika memuat ulang atau menggunakan cache.

3. Caching dan Penggunaan Layanan Histori

Secara default, Ionic melakukan caching 10 tampilan terakhir dan menyimpannya di memori. Kebanyakan aplikasi bahkan tidak memiliki kondisi sebanyak itu, yang berarti keseluruhan aplikasi tetap berada di dalam memori. Ini berguna karena itu berarti bahwa Ionic tidak harus me-render tampilan lagi sebelum melakukan navigasi, yang mempercepat aplikasi.

Ini bisa menyebabkan beberapa permasalahan perilaku karena kamu mungkin mengira bahwa kondisi selalu memuat ulang dan memulai ulang controller tiap kali kondisi tersebut diakses. Karena hanya 10 tampilan yang mengalami caching, jika kamu memiliki 20 tampilan, hanya 10 terakhir yang berada dalam cache. Itu berarti kamu tidak dapat menjamin bahwa sebuah tampilan berada dalam cache atau tidak. Sehingga kamu hendaklah menghindari melakukan pengaturan logic dalam controller di luar kait siklus hidup. Kamu bisa juga mengkonfigurasi strategi caching dengan menggunakan $ionicConfigProvider.

Terkadang kamu perlu melihat histori navigasi pengguna untuk menentukan apa yang harus dilakukan. Sebagai contoh, di dalam aplikasi ini, kita ingin memastikan daftar tempat tetap berada dalam cache jika pengguna mengetuk sebuah tempat dan kemudian kembali ke daftar. Jika kita secara otomatis memuat ulang daftar setiap kali mengunjunginya, pengguna bisa kehilangan tempatnya pada daftar setelah mereka melakukan scrolling dan melihat sebuah tempat.

Di sisi lain, jika pengguna melakukan navigasi pada halaman pengaturan dan kemudian kembali ke daftar tempat, kita ingin memuat ulang daftar karena mereka mungkin telah mengubah jenis tempat yang ingin ditampilkan.

Kita akan menggunakan kombinasi life cycle events yang telah kita lihat sebelumnya dengan layanan $ionicHistory untuk menambahkan beberapa kondisi tempat jika daftar dimuat ulang. Kita juga ingin menggunakan layanan Types untuk membantu kita hanya memuat jenis tempat yang ingin dilihat pengguna.

Buka www/views/places/places.js dan perbaharui itu untuk mencocokkan code berikut. Kita perlu mengubah cara data dimuat ulang dan menggunakan layanan $ionicHistory untuk menginspeksi histori untuk menentukan kapan melakukan muat ulang.

angular.module('App')
.config(function($stateProvider) {
  $stateProvider.state('places', {
    url: '/places',
    controller: 'PlacesController as vm',
    templateUrl: 'views/places/places.html'
  });
})
.controller('PlacesController', function($http, $scope, $ionicLoading, $ionicHistory, Geolocation, Types) {
  var vm = this;
  var base = 'https://civinfo-apis.herokuapp.com/civic/places?location=' + Geolocation.geometry.location.lat + ',' + Geolocation.geometry.location.lng;
  var token = '';
  vm.canLoad = true;
  vm.places = [];

  vm.load = function load() {
    $ionicLoading.show();
    var url = base;
    var query = [];
    angular.forEach(Types, function(type) {
      if (type.enabled === true) {
        query.push(type.type.toLowerCase());
      }
    });
    url += '&query=' + query.join('|');

    if (token) {
      url += '&token=' + token;
    }

    $http.get(url).then(function handleResponse(response) {
      vm.places = vm.places.concat(response.data.results);
      token = response.data.next_page_token;

      if (!response.data.next_page_token) {
        vm.canLoad = false;
      }
      $scope.$broadcast('scroll.infiniteScrollComplete');
      $ionicLoading.hide();
    });
  };

  $scope.$on('$ionicView.beforeEnter', function() {
    var previous = $ionicHistory.forwardView();
    if (!previous || previous.stateName != 'place') {
      token = '';
      vm.canLoad = false;
      vm.places = [];
      vm.load();
    }
  });
});

Pertama-tama, kita telah memodifikasi cara URL dibuat agar API berubah dari hanya memuat taman menjadi memuat jenis yang diminta. Jika kamu membandingkan ini dengan versi sebelumnya, itu terutama dengan menggunakan angular.forEach untuk melakukan looping pada tiap jenis dan menambahkan itu pada URL.

Kita juga telah memodifikasi cara layanan $ionicLoading bertindak. Alih-alih berjalan langsung ketika controller berjalan, kita memicu itu kapanpun metode vm.load() dipanggil. Ini penting karena controller akan mengalami caching dan tidak akan memuat ulang data secara default.

Perubahan terbesar adalah life cycle event handler $ionicView.beforeEnter. Event ini berjalan sebelum tampilan akan menjadi tampilan aktif berikutnya dan namun memungkinkan kita melakukan pengaturan. Kita menggunakan metode $ionicHistory.forwardView() untuk mendapatkan informasi tentang tampilan terakhir pengguna berada.

Jika itu adalah muatan pertama, maka ini akan kosong, jika tidak itu mengembalikan beberapa data tentang kondisi terakhir. Kita kemudian memeriksa apakah kondisi sebelumnya berupa tempat dan, jika demikian, kita menggunakan daftar hasil cache. Juga, karena kita memiliki kurang dari 10 state, kita tahu state akan selalu disimpan di dalam memori.

Jika tidak, itu akan me-reset nilai cache dan memicu muatan data baru. Ini berarti kapanpun saya kembali ke tampilan tempat setelah pergi ke pengaturan, itu akan memuat ulang data. Tergantung pada desain aplikasi, kamu akan cenderung ingin mendesain aturan kondisional yang berbeda tentang cara menangani caching dan memuat ulang.

Layanan histori menyediakan lebih banyak informasi, kumpulan histori menyeluruh, kemampuan untuk memodifikasi histori, detail tentang kondisi terkini, dan banyak lagi. Kamu bisa menggunakan layanan ini untuk memperbaiki pengalaman saat melakukan navigasi dalam aplikasi.

Kita akan membuat dua perbaikan kecil lainnya pada template tempat. Buka www/views/places/places.html dan ubah judul menjadi Local Places.

1	<ion-view view-title="Local Places" hide-back-button="true">

Berikutnya, perbaharui komponen infinite scroll dengan satu atribut lagi, immediate-check, untuk mencegah komponen infinite scroll component dari memuat data pada waktu yang sama saat muatan awal terjadi. Ini pada dasarnya membantu mencegah permintaan duplikasi yang menyebabkan lebih banyak data.

1	<ion-infinite-scroll on-infinite="vm.load()" ng-if="vm.canLoad" immediate-check="false"></ion-infinite-scroll>

Pada titik ini, kita telah membuat sebuah aplikasi yang cukup solid yang memiliki fitur-fitur yang bagus. Kita akan menutup seri ini dengan satu tutorial terakhir yang membahas Cordova dan memadukan beberapa fitur perangkat, seperti mengakses data GPS.

Kesimpulan

Navigasi dengan Ionic selalu dimulai dengan menyatakan beberapa keadaan. Penampilan navigasi itu bisa dilakukan dengan berbagai cara seperti yang kita lihat dalam tutorial ini. Berikut adalah apa yang telah kita bahas dalam tutorial ini:

Komponen menu samping memudahkan untuk membuat satu atau dua menu samping yang bisa diaktifkan berdasarkan permintaan atau saat digeser.
Tab bisa berupa stateless atau stateful. Tab stateful bisa memiliki tampilan individual dengan histori navigasi yang terpisah.
Tab memiliki banyak pilihan konfigurasi mengenai bagaimana icon dan teks ditampilkan.
Tombol toggle merupakan komponen CSS yang berkerja seperti kotak centang, namun didesain untuk mobile.
Kamu bisa menggunakan layanan $ionicHistory untuk mempelajari lebih lanjut tentang histori navigasional aplikasi untuk menyesuaikan pengalaman.