Hello,
Here i am sharing an example of SQLite in Ionic Framework.
So, following are the commands to start a project in Ionic Framework-
The next thing we want to do is add the SQLite plugin. This can be done by running the following command:
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-
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:
It’s time to start using this library. For simplicity, we are going to do the following:
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:
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...
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...
