在看一篇文章,《Use SQLite Instead of Local Storage In Ionic Framework》,觉得挺好,因为之后开发可能需要用到,所以顺便翻译一下,记录下来以后使用。
首先创建我们的ionic项目:
ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios//苹果机上添加
如果你不是在苹果机上,那么就不用add ios了。
接下来在命令行上输入以下命令下载我们的sqlite插件
cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin.git
下载了最新的ng-cordova js到你项目的www/js目录后,我们要在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">
<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>
<body ng-app="starter">
cordova.js是非常重要的,如果你不引入他,那么就不生效了。
另外,我们要在app.js上添加以下代码
angular.module('starter', ['ionic', 'ngCordova'])
现在是时候使用进入主题了。怎么用我们刚刚下载的插件
首先我们在sqlite上建立一个people表,然后随便插入两条数据
在我们开始写代码前,我们需要注意一下操作数据库需要在系统ondeviceready()方法执行后才能执行。
在知道这个后,我们在run()方法添加以下代码:
<span style="font-family:MicrosoftYaHei, 微软雅黑, Arial, Tahoma, Helvetica, Georgia, sans-serif, STXihei, åŽæ–‡é»‘体, Hei, Hiragino Kaku Gothic Pro;">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({ name: "my.db" });
$cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS people (id integer primary key, firstname text, lastname text)");
});
});</span>
因为代码很长,所以我建立了一个外部变量在方法外用ngcordova的方法,我们需要include “$cordovaSQLite” 在run()方法里。最后,你能看见我新建了一个叫my.db的数据库和一个新的叫people的表。
这样就可以让我们有一个可用的数据库了。
example.controller("ExampleController", function($scope, $cordovaSQLite) {
$scope.insert = function(firstname, lastname) {
var query = "INSERT INTO people (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 people 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);
});
}
});
在上面我创建了两个基本的方法。insert和select方法。其他的希望你能参照他自己想出来。
如果你想删除数据库,可以用以下语句:
$cordovaSQLite.deleteDB("my.db");