CODEWITHSUNDEEP
angularcouchdbpouchdbcloudantangular-cli
Rodrigo Rubio
Rodrigo Rubio

Reputation: 1760

angular 2 pouchdb and cloudant (couchdb) - how to

Been trying to find examples of pouchdb/cloudant for angular2 latest stable release. Though there are plenty of posting about ionic2, there are none for vanilla angular2.

How to set up the final release of angular 2 with pouchdb, cloudant/couchdb?

Upvotes: 0

Views: 2240

Answers (1)

Rodrigo Rubio
Rodrigo Rubio

Reputation: 1760

I began by reading a post by Josh Morony which really helped! (thank you Josh great post!). My setup was for cloudant though it should be the same for couchdb.

Let me summarise what i did for my vanilla angular 2 set up, feel free to refer to Josh's post too for a detailed description of the points below. I'm assuming you already have a cloudant account and a database created (if not, you might want to start there).

  1. npm install pouchdb --save
  2. npm install -g typings
  3. typings install --global --save dt~pouchdb dt~pouchdb-adapter-websql dt~pouchdb-browser dt~pouchdb-core dt~pouchdb-http dt~pouchdb-mapreduce dt~pouchdb-node dt~pouchdb-replication

NOTE: under cloudant make sure you enable CORS for your database API.

After installing all of the above, we'll need to change a few files (see below):

  1. angular-cli.json - modify your "packages" array to reflect the following:

    "packages": [
{
  "PouchDB": {
    "main": "pouchdb.js",
    "defaultExtension": "js"
  }
}]

  2. Create a new "service" for example "dataService" (I used angular-cli), you can copy paste. They key here is to "require(pouchdb)" and thus making it accessible to your other components via importing.

    import { Injectable } from '@angular/core';
var PouchDB = require('pouchdb');

@Injectable()
export class DataService {

  db: any;
  username: any;
  password: any;
  remote: any;
  data: any;

  constructor() {
    this.db = new PouchDB('YOUR_DATABASE');
    this.username = 'DATABASE_KEY';
    this.password = 'YOUR_PASSWORD';

    this.remote = 'https://YOU_ACCOUNT_NAME.cloudant.com/YOUR_DATABASE';

    let options = {
      live: true,
      retry: true,
      continuous: true,
      auth: {
        username: this.username,
        password: this.password
      }
    };

    this.db.sync(this.remote, options);

  }

  // other CRUD functions below...
}

  3. app.module.ts - import your new "DataService" and add it to "providers".

  4. Now you're ready to start playing. Under your home page component for example, import the "DataService" and start calling your CRUD functions e.g. getDocuments, AddDocument etc..

NOTE: if you're going to be testing your API via postman (for example), make sure you enter your cloudant/couchdb login/password under "Authorisation". Otherwise, you'll experience permission reading errors.

Demo app: https://github.com/rrubio/Angular2PouchDdCloudant

Upvotes: 2

Related Questions