CODEWITHSUNDEEP
angularjscouchdbcloudant
Gwen Wong
Gwen Wong

Reputation: 357

How do I connect to a Cloudant database through pure angularJS

I've been using JSON strings to store my data and was thinking of moving to Cloudant. I've been searching long and hard for a tutorial or example code of this but one doesn't seem to exist (there are one with Node + Angular which uses the RESTAPI, but I'm a beginner in NodeJS and can't see a way to attach it to AngularJS)

I currently use this code to connect to my local.json file

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("data.json")
    .success(function(response) {$scope.experience = response.experience;});
}

Can someone help me connect to a Cloudant database?

Upvotes: 2

Views: 990

Answers (3)

Gwen Wong
Gwen Wong

Reputation: 357

I've figured it out, finally. No idea how or why there is no clear documentation on what header values are needed at the start, figured I'd share what I found:

You first have to enable CORS settings through the cloudant website-- (Users > Cors > Enable cors) and then set withCredentials to true in your http request.

The full code to connect is available here: https://github.com/gweennnnn/cloudantangularconnect

Upvotes: 1

bradnoble
bradnoble

Reputation: 75

A few things you can try:

  1. API Keys https://docs.cloudant.com/authorization.html

After you've read up on Cloudant API Keys, try prepending your calls with one, like this:

https://<YOUR API KEY>:<YOUR API KEY PASSWORD>@<YOUR CLOUDANT USERNAME>.cloudant.com/<YOUR DATABASE NAME>

This will, obviously, not be good for the long term, b/c you'll have your creds in your client-side code, which anyone who views your Javascript can see.

You'll probably want to dig back into Node, to avoid this. Check out Cloudant's supported library for Node: https://github.com/cloudant/nodejs-cloudant

  1. Enable CORS in Cloudant https://docs.cloudant.com/cors.html

This will allow your client-side code running on, say, 127.0.0.1, to make Cloudant requests. (Make sure that everyone has _reader privileges.)

There are plenty of other things you can do, too, like creating proxies, but this should get you going.

Upvotes: 1

Chetna Warade
Chetna Warade

Reputation: 11

Based on your question found below links:

https://cloudant.com/blog/chaise-blog-building-a-diary-with-angular-js-grunt-js-and-cloudant/#.VjuuD6QT2ko this article has an example code on how to connect to cloudant by:

$http({
    url: [root, post._id].join('/')
  , method: 'PUT'
  , data: post
  })
  .success(function(data, status){
    post._rev = data.rev;
    $timeout(_autosave, 5000);
  })

Accessing the DB in Cloudant with Angular refers to a cloudant article which you can apply to angularjs https://cloudant.com/for-developers/crud/#browser-update

Upvotes: 1

Related Questions