Memulai dengan Ionic: Service

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

1. Pengantar Service

Pada bagian pertama dan kedua dari seri ini di Ionic, kita mengatur pengembangan lokal dan membuat beberapa view untuk memuat daftar taman menggunakan beberapa komponen ionic, seperti navigasi dasar dan daftar komponen. Dalam tutorial ini, kita akan menggali bagaimana Ionic menyediakan sejumlah service yang memungkinkanmu untuk secara terprogram mengelola aplikasi dan antarmuka.

Sebelumnya, kita menunjukkan bagaimana Ionic menyediakan fitur-fitur interaktif melalui komponen, yang digunakan sebagai elemen HTML (diimplementasikan sebagai direktif Angular). Namun, ada beberapa elemen antarmuka yang tidak masuk akal sebagai komponen yang memberi contoh dengan HTML, seperti loader atau lapisan action sheet.

Mari kita mulai dengan melihat pada peranan service yang dimainkan di aplikasimu. Saya telah mengidentifikasi tiga tipe service utama di Ionic:

component service
delegate service
assistive service

Component Service

Component service memberdayakan penggunaan komponen, tetapi bukan menggunakan HTML untuk mendeklarasikannya (seperti yang kita lihat dengan ionNavBar) yang itu dikelola menggunakan JavaScript. Dengan kata lain, kamu akan memanfaatkan komponen ini dengan menambahkan kode ke controller-mu. Kita akan menggunakan dua hal ini pada contoh di bawah.

Hal ini dapat berguna untuk untuk memikirkan service ini sebagai komponen yang memiliki siklus kehidupan. Biasanya, kamu ingin itu memuat pada titik tertentu dan, setelah selesai, itu akan dihapus. Sebagai contoh, $ionicModal memungkinkanmu untuk membuat modal. Modal memiliki siklus hidup, mereka dibuka dan ditutup untuk alasan tertentu. Kamu mungkin memiliki modal yang meminta pengguna untuk login atau mereka dapat menutup model untuk melewati itu, sehingga menyelesaikan siklus hidup.

Delegate Service

Beberapa komponen memiliki delegate service pendamping yang dapat mengubah atau mengelola komponen. Kamu mungkin ingin untuk secara terprogram memanipulasi komponen setelah itu dibuat dan service ini dirancang untuk membuat itu menjadi mungkin. Mereka dinamakan demikian karena mereka mendelegasikan tindakan komponen.

Komponen ionNavBar memiliki delegate service yang disebut $ionicNavBarDelegate. Service ini memiliki beberapa metode, tapi salah satu contohnya adalah metode title(), yang memungkinkanmu untuk memperbarui judul bar navigasi. Ruang lingkup dari fitur yang tersedia untuk setiap delegate service bervariasi, tetapi mereka harus mudah dikenali dalam dokumentasi dengan nama.

Assistive Services

Kategori yang terakhir adalah service yang memberikan semacam bantuan fungsi atau memberikan informasi. Hanya ada beberapa dari mereka dan mereka tidak cukup cocok ke dalam dua kategori lainnya. Beberapa contohnya adalah:

$ionicPlatform: membantumu berinteraksi dengan perangkat hardware
$ionicGesture: memungkinkanmu untuk menangani event gerakan
$ionicPosition: memberitahumu lokasi elemen pada layar

Assistive service ini cenderung untuk membantumu mengembangkan logika atau menangani interaksi. Mereka tidak menghasilkan atau memodifikasi komponen pada mereka sendiri.

Kita juga akan melihat beberapa hal-hal lain dalam tutorial ini:

CSS component, yang mana hanya visual dan tidak memberikan logika fungsional tidak seperti saudara-saudara komponen JavaScript
Ionic event, yang kita dapat memanfaatkan untuk menghubungkan ke event, misalnya, ketika sedang loading atau selesai loading
lebih banyak fitur navigasi, yang membuatnya mudah dinavigasi, mengelola state, dan menambahkan tombol ke bar navigasi

File Sumber

Pada tutorial ini, kita akan memperluas aplikasi yang kita mulai pada tutorial sebelumnya. Sebagai pengingat, aplikasi ini dirancang untuk memberikan pengguna informasi tentang fasilitas umum setempat, seperti taman dan perpustakaan. Aplikasi sudah menampilkan daftar taman di Chicago dan sekarang kita akan menambahkan kemampuan untuk menampilkan indikator loading, view layar detail taman individu, membuka menu aksi, dan menerapkan beberapa dasar fitur berbagi.

