Comment utiliser le service ngcordova sqlite et le Cordova-SQLitePlugin avec cadre ionique?
j'ai essayé d'incorporer sqlite dans une simple application ionique et c'est le processus que j'ai suivi:
ionic start myApp sidemenu
puis 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 angulaire, veuillez en choisir une: 1) angulaire # 1.2.0 qui a résolu à 1.2.0 et est requis par ngCordova#0.1.4-alpha 2) Nbre angulaire > = 1,0,8 qui se résout à 1,2,0 et est requis par angular-ui-router#0.2.10 3) angulaire#1.2.25 qui a décidé de s'1.2.25 et est requis par angulaires-animer#1.2.25, angulaire-assainir#1.2.25 4) angulaire#~1.2.17 qui a résolu à 1.2.25 et est requis par le#ionique 1.0.0-beta.13préfix le choix avec ! pour persister dans la charmille.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 alors 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);
});
};
})
ce l'origine de 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é manuellement en incluant le SQLitePlugin.par js: la copie à partir de plugins / com.brodysoft.sqlitePlugin / www principal www/ et l'ajouter à l'index.page html
j'ai essayé y compris 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 l'Erreur ReferenceError: cordova n'est pas défini j'ai donc essayé de l'inclure après le cordova.js script, mais encore obtenir la même erreur
apprécierais vraiment l'aider dans le cas où il est pertinent, ce sont les versions actuelles de Cordoue et ionique j'utilise:
ionic --version 1.2.5
cordova --version 3.5.0-0.2.7
et c'est la puissance générée.json
{
"name": "myApp",
"private": "true",
"devDependencies": {
"ionic": "driftyco/ionic-bower#1.0.0-beta.13"
}
}
et mon colis.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"
}
}
4 réponses
Si quelqu'un l'a encore eu une erreur lorsque vous essayez d'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
}
il S'avère donc que C'est parce que Cordova est spécifique à la plate-forme et ne fonctionne pas quand vous courez ionic serve
j'ai été capable d'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 une fenêtre pour utiliser les bases de données websql
ainsi, au lieu de sqlitePlugin.openDatabase() vous pouvez utiliser window.openDatabase()
Ionique Dans les 2, je suis en utilisant le code suivant.
constructor(platform: Platform) {
platform.ready().then(() => {
if(platform.is("cordova")){
//USE Device
}
else {
//USE Browser
}
StatusBar.styleDefault();
});
Pour plus tard Ionique versions des ions (2+):
la meilleure façon de gérer le stockage persistant avec ionique est d'utiliser ionique de stockage.
le stockage ionique est un paquet créé et maintenu par l'équipe ionique pour abstraire le développement des spécificités de chaque navigateur ou plate-forme et utiliser automatiquement la meilleure solution de stockage disponible.
1. Installer Des Dépendances
dans votre cas pour SQLite vous devez d'abord installer les dépendances pour Angular et Cordova:
npm install @ionic/storage --save
et
cordova plugin add cordova-sqlite-storage --save
puis éditez votre déclaration NgModule dans src/app/app.module.ts ajouter IonicStorageModule comme import:
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 de données dans SQLite
chaque fois que vous accédez au stockage, assurez-vous de toujours envelopper votre code dans ce qui suit:
storage.ready().then(() => { /* code here safely */});
3.1 sauvegarde d'une paire de clés
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 clé-valeur
storage.ready().then(() => {
storage.remove('key').then((key: string) => { /* do something after deletion */})
});