web-dev-qa-db-fra.com

Comment utiliser le service sqlite ngCordova et le Cordova-SQLitePlugin avec Ionic Framework?

J'ai essayé d'incorporer sqlite dans une simple application Ionic et c'est le processus que j'ai suivi:

 ionic start myApp sidemenu

Ensuite, j'installe le plugin sqlite:

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

et ngCordova

bower install ngCordova

cela m'a donné les options suivantes: Impossible de trouver une version appropriée pour angulaire, veuillez en choisir une: 1) angulaire # 1.2.0 qui a résolu en 1.2.0 et est requis par ngCordova # 0.1.4-alpha 2) angulaire #> = 1.0.8 qui a résolu en 1.2.0 et est requis par angular-ui-router # 0.2.10 3) angulaire # 1.2.25 qui a résolu en 1.2.25 et est requis par angular-animate # 1.2.25, angular-sanitize # 1.2.25 4) angulaire # ~ 1.2.17 qui s'est résolu à 1.2.25 et est requis par ionique # 1.0.0-beta.13Préfixez le choix avec! le persister à bower.json

J'ai choisi l'option 3) et j'ai inclus les scripts dans le fichier comme suit:

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

J'ai ensuite ajouté un contrôleur à la vue de recherche:

.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);
          });
     };
})

Cela a provoqué l'erreur:

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

Ensuite, j'ai essayé d'inclure manuellement le SQLitePlugin.js en: copiant depuis plugins/com.brodysoft.sqlitePlugin/www vers le principal - www/ et l'ajout à la page index.html

J'ai essayé d'inclure avant tout:

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

J'obtiens une erreur ReferenceError: cordova n'est pas défini j'ai donc essayé de l'inclure après le script cordova.js mais j'obtiens toujours la même erreur

apprécierait vraiment l'aide si elle est pertinente, ce sont les versions actuelles de Cordova et ionic J'utilise:

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

et ceci est le bower.json généré

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

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

Si quelqu'un a toujours une erreur en essayant de l'exécuter dans un navigateur, essayez celui-ci:

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

Il s'avère donc que c'est parce que Cordova est spécifique à la plate-forme et ne fonctionne pas lorsque vous exécutez ionic serve

J'ai pu exécuter le même code sur un appareil Android sans problème lorsque j'ai construit et déployé.

Mise à jour

vous pouvez remplacer le plugin cordova par window pour utiliser les bases de données websql donc au lieu de sqlitePlugin.openDatabase() vous pouvez utiliser window.openDatabase()

9
jonnie

Pour plus tard Ionic versions (Ionic 2 +):

La meilleure façon de gérer le stockage persistant avec Ionic utilise ionic-storage .

Ionic Storage est un package créé et maintenu par l'équipe ionic pour extraire le développement des spécificités de chaque navigateur ou plate-forme et utiliser automatiquement la meilleure solution de stockage disponible.


1. Installation de dépendances

Dans votre cas pour SQLite, vous devez d'abord installer les dépendances pour les deux Angular et Cordova:

npm install @ionic/storage --save

et

cordova plugin add cordova-sqlite-storage --save

Modifiez ensuite votre déclaration NgModule dans src/app/app.module.ts pour ajouter IonicStorageModule en tant qu'importation:

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. Injectez du stockage dans votre composant

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. Stockage des données dans SQLite

Chaque fois que vous accédez au stockage, assurez-vous de toujours envelopper votre code dans les éléments suivants:

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

3.1 Sauvegarde d'une paire valeur/clé

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

3.2 Récupération d'une valeur

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

3.3 Suppression d'une paire valeur/clé

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

Dans Ionic 2, j'utilise le code suivant.

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



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



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