Anda dapat melihat proyek yang telah selesai di GitHub. Contoh terakhir juga tersedia untuk dipratinjau.

Anda dapat men-download file atau mengeceknya menggunakan Git. Setelah kamu memiliki file pada komputermu, kamu perlu menjalankan npm install untuk menyiapkan proyek. Jika kamu mengecek kode menggunakan Git, kamu dapat mengkode sepanjang jika kamu me-reset repo untuk mencocokkan mana bagian terakhir itu berakhir dengan menjalankan git checkout-b start. Setelah kamu memiliki file, mulai server Ionic-mu dengan menjalankan ionic serve.

2. Mengimplementasikan indikator Loading

Saat ini, aplikasi memuat data dan ada sebuah indikator lingkaran kecil dari komponen scroll tak terbatas yang tampil sampai ini termuat. Namun, kita benar-benar ingin melapisi keseluruhan aplikasi jadi sangat jelas bahwa aplikasi sedang loading.

service $ionicLoading ini sangat berguna untuk melapisi dan memblokir pengguna dari berinteraksi dengan aplikasi sampai data telah dimuat. Ini bisa dikonfigurasi. Misalnya, kamu dapat menyatakan jika ikon loading atau beberapa teks muncul, jika kamu ingin latar belakang atau tidak, atau jika itu harus secara otomatis tersembunyi setelah jangka waktu tertentu. Kamu dapat melihat loader beraksi pada tangkapan layar di bawah.

Buka www/views/places.js untuk membuat beberapa modifikasi untuk menggunakan loader. Pertama, kita perlu menyuntikkan service ke controller kita dengan menambahkan $ionicLoading untuk parameter fungsi. Service ini cukup sederhana, hanya memiliki dua metode, show(), dan hide(). Kita dapat membuat loader show dan hide dengan memanggil metode seperti yang kamu lihat di sini pada snippet ini.

.controller('PlacesController', function($http, $scope, $ionicLoading, Geolocation) {
  var vm = this;
  var base = 'https://civinfo-apis.herokuapp.com/civic/places?type=park&location=' + Geolocation.geometry.location.lat + ',' + Geolocation.geometry.location.lng;
  var token = '';
  vm.canLoad = true;
  vm.places = [];

  $ionicLoading.show();

  vm.load = function load() {
    var url = base;
    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();
    });
  };
});

Metode $ionicLoading.show() dipanggil sebagai controller yang dimuat, yang berarti itu segera menyala. Sekarang kita perlu memberitahu loader untuk bersembunyi setelah data telah selesai dimuat seperti yang kamu lihat tepat setelah $broadcast.

Kamu mungkin menyadari bahwa metode $ionicLoading.hide() ini dipanggil setiap kali data dimuat. Hal ini tidak masalah. Karena loader sudah tersembunyi, panggilan ini tidak memiliki efek apapun.

Kita sekarang telah mengimplementasikan service Ionic. Sangat sederhana. Kan? Beberapa yang sedikit lebih rumit dan kita akan bekerja pada contoh lain yang menggunakan action sheet. Sebelum kita masuk ke itu, walaupun, kita ingin memperluas aplikasi kita memiliki dua view untuk kedua daftar catatan dan melihat catatan secara individual.

3. Menambahkan View Catatan

Langkah berikutnya adalah untuk membuat view baru yang akan menampilkan lebih detail tentang sebuah taman tertentu. Informasi dapat bervariasi dari taman ke taman, tetapi kita akan fokus pada mendapatkan informasi gambar, website, telepon, dan alamat. Hasil penambahan view ini ditampilkan di sini.

Untuk membuat view baru, buat file di www/views/place/place.js dan masukkan konten yang kamu lihat di bawah. Ini adalah controller dan definisi state untuk view place.

angular.module('App')
.config(function($stateProvider) {
  $stateProvider.state('place', {
    url: '/places/:place_id',
    controller: 'PlaceController as vm',
    templateUrl: 'views/place/place.html',
    resolve: {
      Place: function($http, $stateParams) {
        var url = 'https://civinfo-apis.herokuapp.com/civic/place?place_id=' + $stateParams.place_id;
        return $http.get(url);
      }
    }
  });
})
.controller('PlaceController', function($scope, Place) {
  var vm = this;

  vm.place = Place.data.result;
});

