web-dev-qa-db-ja.com

ngCordova s​​qliteサービスとCordova-SQLitePluginをIonic Frameworkと一緒に使用するにはどうすればよいですか？

私はsqliteを単純なIonicアプリに組み込むことを試みてきました。これは私が従っているプロセスです：

 ionic start myApp sidemenu

次に、sqliteプラグインをインストールします。

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

およびngCordova

bower install ngCordova

これは私に次のオプションを与えました：角度に適したバージョンを見つけることができません、1つを選択してください：1）1.2.0に解決され、ngCordova＃0.1.4-alphaで必要とされるangular＃1.2.0 2）angle＃> = 1.2.0に解決され、angular-ui-router＃0.2.10で必要とされる1.0.8 ＃1.2.25 4）1.2.25に解決され、ionic＃1.0.0-beta.13で必要となるang​​le＃〜1.2.17 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)

次に、plugins/com.brodysoft.sqlitePlugin/wwwからmainにコピーして、SQLitePlugin.jsを手動でインクルードしようとしました- 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 is not definedが表示されるため、cordova.jsスクリプトの後にそれを含めようとしましたが、それでも同じエラーが発生します

それが関連する場合の助けを本当に感謝します、これらはCordovaの現在のバージョンであり、ionic私は使用しています：

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"
  }
}
angularjssqlitecordovaionic-framework
19
jonnie

ブラウザで実行しようとしたときにまだエラーが発生する場合は、これを試してください。

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

だから、Cordovaはプラットフォーム固有であり、_ionic serve_を実行すると動作しないためであることが判明しました

Androidデバイスで同じコードを実行できました。ビルドしてデプロイしたときに問題はありませんでした。

更新

cordovaプラグインをウィンドウに置き換えてwebsqlデータベースを使用できるため、sqlitePlugin.openDatabase()の代わりにwindow.openDatabase()を使用できます

9
jonnie

後でIonicバージョン（Ionic 2 +）：

Ionicを使用して永続ストレージを処理する最良の方法は、 ionic-storage 。を使用することです

Ionic Storageは、ionicチームが各ブラウザまたはプラットフォームの詳細から開発を抽象化し、利用可能な最適なストレージソリューションを自動的に使用するために作成および保守するパッケージです。


1.依存関係のインストール

SQLiteの場合、最初にAngularとCordovaの両方の依存関係をインストールする必要があります。

npm install @ionic/storage --save

そして

cordova plugin add cordova-sqlite-storage --save

次に、src/app/app.module.tsのNgModule宣言を編集して、インポートとしてIonicStorageModuleを追加します。

import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  declarations: [...],
  imports: [
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot({
      name: '__mydb',
      driverOrder: ['indexeddb', 'sqlite', 'websql'],
    })
  ],
  bootstrap: [...],
  entryComponents: [...],
  providers: [...],
})
export class AppModule { }


2.コンポーネントにストレージを挿入します

import { Component } from '@angular/core';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public storage: Storage) {}
}


3. SQLiteでのデータの保存

ストレージにアクセスするときは、必ず次のコードを必ずラップしてください。

storage.ready().then(() => { /* code here safely */});

3.1キーと値のペアを保存する

storage.ready().then(() => {
    storage.set('some key', 'some value');
});

3.2値の取得

storage.ready().then(() => {
  storage.get('age').then((val: string) => {
      console.log('Your age is', val);
  });
});

3.3キーと値のペアの削除

storage.ready().then(() => {
    storage.remove('key').then((key: string) => { /* do something after deletion */})
});
1
maninak

Ionic 2では、次のコードを使用しています。

constructor(platform: Platform) {
platform.ready().then(() => {



  if(platform.is("cordova")){
    //USE Device
  }
  else {
    //USE Browser
  }



  StatusBar.styleDefault();
});
1
Luis Antonio Pestana