web-dev-qa-db-ja.com

Angular JS：REST / CRUDバックエンドのGET / POST / DELETE / PUTクライアントの完全な例？

この記事の例に従ってREST/CRUDバックエンドを実装しました。 http://coenraets.org/blog/2012/10/creating-a-rest-api-using-node-js-express -and-mongodb / 。 MongoDBをローカルで実行していますが、MongoLabsを使用していません。

NgResourceとFactoryパターンを使用するGoogleチュートリアルに従い、クエリ（すべてのアイテムを取得）、アイテムの取得（GET）、アイテムの作成（POST）、アイテムの削除（DELETE）が機能しています。バックエンドAPIが望むようにPUTを実装するのが困難です-id（.../foo /）を含み、更新されたデータも含むURLへのPUTです。

サービスを定義する次のコードがあります。

angular.module('realmenServices', ['ngResource']).
    factory('RealMen', function($resource){
    return $resource('http://localhost\\:3000/realmen/:entryId', {}, {
      query: {method:'GET', params:{entryId:''}, isArray:true},
      post: {method:'POST'},
      update: {method:'PUT'},
      remove: {method:'DELETE'}
    });

このコントローラーコードからメソッドを呼び出します。

$scope.change = function() {
    RealMen.update({entryId: $scope.entryId}, function() {
            $location.path('/');
    });
}

しかし、更新関数を呼び出すと、URLにはID値が含まれません。「/ realmen/ID」ではなく、「/ realmen」のみです。

「RealMen.prototype.update」の追加を含むさまざまなソリューションを試しましたが、それでもentryIdを取得してURLに表示できません。 （また、DBフィールド値のみを保持するJSONを自分で構築する必要があるようです。新しいエントリを作成するときにPOST操作が自動的にそれを行いますが、単一のエントリを表示/編集しているときにフィールド値のみを含むデータ構造）。

4つの動詞すべてを予想されるRESTfulな方法で使用するクライアントアプリケーションの例はありますか？

また、Restangularおよび$ saveをオーバーライドする別のソリューションへの参照を見て、POSTまたはPUTを発行できるようにしました（ http://kirkbushell.me/angular-js-using- ng-resource-in-a-more-restful-manner / ）。このテクノロジーは急速に変化しているため、人々が例として使用できる優れた参照ソリューションはないようです。

restangularjs
57
PrestoJeff

私はRestangularの作成者です。

このCRUDの例を見て、必要なURL構成と$ resource構成をすべて使用せずに要素をPUT/POST/GETする方法を確認してください。それに加えて、設定なしでネストされたリソースを使用できます:)。

このplunkrの例をご覧ください：

http://plnkr.co/edit/d6yDka?p=preview

READMEを参照して、ここでドキュメントを確認することもできます https://github.com/mgonto/restangular

そこにない機能が必要な場合は、問題を作成してください。私はすべてのAngularJSプロジェクトにもこのライブラリを使用しているため、通常1週間以内に求められる機能を追加します:)

それが役に立てば幸い！

60
mgonto

updateはPUTメソッドを使用しているため、{entryId: $scope.entryId}はデータと見なされ、angularがPUTデータから生成されるようにするには、updateを定義するときにparams: {entryId: '@entryId'}を追加する必要があります。

return $resource('http://localhost\\:3000/realmen/:entryId', {}, {
  query: {method:'GET', params:{entryId:''}, isArray:true},
  post: {method:'POST'},
  update: {method:'PUT', params: {entryId: '@entryId'}},
  remove: {method:'DELETE'}
});

修正：更新行に閉じ中括弧がありませんでした。

34
Ye Liu

この方法で実装できます

$resource('http://localhost\\:3000/realmen/:entryId', {entryId: '@entryId'}, {
        UPDATE: {method: 'PUT', url: 'http://localhost\\:3000/realmen/:entryId' },
        ACTION: {method: 'PUT', url: 'http://localhost\\:3000/realmen/:entryId/action' }
    })

RealMen.query() //GET  /realmen/
RealMen.save({entryId: 1},{post data}) // POST /realmen/1
RealMen.delete({entryId: 1}) //DELETE /realmen/1

//any optional method
RealMen.UPDATE({entryId:1}, {post data}) // PUT /realmen/1

//query string
RealMen.query({name:'john'}) //GET /realmen?name=john

ドキュメント： https://docs.angularjs.org/api/ngResource/service/$resource

それが役に立てば幸い

9
user3618546