Syncing Data with PouchDB and Cloudant in Ionic 2

tutorials
1

I just released a new tutorial I thought some people here might be interested in (especially the Ionic 2 people). It covers how to set up PouchDB in an Ionic 2 application and how to get the data syncing to a remote backend with Cloudant:

2 Likes
2

Hey there,

nice tutorial but i have a littel suggestion --> you can simplify your dependency injection in angular 2:

constructor(@Inject(Data) dataService) {
    this.dataService = dataService;

to something like this:

constructor(private dataService: Data) {
}

I wrote some tutorials for the german angularjs community angularjs.de this is a little pizza service app:
https://github.com/angularjs-de/angular2-pizza-service

Maybe this helps

3

Hey,

That’s how I have been injecting up until recently, but in the latest Ionic 2 beta the default template + generate commands use the @Inject syntax, whereas before they used the method you posted above - any idea on why the change was made to the CLI? I pretty much figured I’d just follow suit.

4

Ah okay. I am not so deep in ionic 2, yet… I am waiting until angular 2 is in the stage to use without bugs and laggs^^.

I thought the simplest way is to use the approach i posted, but it does the same.

There was something like an evolution of dependency injection from a really low-level usage to the way you/i did it.

The “Inject()” writing is maybe a little bit more unique, because you get the information --> okay this is a dependency injection instead of a custom constructor parameter.

5

Thank you very much for this very useful tutorial.

1 Like
6

Yeah this was my thinking as well, although something like:

constructor(dataService: data)

is cleaner and nicer to type, at least the @Inject syntax makes it clear that something is being “injected” which I think could be helpful for beginners. Still not sure on the dev teams reasoning for the change in preference though so would be interesting to hear.

7

Hi,

I was wondering if anyone could retry this tutorial in the current Ionic v2 build?

I get Error during evaluation of “click” in the Chrome console.

In the CLI, I get “Unexpected token (9:16) while parsing file: /…/home.js” which equates to the line being discussed above:

constructor(@Inject(Data) dataService)

I’ve also tried constructor(private dataService: Data)

I’d really like to incorporate pouchdb (or any NoSQL db), but I’ve been struggling to do so.

Any help would be greatly appreciated!

Thanks,
Ryan

8

If you’re using ES6 then change to:

static get parameters(){
    return [[Data]];
}

constructor(dataService){
    //etc.
}
9

Thanks, Josh!!

By the way, please keep your articles coming! I’ve read all your Ionic 2 articles; I got your “shhh” code as well. Your style is clear, and you’ve got the best articles on the topic.

Ryan

1 Like
10

Hey, Did anyone do the tutorial in Typescript ?? I’m having this error In the chrome browser
data.ts:7Uncaught TypeError: this.require is not a function

I’m pretty sure it has to do with this.
this.PouchDB = this.require('pouchdb');

11

Hi, I try to get Josh’s example app cloudant working, but I continue to run in a number of problems (file:data.js).

  • import {Storage, SqlStorage} from ionic-angular.
    Error message: index has no exported member Storage, SqlStorage. I checked the file (in node-modules) but could not find storage-related exports

  • var PouchDB = require(‘pouchdb’); [ts]: cannot find “require”

Any suggestions/code that fixes the problem? The PouchDB-CouchDB function is an essential part of the app, and after a few days (also tried pouchdb-couchdb cloudo example, and could not get that going either)

thanks,

Andreas

12

That tutorial needs to be updated, so there’s probably a few things wrong with it, but to address the specific points you raised:

  • You should now use import { Storage } from '@ionic/storage' and the way you have to use it is a bit different now, so you may want to look that up

  • Use import PouchDB from 'pouchdb'; instead

1 Like
13

@apheiner I agree with joshmorony , This question also came up on stack overflow which I might have something to do with some of your issues