![](/img/trans.png)
[英]How to connect javascript/angular.js game board to firebase database
[英]How to connect couchDB with angular.js?
我已經搜索過了,但如果我們可以直接將 couchDB 與 angular.js 框架連接,我沒有得到正確的答案
或者
為此,我們必須借助 node.js。
我創建了一個名為 CornerCouch 的 Z5129F9F9F4810757F6F0CF735675EB0541Z 模塊,它通過專門為 CouchDB 定制它改進了 AngularJS $resource 的方法。 它基於 AngularJS 中的 $http 服務。 我最終得到了干凈整潔的 JavaScript 代碼,尤其是在應用程序特定的 AngularJS controller 中。
據我所知,直接撥打電話會留下三個選擇:
直接從 CouchDB 附件加載 html 應用程序(CouchApp 方法)
使用 Jetty 項目(Java 應用程序堆棧)中包含的透明代理
在 CouchDB 服務器上啟用后,僅通過 GET 訪問,但使用 JSONP
其他一切都不受跨站點腳本限制。
雖然我沒有 angular.js 的經驗,但看看Google Buzz 示例,它似乎有辦法處理提供 JSON 的資源。 由於這正是 CouchDB 的本質,我認為沒有必要讓 node.js 參與其中。
所有 CouchDB 功能都可以通過 HTTP 請求訪問,因此它應該適合,如有必要,通過執行 AJAX 調用。 angular.service.$resource看起來是合適的候選者。
阿什文,謝謝你問這個。 我也在這個問題上掙扎。
我還沒有弄清楚如何使用 $resource 從 AngularJS 調用本地 CouchDB,因為它使用完整的本地主機 URL,如下所示:
http://localhost:5984/<dbname>/_all_docs
並且所有 AngularJS 文檔和示例都顯示了本地路徑名。 他們並沒有真正告訴人們如何聯系單獨的 web 服務,或者至少我沒有找到有幫助的解釋:)
這是一種使用 jQuery 的方法,我更容易理解。 我將它放在一個名為 couch.js 的文件中 - 以連接到我們的小動物(狗、貓等)的 CouchDB。 實際的模塊(“app”)在應用程序的其他地方定義,所以我只是把它放在一個名為“app”的變量中,並添加了一個 Couch controller,如下所示:
(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 $ 資源代碼來復制此 jQUery.getJSON 方法,將數據從 CouchDB 提取到 AngularJS 應用程序中,我將不勝感激。
訣竅是您的頁面包含對 couchdb 的查詢必須從與 couchdb 本身相同的地址和端口提供服務。 這可以通過 couchdb 為您的 html 提供服務來實現,或者通過安裝一個代理來充當托管 html 和 couchdb 的 web 服務器的保護傘。
我已經修改了 AngularJS 網站上的示例以使用 CouchDB 而不是 mongolab。 請參閱此處的jsfiddle http://jsfiddle.net/WarwickGrigg/dCCQF/和 github 存儲庫此處https-couchdb /github.com 我是一個 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;
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.