2011-07-01 17 views
10

私はこれで検索しましたが、我々は我々はそのためのNode.jsの助けを取らなければならないangular.js枠組みcouchDBとangular.jsの接続方法は?

または

と直接のCouchDBを接続できるかどうか、適切な答えが得られませんでした。

答えて

7

angular.jsの経験はありませんが、Google Buzz exampleを見ると、JSONを提供するリソースに対処する方法があるようです。これはまさにCouchDBのものなので、node.jsを関与させる必要はないと思います。

すべてのCouchDBの機能は、HTTPリクエストを介してアクセスできるため、必要に応じてAJAX呼び出しを行うことで、適切に機能するはずです。 angular.service.$resourceは適切な候補に見えます。

3

Ashvin、これを尋ねてくれてありがとうございます。私もこの問題に苦しんでいます。

それは、このような完全なローカルホストのURLを使用するので、私はまだ、AngularJSからローカルのCouchDBを呼び出すために$リソースを使用する方法を考え出したていない:

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

とAngularJSのドキュメントと例のすべてがローカル表示さパス名。彼らは実際に別のWebサービスに手を差し伸べる方法を教えてくれない、または少なくとも私が助ける説明を見つけられていない:)

私は理解しやすいjQueryを使う方法がある。私はこのファイルをcouch.jsというファイルに配置して、犬、猫などのCouchDBに接続しました。実際のモジュール(「アプリ」)は、アプリ内の他の場所で定義されているので、私はちょうど「アプリ」という名前の変数に入れて、そのようなソファーコントローラを追加しました:?

(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がブラウザーでのローカルホストのセキュリティー問題を回避できるように、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> 

誰が引くこのjQUery.getJSONの方法を複製するために、いくつかの実際のAngularJS $リソースコードを投稿することができればデータをCouchDBからAngularJSアプリに変換すると、私はそれを感謝します。

1

おもしろいことに、couchdbへのクエリを含むページは、couchdb自体と同じアドレスとポートから提供される必要があります。これは、あなたのhtmlをcouchdbで提供するか、htmlとcouchdbをホスティングしているあなたのWebサーバーの両方にふさわしいプロキシをインストールすることで実現できます。

18

私はAnglerJSモジュールを作成しました。これは、AnglerJS $リソースをCouchDBに合わせて調整することで、 AngularJS $リソースのアプローチを改善しました。これはAngularJSの$ httpサービスに基づいています。私はその方法、特にアプリケーション固有のAngularJSコントローラで、すてきなクリーンなJavaScriptコードを作成しました。電話をかける

CornerCouch AngularJS Module

直接私の知る限りでは、3つのオプションを残します:

  • は、CouchDBのの添付ファイル(CouchAppのアプローチ)

  • 使用してAから直接HTMLアプリをロードしますJettyプロジェクト(Javaアプリケーションスタック)に含まれる透明なプロキシ

  • GET経由のアクセスo CouchDBサーバー上で有効にした後でJSONPを使用している場合

他のすべては、クロスサイトスクリプティングの制限を受けません。

+0

AngularJSが$ http.success()および$ http.errorのサポートを1.6+で削除したことで、これは最近停止しました。私は問題を提出しました。 –

0

私はAngongJSウェブサイトの例をmongolabの代わりにCouchDBを使用するように変更しました。ここにjsfiddle http://jsfiddle.net/WarwickGrigg/dCCQF/とgithubリポジトリhttps://github.com/telanova/angularjs-couchdbを参照してください。私は角度のある初心者です:私はそれが頭の$リソースの頭を得るために苦労を見つけましたが、それはうまくいくようです。

$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; 
}); 
関連する問題