How to connect couchDB with angular.js?

Question

I have searched for this but did not get proper answer if we can connect couchDB directly with angular.js framework

or

We have to take help of node.js for that.

Answer 1

I've created an AngularJS module called CornerCouch that improves on the approach of the AngularJS $resource by tailoring it specifically for CouchDB. It is based on the $http service in AngularJS. I ended up with nice clean JavaScript code that way, especially in the app specific AngularJS controller.

CornerCouch AngularJS Module

Making the calls directly leaves three options, as far as I know:

• Load the html app directly from a CouchDB attachement (CouchApp approach)

• Use a transparent proxy as included in the Jetty project (Java app stack)

• Access via GET only, but using JSONP, after enabling it on the CouchDB server

Everything else does not get by cross-site scripting restrictions.

Answer 2

While I have no experience of angular.js, looking at the Google Buzz example it appears to have a way to deal with JSON-providing resources. Since this is exactly what CouchDB is, I don't think there is any need for node.js to be involved.

All CouchDB functionality can be accessed via HTTP requests, so it should fit right in, if necessary by doing AJAX calls. The angular.service.$resource looks to be the appropriate candidate.

Answer 3

Ashvin, thanks for asking this. I too struggle with this issue.

I have not yet figured out how to use $resource to call the local CouchDB from AngularJS, since it uses a full localhost URL like this:

http://localhost:5984/<dbname>/_all_docs

and all of the AngularJS docs and examples show local pathnames. They don't really tell one how to reach out to a separate web service, or at least I haven't found an explanation that helps :)

Here's a way to use jQuery that was easier for me to understand. I placed this in a file named couch.js - to connect to a CouchDB of our critters (dogs, cats, etc). The actual module ("app") is defined elsewhere in the app, so I just put it in a variable named "app" and added a Couch controller like so:

(function () {
    'use strict';
    var app = angular.module('app');
    app.controller('CouchCtrl', function ($scope,$http,$resource) {
        var all_critters = 'http://localhost:5984/critters/_all_docs?callback=?';
        $.getJSON(all_critters, function(json) {
            $scope.$apply(function(){
                $scope.all_critters = json;
            });
        });
        $scope.getAllCritters = function() {
            return $scope.all_critters;
        };
    });
}());

I added the ?callback=? for JSONP to avoid localhost security issues with the browsers while I worked locally, so I set JSONP = true in the CouchDB preferences.

In an html page, just look at the result of this call by putting crittersDB in a binding:

<ul ng-controller="CouchCtrl">
    <h5>Critters</h5>
    <p>There are currently {{all_critters.total_rows}} critters.</p>
    <li ng-repeat="(key,value) in all_critters">
        {{key}} - {{value}}
    </li>
</ul>

If anyone could post some actual AngularJS $resource code to replicate this jQUery.getJSON way of pulling data from CouchDB into an AngularJS app, I'd appreciate it.