Jika kamu melihat metode config(), kamu akan melihat bahwa kita mendeklarasikan sebuah state baru. Ini adalah router ui dalam aksi, jadi kamu harus berkonsultasi dengan dokumentasi ui-router untuk semua rincian tentang mendeklarasikan state.

Definisi objek menunjukkan bahwa kita menggunakan URL dari /places/:place_id. Ketika kamu melihat bagian dari URL dengan titik dua di depan, seperti :place_id, ini menandai bagian jalur ini sebagai parameter state. State mampu menarik nilai dan memberikannya kepadamu menggunakan objek $stateParams. Sebagai contoh, /places/12345 akan menghasilkan $stateParams.place_id = '12345'.

Kamu telah melihat bagian lain dari definisi sebelumnya, kecuali untuk properti resolve. Ini adalah fitur yang memungkinkanmu untuk meminta berbagai fungsi yang harus dipanggil sebelum state diciptakan. Ini menerima suatu objek nilai-nilai kunci dan fungsi, jadi di sini kita memiliki Place sebagai kunci dan hasil dari fungsi yang akan ditugaskan untuk itu.

Dalam fungsinya, ini bisa menerima parameter untuk menyuntikkan, mirip dengan yang bisa kamu lakukan dengan controller. Di sini, service $http dan $stateParams yang disuntikkan. Fungsinya kemudian menggunakan nilai dari place_id yang dilewatkan via URL dan membuat dan mengembalikan request HTTP. Hal ini pada dasarnya apa yang dilakukan di view place, kecuali controller melakukannya.

Fitur resolve ini cukup cerdas untuk menentukan bahwa jika kamu mengembalikan promise, ini akan menunggu promise itu untuk menyelesaikannya sebelum membuat state. Dengan kata lain, $http.get() mengembalikkan sebuah promise untuk memuat data dan ui-router menunggu sampai data tersedia sebelum menciptakan state dan melewati Place ke controller. Fitur resolve sangat berguna untuk memuat data preloading di aplikasimu dan ini adalah contoh yang cukup mendasar tentang cara memanfaatkannya.

Sekarang setelah kita mendefinisikan state, controller dideklarasikan dan memberikan data yang dihasilkan dari Place (ini adalah apa yang terselesaikan di state) ke vm.place. Kita juga perlu untuk membuat template kita untuk state ini, jadi butlah file baru di www/views/place/place.html dan tambahkan konten berikut untuk itu.

<ion-view view-title="{{vm.place.name}}">
  <ion-content>
    <div class="card" ng-if="vm.place">
      <div class="item item-text-wrap item-icon-left">
        <i class="icon ion-map"></i> {{vm.place.formatted_address}}</p>
      </div>
      <div class="item item-image" ng-if="vm.place.photos[0].photo_reference">
        <img ng-src="{{'https://civinfo-apis.herokuapp.com/civic/photo?photo_id=' + vm.place.photos[0].photo_reference}}">
      </div>
      <a ng-if="vm.place.website" class="item item-icon-left" ng-href="{{vm.place.website}}" target="_system">
        <i class="icon ion-link"></i> {{vm.place.website}}
      </a>
      <a ng-if="vm.place.formatted_phone_number" class="item item-icon-left" ng-href="tel://{{vm.place.formatted_phone_number}}">
        <i class="icon ion-ios-telephone"></i> {{vm.place.formatted_phone_number}}
      </a>
    </div>
  </ion-content>
</ion-view>

Template ini dimulai dengan menggunakan ionView untuk membungkus kontennya, sehingga sistem navigasi Ionic dapat melacaknya dengan benar. Itu juga menetapkan judul berdasarkan nama tempat. Pembungkus IonContent berisi konten utama, dan kamu akan melihat bahwa template menggunakan kelas CSS, bukan elemen untuk membuat komponen card.

Pada bagian sebelumnya, kita berbicara tentang bagaimana beberapa komponen hanya class CSS. Card adalah salah satu contohnya. Secara konseptual, hal ini seperti daftar. Isi konten bertumpuk secara vertikal seperti daftar, tetapi styling-nya lebih mirip kartu. Ini memanfaatkan stylings card, yang mencakup fitur seperti dukungan gambar, ikon, dan tata letak rapi lainnya yang ditampilkan dalam dokumentasi.

