如何将 couchDB 与 angular.js 连接起来？答案

【问题标题】：How to connect couchDB with angular.js?如何将 couchDB 与 angular.js 连接起来？
【发布时间】：2011-07-01 13:51:36
【问题描述】：

我已经搜索过了，但如果我们可以将 couchDB 直接与 angular.js 框架连接，则没有得到正确的答案

或

为此我们必须借助 node.js。

【问题讨论】：

标签： javascript angularjs couchdb

【解决方案1】：

我创建了一个名为 CornerCouch 的 AngularJS 模块，它改进了通过专门为 CouchDB 定制 AngularJS $resource。它基于 AngularJS 中的 $http 服务。通过这种方式，我最终得到了干净整洁的 JavaScript 代码，尤其是在应用程序特定的 AngularJS 控制器中。

CornerCouch AngularJS Module

据我所知，直接拨打电话会留下三个选项：

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

其他一切都不受跨站点脚本限制。

【讨论】：

由于 AngularJS 在 1.6+ 中删除了对 $http.success() 和 $http.error 的支持，这最近停止了工作。我已经提交了一个问题。

【解决方案2】：

虽然我没有使用 angular.js 的经验，但查看 Google Buzz example 似乎有办法处理提供 JSON 的资源。由于这正是 CouchDB 的本质，我认为不需要涉及 node.js。

所有 CouchDB 功能都可以通过 HTTP 请求访问，因此它应该适合，如有必要，通过执行 AJAX 调用。 angular.service.$resource 看起来是合适的候选人。

【讨论】：

【解决方案3】：

Ashvin，感谢您提出这个问题。这个问题我也很纠结。

我还没有弄清楚如何使用 $resource 从 AngularJS 调用本地 CouchDB，因为它使用完整的 localhost URL，如下所示：

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

所有 AngularJS 文档和示例都显示了本地路径名。他们并没有真正告诉人们如何使用单独的网络服务，或者至少我还没有找到有帮助的解释:)

这是一种使用 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;
        };
    });
}());

我添加了 ?callback=?为了让 JSONP 在我本地工作时避免浏览器出现 localhost 安全问题，所以我在 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 代码来复制这种 jQUery.getJSON 将数据从 CouchDB 提取到 AngularJS 应用程序的方式，我将不胜感激。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

我已经修改了 AngularJS 网站上的示例以使用 CouchDB 而不是 mongolab。请参阅此处的 jsfiddle http://jsfiddle.net/WarwickGrigg/dCCQF/ 和此处的 github 存储库 https://github.com/telanova/angularjs-couchdb。我是一个有棱有角的新手：我发现自己很难理解 $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;
});

【讨论】：