javascript 如何将 couchDB 与 angular.js 连接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6548864/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to connect couchDB with angular.js?
提问by Ashvin
I have searched for this but did not get proper answer if we can connect couchDB directly with angular.js framework
我已经搜索过这个，但如果我们可以将 couchDB 直接与 angular.js 框架连接，则没有得到正确的答案
or
或者
We have to take help of node.js for that.
为此，我们必须借助 node.js。
采纳答案by Colin Ross
While I have no experience of angular.js, looking at the Google Buzz exampleit 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.
虽然我没有使用 angular.js 的经验，但查看Google Buzz 示例似乎有办法处理提供 JSON 的资源。由于这正是 CouchDB 的作用，我认为没有必要涉及 node.js。
All CouchDB functionality can be accessed via HTTP requests, so it should fit right in, if necessary by doing AJAX calls. The angular.service.$resourcelooks to be the appropriate candidate.
所有 CouchDB 功能都可以通过 HTTP 请求访问，因此它应该适合，如有必要，通过执行 AJAX 调用。该angular.service。$资源看起来是合适的人选。
回答by eddelplus
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 模块，它通过专门为 CouchDB 量身定制它改进了 AngularJS $resource 的方法。它基于 AngularJS 中的 $http 服务。我以这种方式结束了漂亮干净的 JavaScript 代码，尤其是在特定于应用程序的 AngularJS 控制器中。
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
直接从 CouchDB 附件加载 html 应用程序（CouchApp 方法）
使用 Jetty 项目（Java 应用程序堆栈）中包含的透明代理
仅通过 GET 访问，但使用 JSONP，在 CouchDB 服务器上启用它后
Everything else does not get by cross-site scripting restrictions.
其他一切都不会受到跨站点脚本限制的影响。
回答by noogrub
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:
我还没有弄清楚如何使用 $resource 从 AngularJS 调用本地 CouchDB，因为它使用了一个完整的 localhost URL，如下所示：
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 :)
并且所有 AngularJS 文档和示例都显示本地路径名。他们并没有真正告诉一个人如何联系一个单独的网络服务，或者至少我没有找到一个有帮助的解释:)
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:
这是一种使用 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;
};
});
}());
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.
我添加了 ?callback=? JSONP 以避免在我本地工作时浏览器的本地主机安全问题，因此我在 CouchDB 首选项中设置 JSONP = true。
In an html page, just look at the result of this call by putting crittersDB in a binding:
在 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>
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.
如果有人可以发布一些实际的 AngularJS $resource 代码来复制这种将数据从 CouchDB 提取到 AngularJS 应用程序的 jQUery.getJSON 方式，我将不胜感激。
回答by Davorin Ru?evljan
The trick is that your page that includes queries to the couchdb must be served from the same address and port as couchdb itself. This can be accomplished by serving your html by couchdb, or by installing a proxy that would act as umbrella for both your web server hosting the html and couchdb.
诀窍是，包含对 couchdb 的查询的页面必须从与 couchdb 本身相同的地址和端口提供服务。这可以通过通过 couchdb 为您的 html 提供服务来实现，或者通过安装一个代理来充当托管 html 和 couchdb 的 Web 服务器的保护伞。
回答by Warwick
I've modified the example on the AngularJS website to use CouchDB instead of mongolab. See the jsfiddle here http://jsfiddle.net/WarwickGrigg/dCCQF/and github repository here https://github.com/telanova/angularjs-couchdb. I'm an angular newbie: I found it a struggle to get my head round $resource, but it seems to work well.
我已经修改了 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;
});
