如何在 Ionic 框架中使用 ngCordova s​​qlite 服务和 Cordova-SQLitePlugin? [英] How do I use the ngCordova sqlite service and the Cordova-SQLitePlugin with Ionic Framework?

问题描述

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

I have been trying to incorperate sqlite into a simple Ionic app and this is the process I have been following:

 ionic start myApp sidemenu

然后我安装sqlite插件:

Then I install the sqlite plugin:

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

和 ngCordova

and ngCordova

bower install ngCordova

这给了我以下选项:无法找到适合 angular 的版本，请选择一个:1) angular#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 需要3) angular#1.2.25 解析为 1.2.25 并且是 angular-animate#1.2.25、angular-sanitize#1.2.25 所需要的4) angular#~1.2.17 解析为 1.2.25 并且是 ionic#1.0.0-beta.13 需要的前缀选择！将其持久化到 bower.json

this gave me the following options: Unable to find a suitable version for angular, please choose one: 1) angular#1.2.0 which resolved to 1.2.0 and is required by ngCordova#0.1.4-alpha 2) angular#>= 1.0.8 which resolved to 1.2.0 and is required by angular-ui-router#0.2.10 3) angular#1.2.25 which resolved to 1.2.25 and is required by angular-animate#1.2.25, angular-sanitize#1.2.25 4) angular#~1.2.17 which resolved to 1.2.25 and is required by ionic#1.0.0-beta.13Prefix the choice with ! to persist it to bower.json

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

I picked option 3) and I included the scripts in the file as follows:

<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>

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

I then added a controller to the search view:

.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/ 并将其添加到索引中.html页面

Next I tried manually including the SQLitePlugin.js by: copying from plugins/com.brodysoft.sqlitePlugin/www to main www/ and adding it to the index.html page

我尝试在一切之前包括:

I tried including before everything:

 <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脚本之后包含它，但仍然得到相同的错误

I get Error ReferenceError: cordova is not defined so I then tried including it after the cordova.js script but still get the same error

非常感谢您的帮助如果相关，这些是我正在使用的 Cordova 和 ionic 的当前版本:

would really appreciate the help in case it is relevant, these are the current versions of Cordova and ionic I am using:

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

这是生成的 bower.json

and this is the generated bower.json

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

和我的 package.json:

and my 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"
  }
}

推荐答案

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

If someone still got an error when trying to run it in a browser, try this one:

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

这篇关于如何在 Ionic 框架中使用 ngCordova s​​qlite 服务和 Cordova-SQLitePlugin?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！