我使用了用于Ionic Framework的cordovaSQLite插件编写了一个基本的笔记应用程序。 Notes将写入设备上创建的SQLite数据库并从中删除。 Notes从数据库读入数组并呈现为列表项。
该应用程序在Genymotion模拟器上完美运行，但不在我的Android设备上（LeTv - Le1s） 没有任何注释在设备上是持久的，在设备上重新启动应用程序时不会呈现任何数据。它虽然在模拟器中运行良好。
如果有帮助，这是来自chrome：// inspect /＃devices的控制台日志，我在设备上运行应用程序时用来查看控制台。
OPEN database: notesDB SQLitePlugin.js:175
(3) new transaction is waiting for open operation SQLitePlugin.js:106
DB opened: notesDB SQLitePlugin.js:80
app.js：
var notesDB;
angular.module('app', ['ionic', 'ngCordova'])
.run(function($ionicPlatform, $cordovaSQLite) {
$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();
}
});
})
.controller( 'MainCtrl', function($scope, $ionicPlatform, $cordovaSQLite, $ionicPopup, $ionicListDelegate) {
var query = '';
$scope.listCanSwipe = true
//Initialize db, called on ng-init to make sure nothing happens until db conn is successful
$scope.initDB =function() {
$ionicPlatform.ready(function() {
try {
//Open DB connection
notesDB = $cordovaSQLite.openDB({ name: 'notesDB', location: 'default' });
alert("DB INIT SUCCESS " + notesDB);
//Create table if not created already
query = "CREATE TABLE IF NOT EXISTS notestable (content varchar(500);"
$cordovaSQLite.execute(notesDB, query).then( alert('table create/check created SUCCESS') );
loadFromDB();
} catch(err) { alert(err); }
});
}
// is only called initially on opening of the app
function loadFromDB() {
//Initialize empty array to reload notes everytime.
$scope.notes = [];
//load everything from table into $scope.notes
query = "SELECT * FROM notestable";
$cordovaSQLite.execute(notesDB, query).then( function(res) {
for(var i=0; i<res.rows.length; i++) {
$scope.notes.push( {'content': res.rows.item(i).content } );
}
// alert("Loaded into $scope.notes arr, reflect in frontend : " + $scope.notes.length);
});
}
//click event handler for new note button
$scope.newNote = function() {
//Initialize popup - prompt and it's data
$scope.newNoteBody = {};
var reasonPopup = $ionicPopup.prompt({
title: 'New Note',
template: '<input type="text" ng-model="newNoteBody.content">',
scope: $scope,
buttons: [
{ text: 'Cancel',
onTap: function(e) {
$scope.newNoteBody= {};
return;
}
},
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
//if blank field + save button, do nothing, close prompt
if ( ! $scope.newNoteBody.content) {
//e.preventDefault(); nothing happens when field empty and save button
return;
}
//else save to db
else {
//alert($scope.newNoteBody.content);
query = 'INSERT INTO notestable VALUES(?)';
$cordovaSQLite.execute(notesDB, query, [$scope.newNoteBody.content]).then( $scope.notes.push( {'content': $scope.newNoteBody.content } ) );
//removed loadFromDB() from here as well to prevent refreshing when adding, instead, the new note is saved to the db
// and then pushed into the array, therefore no need of emptying $scope.notes, pulling * from DB and then reloading $scope.notes
//no page refresh, smooth transition
}
}
}
]
});
}
$scope.deleteNote = function(item) {
//alert('delete note , item content=' + item.content);
query = 'DELETE FROM notestable WHERE content = (?);';
//added then and commented loadFromDb() call becuase it is causing refreshing
$cordovaSQLite.execute(notesDB, query, [item.content]).then( $scope.notes.splice($scope.notes.indexOf(item), 1) );
$ionicListDelegate.closeOptionButtons();
// loadFromDB();
}
} )
的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 href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/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>
<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="app" ng-controller="MainCtrl">
<ion-header-bar class="bar-stable">
<h1 class="title">My notes</h1>
<button class="button button-positive" ng-click="newNote()">New note</button>
</ion-header-bar>
<div class="has-header" ng-init="initDB()">
<ion-list class="has-header padding" can-swipe="listCanSwipe">
<ion-item ng-repeat="note in notes">
<button class="button">{{note.content}}</button>
<ion-option-button class="button-danger" ng-click="deleteNote(note)">
Delete
</ion-option-button>
</ion-item>
</ion-list>
</div>
</body>
</html>