Hi all,
I am newbie to ionic application. I’m using ionic V1.
I wish to create an simple application which interacts with sqlite db for details.
Initial page is a login page. Login button is not triggering.
Following is the code which i have tried so far;
index.html
var db=null;
var example=angular.module(‘starter’, [‘ionic’, ‘ngCordova’]);
example.run(function($ionicPlatform,$cordovaSQLite) {
$ionicPlatform.ready(function() {
// if (cordova.platformId === “ios” && window.cordova && window.cordova.plugins.Keyboard) {
if (window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
db = $cordovaSQLite.openDB("Application.db");
$cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS Login(id integer primary key, UserName text,Password text)");
});
})
example.controller(‘ExampleController’,function($scope,$cordovaSQLite,$state){
$scope.addInfo=function(){
var query = “INSERT INTO Login (UserName, Password) VALUES (?,?)”;
$cordovaSQLite.execute(db,query,[$scope.UserName,$scope.Password]);
}
})
The issue are
login button click is not triggering from login.html, but it is triggered from index.html
I have created db in app.js… Insert statement is not working, if it is in index.html.
Is it possible to see dynamically created db. Please provide me default path of db?
Please provide me some reference to interact with db using ionic and angularjs
You seem to have used ExampleController as your script for Login html. Have you included this in your index? also to answer your last question, I doubt you can see your database file. There is a parameter in the sqlite plugin where you can mention the location of the db ex: location: ‘default’.
var mDb=null;
var IonicShowcase_App = angular.module('IonicShowcase', ['ionic', 'ngCordova'/*, 'ngMap'*/])
IonicShowcase_App.run(function($ionicPlatform,$cordovaSQLite,$ionicPopup ) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
mDb = window.sqlitePlugin.openDatabase({name: DB_NAME, location: 'default'});
mDb.executeSql(QUERY_CREATE_TABLE, [], function(rs) {
console.log('TABLE CREATED-' + rs.rows.item(0).mycount);
}, function(error) {
console.log('ERROR IN CREATING TABLE-' + error.message);
});
mDb.close(function () {
console.log("DB CLOSED");
}, function (error) {
console.log("ERROR IN CLOSING DB-" + error.message);
});
if (window.Connection) {
if (navigator.connection.type == Connection.NONE) {
$ionicPopup.confirm({
title: "Internet Disconnected",
content: "The internet is disconnected on your device."
})
.then(function(result) {
if (!result) {
ionic.Platform.exitApp();
}
});
}
}
});
})
"You seem to have used ExampleController as your script for Login html. Have you included this in your index? "
But I have defined “ExampleController” inside app.js file
var IonicShowcase_App = angular.module(‘IonicShowcase’, [‘ionic’, ‘ngCordova’/, ‘ngMap’/])
In the above statement you have mention IonicShowCase. Which part does it refers?
<!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/ionic_showcase_style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!--<script src="http://maps.google.com/maps/api/js"></script>-->
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="lib/cryptojs-aes.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/sha256.js"></script>
<!-- your app's js -->
<script src="IonicShowcase/ionic_showcase_app.js"></script>
<script src="IonicShowcase/ionic_showcase_route.js"></script>
<script src="IonicShowcase/ionic_showcase_services.js"></script>
<script src="IonicShowcase/controllers/LoginController.js"></script>
<script src="IonicShowcase/controllers/DashboardController.js"></script>
<script src="IonicShowcase/controllers/SqliteController.js"></script>
<script src="constants/strings.js"></script>
</head>
<body ng-app="IonicShowcase">
<ion-nav-view>
</ion-nav-view>
</body>
</html>
The controller is referencing to the one mentioned in index.html ie IonicShowcase under body tag. So you can see here that your src consists of /ionic_showcase_app.js (ie app.js), SqliteController.js all defined inside the index.html.
Can you please show me your app.js and your controller? Observe my app.js file. There is a variable IonicShowcase_App which is being referenced in the controllers.
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
mDB=window.sqlitePlugin.openDatabase({name:'ionicdb',location:'default'});
var QUERY_CREATE_TABLE='CREATE TABLE IF NOT EXISTS UserDetails (UserName text,Password text)';
mDB.executeSql(QUERY_CREATE_TABLE,[],function(rs){
console.log('TABLE CREATED-' + rs.rows.item(0).mycount);
},function(error){
console.log('ERROR IN CREATING TABLE-' + error.message);
});
mDB.close(function(){
console.log("DB Closed");
},function(error){
console.log("Error in closing db-"+error.message)
});
if(window.Connection){
if(navigator.connection.type==connection.NONE){
$ionicPopup.confirm({
title: "Internet Disconnected",
content: "The internet is disconnected on your device."
})
.then(function(result){
if(!result){
ionic.platform.exitApp();
}
});
}
}
