Как использовать службу sqgite ngCordova и Cordova-SQLitePlugin с Ionic Framework?

Я пытаюсь внедрить sqlite в простое приложение Ionic, и это тот процесс, который я выполнял:

 ionic start myApp sidemenu

Затем я устанавливаю плагин sqlite:

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

и 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 -анимация # 1.2.25, angular -sanitize # 1.2.25 4) angular # ~ 1.2.17, которая была решена до 1.2.25 и требуется ионным # 1.0.0-beta.13Prefix выбор с! чтобы сохранить его на 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, по: копирование из плагинов /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>

Я получаю Error ReferenceError: cordova не определен поэтому я тогда попытался включить его после cordova.js script, но все равно получить ту же ошибку

действительно понравится помощь в случае, если это актуально, это текущие версии Кордовы и ионных я использую:

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

и мой пакет .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"
  }
}

Ответ 1

Если у кого-то еще есть ошибка при попытке запустить его в браузере, попробуйте следующее:

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

Ответ 2

Итак, выясняется, что это связано с тем, что Cordova является специфичной для платформы и не работает при запуске ionic serve

Я смог запустить один и тот же код на устройстве Android без проблем при создании и развертывании.

Update

вы можете заменить плагин cordova на окно, чтобы использовать базы данных websql поэтому вместо sqlitePlugin.openDatabase() вы можете использовать window.openDatabase()

Ответ 3

В Ionic 2 я использую следующий код.

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



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



  StatusBar.styleDefault();
});

Ответ 4

Для более поздних ионных версий (Ionic 2+):

Лучший способ обработки постоянного хранилища с помощью Ionic использует ionic-storage.

Ionic Storage - это пакет, созданный и поддерживаемый ионной командой для абстрактного развития, с учетом особенностей каждого браузера или платформы и автоматического использования лучшего доступного решения для хранения.

1. Установка зависимостей

В вашем случае для SQLite вам нужно сначала установить зависимости для Angular и Cordova:

npm install @ionic/storage --save

и

cordova plugin add cordova-sqlite-storage --save

Затем отредактируйте объявление NgModule в src/app/app.module.ts, чтобы добавить 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 */})
});