Làm thế nào để kết nối couchDB với angular.js?

Question

Tôi đã tìm kiếm này, nhưng đã không nhận được câu trả lời thích hợp nếu chúng tôi có thể kết nối trực tiếp với CouchDB angular.js khuôn khổ

hoặc

Chúng ta phải có sự giúp đỡ của Node.js cho điều đó.

Answer 1

Mặc dù tôi không có kinh nghiệm về angular.js, nhìn vào Google Buzz example dường như có cách để giải quyết các tài nguyên cung cấp JSON. Vì đây là chính xác những gì CouchDB là, tôi không nghĩ rằng có bất kỳ nhu cầu cho node.js được tham gia.

Tất cả chức năng CouchDB có thể được truy cập thông qua các yêu cầu HTTP, do đó, nó phải phù hợp ngay trong, nếu cần thiết bằng cách thực hiện các cuộc gọi AJAX. angular.service.$resource có vẻ là ứng viên phù hợp.

Answer 2

Ashvin, cảm ơn vì đã hỏi điều này. Tôi quá đấu tranh với vấn đề này.

Tôi vẫn chưa tìm ra cách để sử dụng $ tài nguyên để gọi CouchDB địa phương từ AngularJS, vì nó sử dụng một URL localhost đầy đủ như thế này:

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

và tất cả các AngularJS tài liệu và các ví dụ hiển thị địa phương tên đường dẫn. Họ không thực sự nói một cách để tiếp cận với một dịch vụ web riêng biệt, hoặc ít nhất tôi đã không tìm thấy một lời giải thích giúp :)

Đây là cách để sử dụng jQuery dễ hiểu hơn. Tôi đã đặt nó vào một tệp có tên là couch.js - để kết nối với CouchDB của các sinh vật của chúng ta (chó, mèo, v.v.). Các module thực tế ("ứng dụng") được định nghĩa ở đâu đó trong ứng dụng, vì vậy tôi chỉ cần đặt nó trong một biến có tên là "ứng dụng" và nói thêm một điều khiển Couch như vậy:

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

tôi đã thêm các callback =? cho JSONP để tránh các vấn đề bảo mật cục bộ với các trình duyệt trong khi tôi làm việc cục bộ, vì vậy tôi đặt JSONP = true trong các tùy chọn CouchDB.

Trong một trang html, chỉ cần nhìn vào kết quả của cuộc gọi này bằng cách đặt crittersDB trong một ràng buộc:

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

Nếu bất cứ ai có thể gửi một số mã AngularJS $ tài nguyên thực tế để tái tạo theo cách này jQUery.getJSON kéo dữ liệu từ CouchDB vào một ứng dụng AngularJS, tôi sẽ đánh giá cao nó.

Answer 3

Bí quyết là trang của bạn bao gồm các truy vấn đến couchdb phải được phân phát từ cùng một địa chỉ và cổng giống như chính couchdb. Điều này có thể được thực hiện bằng cách phục vụ html của bạn bởi couchdb, hoặc bằng cách cài đặt một proxy sẽ hoạt động như ô cho cả máy chủ web của bạn lưu trữ html và couchdb.

Answer 4

Tôi đã tạo ra một mô-đun AngularJS được gọi là CornerCouch cải thiện cách tiếp cận của tài nguyên AngularJS $ bằng cách điều chỉnh nó đặc biệt cho CouchDB. Nó dựa trên dịch vụ $ http trong AngularJS. Tôi đã kết thúc với mã JavaScript sạch đẹp theo cách đó, đặc biệt là trong bộ điều khiển AngularJS cụ thể của ứng dụng.

CornerCouch AngularJS Module

Làm cho các cuộc gọi trực tiếp lá ba lựa chọn, như xa như tôi biết:

• Tải ứng dụng html trực tiếp từ một attachement CouchDB (CouchApp cách tiếp cận)

• Dùng proxy trong suốt như được bao gồm trong dự án Jetty (ngăn xếp ứng dụng Java)

• Truy cập thông qua GET o nly, nhưng bằng cách sử dụng JSONP, sau khi bật nó trên máy chủ CouchDB

Mọi thứ khác không nhận được do giới hạn tập lệnh chéo trang.

Answer 5

Tôi đã sửa đổi ví dụ trên trang web AngularJS để sử dụng CouchDB thay vì mongolab. Xem jsfiddle tại đây http://jsfiddle.net/WarwickGrigg/dCCQF/ và kho lưu trữ github tại đây https://github.com/telanova/angularjs-couchdb. Tôi là một newbie góc cạnh: Tôi thấy nó là một cuộc đấu tranh để có được đầu của tôi quanh tài nguyên $, nhưng nó có vẻ hoạt động tốt.

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