{"id":384,"date":"2017-09-10T23:55:00","date_gmt":"2017-09-10T23:55:00","guid":{"rendered":"http:\/\/emacslisp.com\/?p=384"},"modified":"2017-09-10T23:55:53","modified_gmt":"2017-09-10T23:55:53","slug":"ionic-using-sqlite","status":"publish","type":"post","link":"http:\/\/emacslisp.com\/?p=384","title":{"rendered":"Ionic using Sqlite"},"content":{"rendered":"<p>Sqlite is better than &#8216;local storage&#8217; and &#8216;session&#8217; for complex data relationship on ionic\/cordova platform.<\/p>\n<p>Here is instruction on how to install<\/p>\n<p>1. create an empty ionic app<br \/>\n   $ ionic start myApp blank &#8211;type ionic1<\/p>\n<p>2. add Cordova for sqlite native plugin<br \/>\n   $ bower install ngCordova<br \/>\n   it will install &#8216;www\/lib\/ngCordova\/&#8217;.<\/p>\n<p>3. install sqlite native plugin<br \/>\n   $ ionic cordova plugin add cordova-sqlite-storage<br \/>\n   $ npm install &#8211;save @ionic-native\/sqlite<\/p>\n<p>4. in www\/index.html, add<br \/>\n   <script src=\"lib\/ngCordova\/dist\/ng-cordova.js\"><\/script><\/p>\n<p>5. in app.js make app.js looks like.<\/p>\n<pre lang=\"javascript\" line=\"1\">\r\nvar myApp = angular.module('starter', ['ionic','ngCordova'])\r\n\r\n    .run(function($ionicPlatform, $cordovaSQLite) {\r\n\r\n        $ionicPlatform.ready(function() {\r\n            if(window.cordova && window.cordova.plugins.Keyboard) {\r\n                \/\/ Hide the accessory bar by default (remove this to show the accessory bar above the keyboard\r\n                \/\/ for form inputs)\r\n                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);\r\n\r\n                \/\/ Don't remove this line unless you know what you are doing. It stops the viewport\r\n                \/\/ from snapping when text inputs are focused. Ionic handles this internally for\r\n                \/\/ a much nicer keyboard experience.\r\n                cordova.plugins.Keyboard.disableScroll(true);\r\n\r\n            }\r\n            if(window.StatusBar) {\r\n                StatusBar.styleDefault();\r\n            }\r\n\r\n            var db;\r\n            if (window.cordova) {\r\n                db = $cordovaSQLite.openDB({ name: \"my.db\" }); \/\/device\r\n            }else{\r\n                db = window.openDatabase(\"my.db\", '1', 'my', 1024 * 1024 * 100); \/\/ browser\r\n            }\r\n            $cordovaSQLite.execute(db,\"create table if not exists people(id integer primary key, firstname text, lastname text)\");\r\n            \/\/$cordovaSQLite.deleteDB(\"my.db\");  \r\n            \r\n        });\r\n    })\r\n\r\n\r\n<\/pre>\n<p>Key Important code:<\/p>\n<pre lang=\"javascript\" line=\"1\">\r\n            if (window.cordova) {\r\n                db = $cordovaSQLite.openDB({ name: \"my.db\" }); \/\/device\r\n            }else{\r\n                db = window.openDatabase(\"my.db\", '1', 'my', 1024 * 1024 * 100); \/\/ browser\r\n            }\r\n<\/pre>\n<p>this code snippet is key important because when running on browers using &#8216;ionic serve&#8217;, we use &#8216;window.openDatabase&#8217; rather than native plugin.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sqlite is better than &#8216;local storage&#8217; and &#8216;session&#8217; 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 &#8211;type ionic1 2. add Cordova for sqlite native plugin $ bower install ngCordova it will install &#8216;www\/lib\/ngCordova\/&#8217;. 3. install sqlite native plugin [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"class_list":["post-384","post","type-post","status-publish","format-standard","hentry","category-ionic"],"_links":{"self":[{"href":"http:\/\/emacslisp.com\/index.php?rest_route=\/wp\/v2\/posts\/384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/emacslisp.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/emacslisp.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/emacslisp.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/emacslisp.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=384"}],"version-history":[{"count":2,"href":"http:\/\/emacslisp.com\/index.php?rest_route=\/wp\/v2\/posts\/384\/revisions"}],"predecessor-version":[{"id":386,"href":"http:\/\/emacslisp.com\/index.php?rest_route=\/wp\/v2\/posts\/384\/revisions\/386"}],"wp:attachment":[{"href":"http:\/\/emacslisp.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/emacslisp.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=384"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/emacslisp.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}