如何在Ionic Framework中使用ngCordova s​​qlite服务和Cordova-SQLitePlugin？

Question

我一直在尝试将sqlite合并到一个简单的Ionic应用程序中,这是我一直关注的过程:

 ionic start myApp sidemenu

然后我安装sqlite插件:

ionic plugin add https://github.com/brodysoft/Cordova-SQLitePlugin

和ngCordova

bower install ngCordova

这给了我以下选项:无法为角度找到合适的版本,请选择一个:1)角度#1.2.0,解析为1.2.0并且是ngCordova#0.1.4-alpha要求2)angular#> = 1.0.8解析为1.2.0并且是angular-ui-router#0.2.10要求的角度#1.2.25,其分辨率为1.2.25并且是角度动画#1.2.25,angular-sanitize所需要的#1.2.25 4)角度#~1.2.17,分辨率为1.2.25并且是离子#1.0.0-beta.13所需的选择!把它坚持到bower.json

我选择了选项3),我将脚本包含在文件中,如下所示:

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>

然后我在搜索视图中添加了一个控制器:

.controller('SearchCtrl', function ($scope, $cordovaSQLite){
  console.log('Test');
   var db = $cordovaSQLite.openDB({ name: "my.db" });

        // for opening a background db:
        var db = $cordovaSQLite.openDB({ name: "my.db", bgType: 1 });

        $scope.execute = function() {
          console.log('Test');
          var query = "INSERT INTO test_table (data, data_num) VALUES (?,?)";
          $cordovaSQLite.execute(db, query, ["test", 100]).then(function(res) {
            console.log("insertId: " + res.insertId);
          }, function (err) {
            console.error(err);
          });
     };
})

这导致了错误:

> TypeError: Cannot read property 'openDatabase' of undefined
>     at Object.openDB  (http://localhost:8100/lib/ngCordova/dist/ng-cordova.js:2467:36) 

接下来我尝试手动包括SQLitePlugin.js:从plugins/com.brodysoft.sqlitePlugin/www复制到主www /并将其添加到index.html页面

我尝试过包括一切:

 <script src="SQLitePlugin.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>

我得到错误ReferenceError:cordova没有定义, 所以我尝试在cordova.js脚本之后包含它但仍然得到相同的错误

非常感谢帮助,如果它是相关的,这些是当前版本的Cordova和离子我正在使用:

ionic --version  1.2.5
cordova --version 3.5.0-0.2.7

这是生成的bower.json

{
  "name": "myApp",
  "private": "true",
  "devDependencies": {
    "ionic": "driftyco/ionic-bower#1.0.0-beta.13"
  }
}

和我的package.json:

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "myApp: An Ionic project",
  "dependencies": {
    "gulp": "^3.5.6",
    "gulp-sass": "^0.7.1",
    "gulp-concat": "^2.2.0",
    "gulp-minify-css": "^0.3.0",
    "gulp-rename": "^1.2.0"
  },
  "devDependencies": {
    "bower": "^1.3.3",
    "gulp-util": "^2.2.14",
    "shelljs": "^0.3.0"
  }
}

Answer 1

如果有人在尝试在浏览器中运行时仍然出错,请尝试以下方法:

if (window.cordova) {
      db = $cordovaSQLite.openDB({ name: "my.db" }); //device
    }else{
      db = window.openDatabase("my.db", '1', 'my', 1024 * 1024 * 100); // browser
    }

Answer 2

事实证明,这是因为Cordova是特定于平台的,并且在您运行时不起作用 ionic serve

当我构建和部署时,我能够在Android设备上运行相同的代码而没有问题.

更新

你可以用窗口替换cordova插件来使用websql数据库,而不是sqlitePlugin.openDatabase()你可以使用window.openDatabase()