Switching to object-based data storage can often be tough. If you’re trying to start Phonegap or Ionic Framework development and are coming from native development, the whole local storage concept can be a tough one to grasp. Or maybe you just prefer a structured query language (SQL) when working with your data.
Not to worry, because there is a plugin for that!
Making use of the Cordova SQLite plugin by Chris Brody, you can use a SQLite data source for managing your data in Android and iOS. Pair this with ngCordova and you can better compliment your Ionic Framework development with an AngularJS experience.
Like with all my tutorials, let’s start by creating a fresh Ionic project:
ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios
Remember, if you’re not on a Mac computer, you cannot add and build for the iOS platform.
The next thing we want to do is add the SQLite plugin. This can be done by running the following command:
cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin.git
Because this is an Ionic Framework article, we’re going to make use of ngCordova as it tends to make life pretty easy after including it.
Download the latest release and copy ng-cordova.min.js into your www/js directory.
With the library file included, we now need to include it in our project. Open your index.html file and add the following highlighted line:
html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="js/ng-cordova.min.js"></script> <script src="cordova.js"></script> <script src="js/app.js"></script> </head> <body ng-app="starter">
It is very important you add it above the cordova.js line otherwise it will not work.
One more thing must be added before we can start using ngCordova. We need to inject it into our angular.module, found in app.js, like the following:
angular.module(`starter`, [`ionic`, `ngCordova`])
It’s time to start using this library. For simplicity, we are going to do the following:
Create a new table called people
Insert two people into this new table
Select all the people found in our table with my last name
Before we start coding, it is very important to note that database activity can only be done when the onDeviceReady() method has fired. With this in mind, I’m going to open the database in the modules .run() method like so:
var db = null;
var example = angular.module(`starter`, [`ionic`, `ngCordova`])
.run(function($ionicPlatform, $cordovaSQLite) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
db = $cordovaSQLite.openDB({ name: "my.db" });
$cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS people (id integer primary key, firstname text, lastname text)");
});
});
Take a look at the lines that I highlighted. We want to have access to the database globally so I created a variable outside of any method or controller. To use the ngCordova functions we need to include $cordovaSQLite in the .run() method. Finally, you can see that I’ve created a new database called my.db and a fresh table called people.
This leaves us with a usable database ready for activity in our controllers. Take the following for example:
example.controller("ExampleController", function($scope, $cordovaSQLite) {
$scope.insert = function(firstname, lastname) {
var query = "INSERT INTO people (firstname, lastname) VALUES (?,?)";
$cordovaSQLite.execute(db, query, [firstname, lastname]).then(function(res) {
console.log("INSERT ID -> " + res.insertId);
}, function (err) {
console.error(err);
});
}
$scope.select = function(lastname) {
var query = "SELECT firstname, lastname FROM people WHERE lastname = ?";
$cordovaSQLite.execute(db, query, [lastname]).then(function(res) {
if(res.rows.length > 0) {
console.log("SELECTED -> " + res.rows.item(0).firstname + " " + res.rows.item(0).lastname);
} else {
console.log("No results found");
}
}, function (err) {
console.error(err);
});
}
});
I’ve gone ahead and created two very basic functions. The insert function will add a first and last name record into the database while the select function will find records by last name. Basic, but I hope you get the idea.
Something to note about my controller though. I am not doing these database calls from inside an onDeviceReady() function. Had these functions been fired when the controller loads, they probably would have failed. Since I am basing the database activity off button clicks, it is probably safe to assume the device and database is ready for use.
If you wish to delete any of your SQLite databases you can do so by including the following:
$cordovaSQLite.deleteDB("my.db");
There are plenty of other ngCordova and baseline SQLite commands that you can make use of. The plugin documentation is very thorough and worth a read.