Ada beberapa direktif ngIf yang digunakan karena tidak ada jaminan bahwa data yang dikembalikan akan memiliki nomor telepon atau website. Direktif NgIf memastikan tidak ada nilai kosong yang ditampilkan Ini juga menggunakan ngHref atau ngSrc untuk membuat tautan dengan benar.

Kamu juga akan melihat penggunaan protokol tel://, yang bila digunakan di telepon, akan meminta pengguna untuk memanggil nomor saat mereka memilihnya. Ini adalah fitur berguna yang mudah digunakan dan terintegrasi dengan baik pada perangkat fisik. Beberapa program di komputer mu, seperti Skype, juga dapat mencoba untuk menangani membuat panggilan telepon untukmu, tergantung pada pengaturanmu.

Ini seharusnya memberikan kita view dapat bekerja, tetapi bagaimana kita menavigasi itu? Kita perlu membuat beberapa modifikasi kecil untuk membuat navigasi bekerja dari view place.

4. Menavigasi Antara View

Ui-router menyediakan direktif ui-sref yang digunakan untuk menghubungkan item ke state lain. Dalam kasus ini, kita ingin masing-masing item dalam daftar view place untuk menautkan ke view place yang sesuai.

Buka www/views/places/places.html dan tambahkan direktif untuk menautkan ke setiap tempat. Perbarui ionItem dengan atribut baru di sini.

1	<ion-item ng-repeat="place in vm.places" class="item-avatar" ui-sref="place({place_id: place.place_id})">

Direktif ui-sref memiliki format di mana kamu dapat menautkan ke state lain dengan namanya, bukan oleh beberapa URL seperti yang kamu lakukan dengan href. Hal ini berguna karena URL dapat berubah. Ini juga dapat menerima parameter menggunakan yang digunakan untuk membangun URL dan, dalam kasus kita, kita ingin melewatkan properti place.place_id. ui-sref mengambil properti sebagai objek, sehingga state-name({param: value}) adalah sintaksnya.

Sekarang pratinjau aplikasi dan pilih taman, ia akan menavigasi ke view place baru dan kamu dapat melihat bar alamat untuk melihat URL menambahkan nilai place_id. Namun, kita sekarang punya masalah. Bagaimana kita bisa kembali ke daftar?

Kami menggunakan fungsi ionNavBackButton untuk memberi kita tombol kembali otomatis. Buka www/index.html dan tambahkan snipper berikut di dalam ionNavBar. Ini menambahkan tombol kembali yang hanya akan ditampilkan jika ada tempat untuk kembali.

<ion-nav-bar class="bar-balanced">
  <ion-nav-back-button class="button-clear">
    <i class="ion-arrow-left-c"></i> Back
  </ion-nav-back-button>
</ion-nav-bar>

Navigasi Ionic cukup cerdas untuk melacak riwayat saat kamu menggunakan aplikasi. Jika ada view sebelumnya untuk kembali, maka akan muncul tombol kembali. Jika tidak, itu hanya akan disembunyikan.

Kita juga ingin mendeklarasikan bahwa view place tidak boleh memunculka tombol kembali, yang dapat kita lakukan adalah dengan menambahkan direktif hideBackButton di www/views/places/places.html.

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

Saat kamu sedang mengembangkan dan melihat pratinjau di browser, terkadang riwayat akan di-reset. Sebagai contoh, ketika kamu berada di view place dan kamu menyimpan perubahan di editor-mu, browser memuat ulang secara otomatis dan mengatur ulang riwayat. Dalam kasus ini tombol kembali tidak muncul seperti yang diharapkan. Kamu dapat memperbaiki hal ini dengan kembali ke daftar dan menyegarkan untuk mengatur riwayat secara langsung.

Kita telah membuat kemajuan yang baik, tapi sekarang, ketika kamu mengetuk item dalam daftar, itu menunggu untuk transisi ke view yang baru sampai API memanggil kembalian dengan data. Ini mungkin tampak cepat bagimu, tapi terkadang bisa lambat jika API lambat. Ini mungkin menyebabkan seseorang menganggap aplikasi macet, lamban, atau itu tidak mendaftarkan ketukannya karena tidak segera bereaksi terhadap ketukan. Kita menangani hal ini dengan beberapa peristiwa siklus hidup yang membantu kita menyiapkan loader untuk ditampilkan selama ini.

5. Menambahkan Loader Selama Transisi

