Usare PouchDB in Angular

Mattepuffo's logo
Usare PouchDB in Angular

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!


Condividi

Commentami!