angularjs - example - sqlite in ionic 3

¿Cómo uso el servicio sqlite ngCordova y Cordova-SQLitePlugin con Ionic Framework?

Question

He estado tratando de incorporar sqlite en una aplicación jónica simple y este es el proceso que he estado siguiendo:

 ionic start myApp sidemenu

Luego instalo el plugin sqlite:

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

y ngCordova

bower install ngCordova

esto me dio las siguientes opciones: No se puede encontrar una versión adecuada para angular, elija una: 1) angular # 1.2.0 que se resolvió a 1.2.0 y es requerida por ngCordova # 0.1.4-alpha 2) angular #> = 1.0.8 que se resolvió a 1.2.0 y es requerido por angular-ui-router # 0.2.10 3) angular # 1.2.25 que se resolvió a 1.2.25 y es requerido por angular-animate # 1.2.25, desinfección angular # 1.2.25 4) angular # ~ 1.2.17, que se resolvió en 1.2.25 y es requerido por ionic # 1.0.0-beta.13. ¡Prepara la opción con! para persistir a bower.json

Escogí la opción 3) e incluí los scripts en el archivo de la siguiente manera:

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

Luego agregué un controlador a la vista de búsqueda:

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

Esto causó el error:

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

Luego intenté manualmente, incluyendo SQLitePlugin.js: copiando desde plugins / com.brodysoft.sqlitePlugin / www a main www / y agregándolo a la página index.html

Traté de incluir antes de todo:

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

Obtengo Error ReferenceError: cordova no está definido, por lo que luego intenté incluirlo después del script cordova.js, pero sigo obteniendo el mismo error.

Realmente agradecería la ayuda en caso de que sea relevante, estas son las versiones actuales de Cordova e ionic que estoy usando:

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

y este es el bower.json generado.

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

y mi paquete.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"
}
}

Answer 1

En Ionic 2, estoy usando el siguiente código.

constructor(platform: Platform) {
platform.ready().then(() => {
if(platform.is("cordova")){
//USE Device
}
else {
//USE Browser
}
StatusBar.styleDefault();
});

Answer 2

Resulta que es porque Cordova es específica de la plataforma y no funciona cuando ejecutas el ionic serve

Pude ejecutar el mismo código en un dispositivo Android sin ningún problema cuando construí e implementé.

Actualizar

puede reemplazar el complemento cordova con window para usar las bases de datos websql, por lo que en lugar de sqlitePlugin.openDatabase() puede usar window.openDatabase()

Answer 3

Si alguien todavía tiene un error al intentar ejecutarlo en un navegador, intente este:

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

Answer 4

Para versiones posteriores de Ionic (Ionic 2+) :

La mejor manera de manejar el almacenamiento persistente con Ionic es mediante ionic-storage .

Ionic Storage es un paquete creado y mantenido por el equipo de ionic para abstraer el desarrollo de los aspectos específicos de cada navegador o plataforma y utilizar automáticamente la mejor solución de almacenamiento disponible.

1. Instalación de dependencias

En su caso para SQLite, primero debe instalar las dependencias para Angular y Cordova:

npm install @ionic/storage --save

y

cordova plugin add cordova-sqlite-storage --save

Luego edite su declaración de NgModule en src/app/app.module.ts para agregar IonicStorageModule como una importación:

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. Inyectar almacenamiento en su componente

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. Almacenamiento de datos en SQLite

Siempre que acceda al almacenamiento, asegúrese de envolver su código de la siguiente manera:

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

3.1 Guardar un par clave-valor

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

3.2 Recuperando un valor

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

3.3 Eliminando un par clave-valor

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