Hello,
Here i am sharing an example of SQLite in Ionic Framework.
So, following are the commands to start a project in Ionic Framework-
ionic start IonicSqliteProject blank
cd IonicSqliteProject
ionic platform add android
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
Download the latest release and copy
ng-cordova.min.js into your
www/js directory.
Then include that
ng-cordova.min.js file in your
index.html file , your index.html file look like-
<!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>
Here i am only showing the
head section of
index.html file, rest will same.
One more thing must be added before we can start using ngCordova. We
need to inject it into our angular.module, that is 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 demo
- 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("my.db");
$cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS demo (id integer primary key, firstname text, lastname text)");
});
});
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
demo.
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 demo (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 demo 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); });
}
});
Here i have 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.
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.
Thanks...
