Comment connecter couchDB avec angular.js ?

Question

J'ai fait des recherches à ce sujet mais je n'ai pas obtenu de réponse appropriée si nous pouvons connecter couchDB directement avec le framework angular.js.

ou

Pour cela, nous devons utiliser node.js.

Answer 1

J'ai créé un module AngularJS appelé CornerCouch qui améliore l'approche de l'application AngularJS $resource en l'adaptant spécifiquement à CouchDB. Il est basé sur le service $http d'AngularJS. Je me suis retrouvé avec un code JavaScript propre de cette façon, en particulier dans le contrôleur AngularJS spécifique à l'application.

CornerCouch Module AngularJS

Le fait de passer les appels directement laisse trois options, pour autant que je sache :

• Charger l'application html directement à partir d'un attachement CouchDB (approche CouchApp)

• Utiliser un proxy transparent tel qu'il est inclus dans le projet Jetty (pile d'applications Java)

• Accès via GET uniquement, mais en utilisant JSONP, après l'avoir activé sur le serveur CouchDB

Tout le reste n'échappe pas aux restrictions relatives aux scripts intersites.

Answer 2

Bien que je n'aie aucune expérience d'angular.js, en regardant la page d'accueil de Exemple de Google Buzz il semble avoir un moyen de traiter les ressources fournissant du JSON. Puisque c'est exactement ce qu'est CouchDB, je ne pense pas qu'il y ait besoin d'impliquer node.js.

Toutes les fonctionnalités de CouchDB sont accessibles via des requêtes HTTP, elles devraient donc s'intégrer parfaitement, si nécessaire en effectuant des appels AJAX. Les fonctionnalités de CouchDB sont accessibles via des requêtes HTTP. angular.service.$resource semble être le candidat approprié.

Answer 3

Ashvin, merci de poser cette question. Je suis moi aussi confronté à ce problème.

Je n'ai pas encore trouvé comment utiliser $resource pour appeler la CouchDB locale depuis AngularJS, puisqu'elle utilise une URL locale complète comme celle-ci :

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

et tous les documents et exemples d'AngularJS montrent des noms de chemin locaux. Ils ne disent pas vraiment comment atteindre un service web séparé, ou du moins je n'ai pas trouvé d'explication qui aide :)

Voici une façon d'utiliser jQuery qui m'a semblé plus facile à comprendre. J'ai placé ceci dans un fichier nommé couch.js - pour se connecter à une CouchDB de nos animaux (chiens, chats, etc). Le module ("app") est défini ailleurs dans l'application, je l'ai donc placé dans une variable nommée "app" et j'ai ajouté un contrôleur Couch comme ceci :

(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;
        };
    });
}());

J'ai ajouté le ?callback= ? pour JSONP afin d'éviter les problèmes de sécurité avec les navigateurs lorsque je travaillais localement, et j'ai donc défini JSONP = true dans les préférences de CouchDB.

Dans une page html, il suffit de regarder le résultat de cet appel en plaçant crittersDB dans un 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>

Si quelqu'un peut poster un code $resource AngularJS réel pour reproduire cette façon jQUery.getJSON d'extraire des données de CouchDB dans une application AngularJS, je l'apprécierais.

Answer 4

L'astuce est que votre page qui inclut des requêtes vers couchdb doit être servie à partir de la même adresse et du même port que couchdb lui-même. Cela peut être réalisé en servant votre html par couchdb, ou en installant un proxy qui agira comme un parapluie pour votre serveur web hébergeant le html et couchdb.

Answer 5

J'ai modifié l'exemple sur le site AngularJS pour utiliser CouchDB au lieu de mongolab. Voir le jsfiddle ici http://jsfiddle.net/WarwickGrigg/dCCQF/ et le dépôt github ici https://github.com/telanova/angularjs-couchdb . Je suis un novice en matière d'angular : J'ai eu du mal à comprendre $resource, mais cela semble bien fonctionner.

$scope.projects = ProjectCouch.get({q:'_all_docs', include_docs: 'true', limit: 10});

angular.module('CouchDB', ['ngResource']).
    factory('ProjectCouch', function($resource) {
        var ProjectCouch = $resource(':protocol//:server/:db/:q/:r/:s/:t',
                                     {protocol: 'http:', server: 'localhost:5984', db:'projects'}, {update: {method:'PUT'}   
                           }
   ); 

   ProjectCouch.prototype.update = function(cb) {
    return ProjectCouch.update({q: this._id},
        this, cb);
  };

  ProjectCouch.prototype.destroy = function(cb) {
      return ProjectCouch.remove({q: this._id, rev: this._rev}, cb);
  };

  return ProjectCouch;
});