Untuk memberikan pengalaman pengguna yang lebih baik, kita akan menggunakan layanan $ionicLoading untuk melapisi aplikasi sementara data dimuat untuk view place. Untuk mengetahui kapan harus menunjukkan dan menyembunyikan loader, kita menggunakan event life cycle.

Event ini menyala berdasarkan peristiwa navigasi, seperti sebelum/setelah memasuki view atau sebelum/setelah meninggalkan view. Kamu dapat melakukan apa pun yang mungkin diperlukan pada titik-titik ini pada waktunya, seperti mengatur ulang beberapa data atau mungkin menggunakannya untuk mengirimkan informasi penggunaan.

Untuk menunjukkan itu, mari kita tambahkan satu event listener ke tampilan tempat yang menangani pemicu loader saat kamu mulai menavigasi ke view place. Buka www/views/places/places.js dan tambahkan baris berikut ke controller. Kamu juga perlu untuk memastikan $scope yang dideklarasikan pada parameter fungsi controller sehingga tersedia.

1	$scope.$on('$ionicView.beforeLeave', function() {
2	$ionicLoading.show();
3	});

Ini adalah lingkup event listener yang mendengarkan event $ionicView.beforeLeave (lihat lingkup event Angular). Ionic menyiarkan event ini ke controller-mu dan memanggil fungsi anonim yang dideklarasikan di sini. Fungsi ini hanya memanggil metode $ionicLoading.show() untuk menghidupkan loader.

Ini memicu loader muncul saat pengguna mengetuk item. Sekarang kita menambahkan snippet serupa ke view place yang menangani penyembunyian loader saat view selesai loading. Buka www/views/place/place.js dan tambahkan baris berikut ke controller. Kamu perlu menambahkan keduanya $ionicLoading dan $scope untuk parameter fungsi controller karena saat ini tidak disuntikkan.

1	$scope.$on('$ionicView.afterEnter', function() {
2	$ionicLoading.hide();
3	});

Ini mendengarkan acara lingkup yang berbeda yang menyala saat tampilan selesai dan memanggil fungsi untuk menyembunyikan loader. Loader ditampilkan dalam waktu antara saat pengguna mengetuk place ke view sampai view termuat sepenuhnya. Kamu bisa mencoba event lain dan melihat kapan mereka memicu.

Hal terakhir yang kita lakukan pada tutorial ini diatur dengan tombol action sheet sharing yang memungkinkanmu untuk memposting ke Twitter, Facebook, atau email dan berbagi informasi taman.

6. Tombol Sharing Menggunakan Action Sheet Service

Action sheets cukup berguna untuk menyediakan daftar pilihan tambahan. Maksudnya biasanya untuk situasi di mana kamu ingin menyajikan daftar tindakan yang dikelompokkan dan, dalam contoh kita, ini adalah daftar cara untuk berbagi informasi tentang taman. Action sheet kita akan buat terlihat seperti ini.

Action sheet service sedikit lebih rumit daripada loading service, karena menangani konfigurasi dan masukan pengguna. Buka www/views/place/place.js dan tambahkan metode baru ini ke controller. Kamu juga perlu memastikan $ionicActionSheet yang disuntikkan ke controller.

vm.openSheet = function() {
  var sheet = $ionicActionSheet.show({
    titleText: 'Share this place',
    buttons: [
      { text: 'Share via Twitter' },
      { text: 'Share via Facebook' },
      { text: 'Share via Email'}
    ],
    cancelText: 'Cancel',
    buttonClicked: function(index) {
      if (index === 0) {
        window.open('https://twitter.com/intent/tweet?text=' +
          encodeURIComponent('I found this great place! ' + vm.place.url));
      } else if (index === 1) {
        window.open('https://www.facebook.com/sharer/sharer.php?u=' + vm.place.url);
      } else if (index === 2) {
        window.open('mailto:?subject=' + encodeURIComponent('I found this great place!') + '&body=' + vm.place.url);
      }
      sheet();
    }
  });
};

Metode openSheet() bertanggung jawab untuk membuat action sheet. Hal ini dilakukan dengan memanggil $ionicActionSheet.show(), yang mengembalikan fungsi yang disimpan pada sheet. Itu memungkinkanmu menutup sheet saat kamu selesai melakukannya nanti dengan memanggil sheet(). Metode show() yang mengambil sebuah objek dengan sejumlah properti yang kita akan hancurkan. Ada beberapa contoh service Ionic yang mengikuti pola ini, seperti modal dan popovers, jadi kamu selalu bisa menutupinya.

