如何将couchDB与angular.js连接？

Question

我已经搜索过了，但没有得到准确的答案，是否可以直接将couchDB与angular.js框架连接起来。

或者

我们必须借助node.js来实现。

- Ashvin

Answer 1

我创建了一个名为CornerCouch的AngularJS模块，通过专门针对CouchDB进行优化，改进了AngularJS $resource的方法。它基于AngularJS中的$http服务。这样做可以得到漂亮、干净的JavaScript代码，特别是在应用程序特定的AngularJS控制器中。 CornerCouch AngularJS模块 直接调用有三个选项，据我所知：

• 从CouchDB附件直接加载html应用（CouchApp方法）
• 使用Jetty项目中包含的透明代理（Java应用程序堆栈）
• 仅使用GET访问，但在启用CouchDB服务器上的JSONP后使用

其他所有内容都无法通过跨站点脚本限制。

- eddelplus

---

最近AngularJS在1.6+版本中移除了对$http.success()和$http.error的支持，导致这个功能现在无法正常工作。我已经提交了一个问题报告。 - wu-lee

Answer 2

虽然我没有angular.js的经验，但看到Google Buzz example，它似乎有一种处理提供JSON资源的方式。由于这正是CouchDB的用途，我认为没有必要涉及node.js。

所有CouchDB功能都可以通过HTTP请求访问，因此如果需要，可以通过执行AJAX调用来实现。 angular.service.$resource看起来是合适的选择。

- Colin Ross

Answer 3

Ashvin，感谢您的提问。我也在这个问题上遇到了困难。

我还没有找到如何使用$resource从AngularJS调用本地CouchDB的方法，因为它使用类似于完整的localhost URL：

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

所有的AngularJS文档和示例都显示本地路径名。它们并没有真正告诉我们如何访问一个独立的Web服务，或者至少我没有找到一个有用的解释 :)

以下是一种使用jQuery更容易理解的方法。 我将其放在一个名为couch.js的文件中 - 以连接到我们的动物（狗，猫等）的CouchDB。 实际的模块（“app”）在应用程序的其他位置定义，因此我只是将其放在名为“app”的变量中，并添加了一个Couch控制器，如下所示：

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

我在本地工作时为了避免浏览器的本地安全问题，添加了JSONP的?callback=?，因此我在CouchDB首选项中设置了JSONP = true。

在html页面中，只需将crittersDB绑定到调用结果即可：

<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>

如果有人能够发布一些实际的AngularJS $resource代码来复制这种从CouchDB中提取数据到AngularJS应用程序的jQUery.getJSON方式，我会很感激。

- noogrub

Answer 4

诀窍在于包含对couchdb的查询的页面必须从与couchdb本身相同的地址和端口提供。这可以通过由couchdb提供html或安装代理来实现，代理将充当托盘，同时为托管html的Web服务器和couchdb提供服务。

- Davorin Ruševljan

Answer 5

我已经修改了 AngularJS 网站上的示例，使用 CouchDB 而不是 mongolab。请参见此处的 jsfiddle http://jsfiddle.net/WarwickGrigg/dCCQF/ 和此处的 Github 存储库 https://github.com/telanova/angularjs-couchdb。我是一个 Angular 新手：我发现 $resource 很难理解，但它似乎工作得很好。

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

- Warwick