Category Archives: ionic

Ionic using Sqlite

Sqlite is better than ‘local storage’ and ‘session’ for complex data relationship on ionic/cordova platform.

Here is instruction on how to install

1. create an empty ionic app
$ ionic start myApp blank –type ionic1

2. add Cordova for sqlite native plugin
$ bower install ngCordova
it will install ‘www/lib/ngCordova/’.

3. install sqlite native plugin
$ ionic cordova plugin add cordova-sqlite-storage
$ npm install –save @ionic-native/sqlite

4. in www/index.html, add

5. in app.js make app.js looks like.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var myApp = angular.module('starter', ['ionic','ngCordova'])
 
    .run(function($ionicPlatform, $cordovaSQLite) {
 
        $ionicPlatform.ready(function() {
            if(window.cordova && window.cordova.plugins.Keyboard) {
                // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
                // for form inputs)
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
 
                // Don't remove this line unless you know what you are doing. It stops the viewport
                // from snapping when text inputs are focused. Ionic handles this internally for
                // a much nicer keyboard experience.
                cordova.plugins.Keyboard.disableScroll(true);
 
            }
            if(window.StatusBar) {
                StatusBar.styleDefault();
            }
 
            var db;
            if (window.cordova) {
                db = $cordovaSQLite.openDB({ name: "my.db" }); //device
            }else{
                db = window.openDatabase("my.db", '1', 'my', 1024 * 1024 * 100); // browser
            }
            $cordovaSQLite.execute(db,"create table if not exists people(id integer primary key, firstname text, lastname text)");
            //$cordovaSQLite.deleteDB("my.db");  
 
        });
    })

Key Important code:

1
2
3
4
5
            if (window.cordova) {
                db = $cordovaSQLite.openDB({ name: "my.db" }); //device
            }else{
                db = window.openDatabase("my.db", '1', 'my', 1024 * 1024 * 100); // browser
            }

this code snippet is key important because when running on browers using ‘ionic serve’, we use ‘window.openDatabase’ rather than native plugin.

ionic side menu left button and right button disappear

When doing Ionic project, one problem that sometime nav buttons for side menu will disappear, this is very annoying.

Here is sample code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ion-side-menu-content>
  <ion-nav-bar class="bar-positive">
 
    <ion-nav-buttons side="left">
      <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
      </button>
    </ion-nav-buttons>
 
    <ion-nav-buttons side="right">
      <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
      </button>
 
    </ion-nav-buttons>
  </ion-nav-bar>
 
  <ion-nav-view name="centre-panel"></ion-nav-view>
 
</ion-side-menu-content>

The solution is following: adding enable-menu-with-back-views=”true” to ion-side-menus

1
<ion-side-menus enable-menu-with-back-views="true">