Good morning everyone
I’m learning IONIC now and I have a problem. I am using Ionic V1.7.16
I am developing a test application that retrieves data from a local database (as I am using the browser to test, I use the WebSQL, but the application will use SQLite).
The app is very simple.
It creates the database structure and add 1 record.
When the person clicks the Login button, it takes you to another page and displays the page title Login that was automatically added to the database.
The problem is that sometimes shows login times not. (Click the Back button and then the Login again several times).
Looking on the console, every time that Page1 is loaded it prints the login, only on the screen not.
Could anyone help me with this issue?
Below is the code I used:
index.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 rel="manifest" href="manifest.json">
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<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="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-stable bar bar-dark">
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</body>
</html>
`
app.js
function localSQL(db, sql, dados) { db.transaction( function (tx) { tx.executeSql(sql, dados); } ); }
angular.module('starter', ['ionic'])
.run(function ($ionicPlatform, $rootScope) {
$ionicPlatform.ready(function () {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
$rootScope.db = null;
$rootScope.db = window.openDatabase("app_test.db", '1.0', 'app_test', 1024 * 1024 * 100);
localSQL($rootScope.db, 'DROP TABLE IF EXISTS tb_login', []);
localSQL($rootScope.db, 'CREATE TABLE IF NOT EXISTS tb_login (id_login INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ds_login NVARCHAR(50) NOT NULL DEFAULT "")', []);
localSQL($rootScope.db, 'INSERT INTO tb_login (ds_login) VALUES (?);', ['MY LOGIN']);
});
})
.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.views.transition('none');
$stateProvider
.state('page1', {
url: "/page1",
cache: false,
templateUrl: "page1.html",
controller: 'Page1Ctrl'
})
.state('login', {
url: "/login",
cache: false,
templateUrl: "login.html",
controller: 'LoginCtrl'
});
$urlRouterProvider.otherwise('/login');
})
.controller('LoginCtrl', function ($scope, $state) {
$scope.init = function () {};
$scope.login = function () {
$state.go("page1");
};
})
.controller('Page1Ctrl', function ($scope, $state, $rootScope) {
$scope.init = function () {
db = $rootScope.db;
db.transaction(
function (tx) {
tx.executeSql("SELECT ds_login FROM tb_login", [], function (tx, results) {
$scope.title = results.rows.item(0).ds_login;
console.log(results.rows.item(0).ds_login);
});
});
};
$scope.back = function () {
$state.go("login");
};
});
login.html
<ion-view view-title="Login Page" ng-init="init()">
<ion-content>
<button class="button" ng-click="login()">Login</button>
</ion-content>
</ion-view>
page1.html
<ion-view view-title={{title}} ng-init="init()">
<ion-content>
Test Page
<br /><br /><br />
<button class="button" ng-click="back()">Back</button>
</ion-content>
</ion-view>
Thank you and sorry for my english
Ronaldo Araujo