Lembar ini mengelola judul menggunakan properti titleText dan biasanya digunakan untuk memberi tahu pengguna cara menggunakan tombolnya. Properti cancelText menerima string yang digunakan untuk mengaktifkan tombol batal. Jika kamu tidak menyatakan ini, tidak ada tombol cancel yang akan dipilih. Kamu juga bisa membatalkannya dengan mengetuk latar belakang di luar tombol.

Untuk mendeklarasikan tombol yang kamu gunakan pada properti buttons, yang merupakan array dari objek yang memiliki properti text. Mereka ditampilkan sesuai urutan deklarasi mereka, jadi urutkan sesuai dengan itu.

Properti buttonClicked mengambil sebuah fungsi dan melewati indeks tombol yang dipilih (seperti yang dideklarasikan di buttons). Oleh karena itu, kamu dapat mengetahui apa yang harus dilakukan berdasarkan indeks yang diteruskan. Dalam fungsi ini, indeks dicentang dan membuka Facebook, Twitter, atau menggunakan mailto: untuk memicu email client.

Ini dapat membuka tautan ini di aplikasi Facebook, Twitter, atau email, tergantung pada setelan pengguna dan mungkin perangkatnya, namun setidaknya akan membuka tautan di luar aplikasimu (di browser eksternal). Bagian terakhir adalah memanggil metode sheet(), yang menutup action sheet.

Action sheet sekarang siap beraksi, namun kita masih perlu menambahkan tombol untuk memicu sheet tersebut. Untuk melakukan ini, kita menambahkan tombol bar navigasi ke view place yang memanggil vm.openSheet(). Buka www/views/place/place.html dan tambahkan snippet ionNavButtons antara ionView dan ionContent.

<ion-view view-title="{{vm.place.name}}">
  <ion-nav-buttons side="right">
    <button class="button button-clear" ng-click="vm.openSheet()">
      <i class="icon ion-ios-upload-outline"></i>
    </button>
  </ion-nav-buttons>
  <ion-content>

Berikut adalah fitur navigasi ionic lain yang berguna yang memungkinkanmu menambahkan tombol bar navigasi ke view tertentu menggunakan ionNavButtons. Setiap tombol di dalamnya ditambahkan ke panel navigasi dan kamu dapat mengkonfigurasi di sisi mana tampilan mereka.

Pada titik ini, semuanya bekerja. Pengguna dapat membuka action sheet untuk berbagi tentang taman dengan teman-teman mereka.

Kesimpulan

Pada tutorial ini, kita membahas service Ionic dan bagaimana mereka digunakan. Sepanjang jalan, kita menemukan sejumlah fitur Ionic lainnya:

Service Ionic disebut dalam controller dan biasanya memiliki siklus hidup yang independen dari view saat ini.
Service $ionicLoading ini berguna untuk menampilkan dan menyembunyikan indikator pemuatan saat aplikasimu memuat data atau sebaliknya memblokir antarmuka pengguna.
Service $ionicActionSheet menyajikan pengguna dengan daftar tombol yang melapisi aplikasi untuk memudahkan akses ke aksi yang penting.
Fitur navigasi Ionic juga menyertakan ionNavBackButton untuk secara otomatis menampilkan tombol kembali saat memungkinkan untuk kembali. ionNavButtons memungkinkanmu untuk menambahkan tombol bar navigasi dengan view yang spesifik.
Ionic memiliki komponen CSS, seperti card, yang tidak memiliki fitur interaktif khusus dan digunakan hanya dengan mendeklarasikan kelas CSS.

Dalam tahapan berikutnya, kita akan menggali lebih jauh lagi ke beberapa fitur navigasi Ionic.

Buat Template Ionic dan Menangkan $1000

Jika kamu sudah merasa nyaman dengan framework Ionic, kamu mungkin ingin mempertimbangkan untuk mengikuti kontes Kontes Envato Yang Paling Dicari Untuk Template Ionic. Bagaimana? Buat template Ionic yang unik dan kirimkan ke Envato Market pada tanggal 27 April 2016.

Lima template terbaik menerima $1000. Tertarik? Baca lebih lanjut di kontes website untuk rincian tentang persyaratan dan panduan kontes.