Switching to object-based data storage can often is tough. If you ' re trying to start Phonegap or Ionic Framework development and is coming from native development, the whole local Storage concept can is 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 are 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 Withngcordova and you can better compliment your Ionic the 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 in a MAC computer, you cannot add and build for the IOS platform.
The next thing we want to does is add the SQLite plugin. This can is done by running the following command:
Cordova Plugin Add Https://github.com/brodysoft/Cordova-SQLitePlugin.git
Because This is a Ionic Framework article, we ' re going to make use of the Ngcordova as it tends to make life pretty easy afte R including it.
Download the latest release and copy ng-cordova.min.js into your Www/js directory.
With the library file included, we have need to include it in our project. Open your index.html file and add the following highlighted line:
<!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:
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("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:
1 example.controller("ExampleController", function($scope, $cordovaSQLite) {
2
3 $scope.insert = function(firstname, lastname) {
4 var query = "INSERT INTO people (firstname, lastname) VALUES (?,?)";
5 $cordovaSQLite.execute(db, query, [firstname, lastname]).then(function(res) {
6 console.log("INSERT ID -> " + res.insertId);
7 }, function (err) {
8 console.error(err);
9 });
10 }
11
12 $scope.select = function(lastname) {
13 var query = "SELECT firstname, lastname FROM people WHERE lastname = ?";
14 $cordovaSQLite.execute(db, query, [lastname]).then(function(res) {
15 if(res.rows.length > 0) {
16 console.log("SELECTED -> " + res.rows.item(0).firstname + " " + res.rows.item(0).lastname);
17 } else {
18 console.log("No results found");
19 }
20 }, function (err) {
21 console.error(err);
22 });
23 }
24
25 });
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:
1 $cordovaSQLite.deleteDB("my.db");
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
