Usare PouchDB in Angular
PouchDB è un database NoSQL per browser compatibile con Javascript.
Può anche essere usato come interfaccia a CouchDB, o in modalità standalone (cosa che faremo noi).
E' compatibile anche con Typescript, e quindi usabile anche in Angular; oggi vediamo come fare.
Prima di tutto installiamo la libreria nel progetto:
npm install pouchdb @types/pouchdb
Poi dobbiamo modificare la configurazione nel tsconfig.json:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2017",
"module": "es2020",
"lib": [
"es2018",
"dom"
],
"allowSyntheticDefaultImports": true --> AGGIUNGERE
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
Ho indicato la riga da aggiungere.
Poi aggiungete questa riga in fondo al file src/polyfills.ts:
(window as any).global = window;
Adesso possiamo usare la libreria nel nostro componente:
import {Component, OnInit} from '@angular/core';
import PouchDB from 'pouchdb';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
db: any;
constructor() {
this.db = new PouchDB('test');
}
ngOnInit(): void {
this.db.info().then((info: any) => {
console.log(info);
});
this.add();
this.get();
}
add(): void {
const data = {
"_id": Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5),
"name": "mattepuffo",
"hobbies": [
"clmbing",
"it"
]
};
this.db.put(data);
}
public get(): void {
this.db.allDocs({include_docs: true}).then((docs: any) => {
console.log(docs);
});
}
}
Per evitare duplicazioni ad ogni avvio, l'_id lo genero random; giusto per fare qualche test di esempio.
Enjoy!
javascript typescript angular nosql pouchdb couchdb
Commentami!