web-dev-qa-db-ja.com

AngularJS：REST Resources（ORM-Style）にマップするオブジェクトの作成

私はAngularJSを初めて使用しますが、サーバーのREST Apiバックエンドにどのように結び付けるかについてはかなり不明です。

たとえば、GET-ingで取得する「イメージ」リソースがあるとします：myApi/image/1 /。これは、さまざまなフィールドを持つjsonオブジェクトを返します。次のように言いましょう：

{url: "some/url", date_created: 1235845}

今、私はこの「画像」オブジェクトのAngularJSアプリで何らかの表現が必要です。この表現は、フィールドの単なるマッピングではありません。たとえば、date_create人間が読める形式のフィールド。

$ resourceサービスについては知っていますが、Angularでリソースを使用してJSONオブジェクトを取得し、さまざまなヘルパー関数を追加してそれを強化する基本的な「クラス」を作成するために何をする必要があるかわかりません。

ボーナスポイント：

また、モデル間に「関係」を追加する方法も不明です。たとえば、「イメージ」リソースを内部に組み込んだ「ユーザー」リソースがあり、そのユーザーリソースを取得したいが、「イメージ」部分の「イメージ」ヘルパー関数を呼び出すことができるモデル。

javascriptweb-applicationsormangularjs
64
Edan Maor

JSData
角度データとして開始されたプロジェクトは、現在「使いやすさと安心感のために構築されたフレームワークに依存しないデータストア」です。優れたドキュメントがあり、関係、複数のバックエンド（http、localStorage、firebase）、検証、そしてもちろんangular統合をサポートしています。
http://www.js-data.io/

BreezeJS
AngularJS YouTubeチャンネル 機能 this 動画を使用した BreezeJS

これは高度なORMであり、クライアント側のフィルタリングやその他の優れた機能もサポートしています。 OData をサポートするバックエンドに最適ですが、他のタイプのバックエンドで動作するようにすることもできます。

ngResource
別のオプションは、 ngResource を使用することです。これは、独自の関数で拡張する方法の例です。

module.factory('Task', function ($resource) {
    var Task = $resource(WEBROOT + 'api/tasks/:id', {id: '@id'}, {update: { method: 'PUT'}});
    angular.extend(Task.prototype, {

        anExampleMethod: function () {
            return 4;
        },

        /**
         * Backbone-style save() that inserts or updated the record based on the presence of an id.
         */
        save: function (values) {
            if (values) {
                angular.extend(this, values);
            }
            if (this.id) {
                return this.$update();
            }
            return this.$save();
        }
    });
    return Task;
});

NgResourceは、Backbone.Modelと比較しても非常に制限されていることがわかりました。

  • Model.parseによるカスタムJSON解析
  • BaseModelを拡張できます（ngResourceにbaseUrlはありません）
  • LocalStorageなどを有効にするBackbone.syncなどの他のフック.

長方形
「REST API RESTfulリソースを適切かつ簡単に処理するためのAngularJSサービス」
http://ngmodules.org/modules/restangular

または他のORMのいくつかを試してください
クライアント側のJavaScript ORMで利用可能なオプションは何ですか？

80
Bob Fanger

私はRestangularの作成者なので、私の意見に偏りが生じます。

しかし、Bobが言ったように、Restangularを使用できます。

Restangularは、Restful APIリソースを使用してツリーを調べます。これに新しいメソッドを追加することもできます。

これはコーディング例です： https://github.com/mgonto/restangular#lets-code

この方法で、オブジェクトに新しいメソッドを追加できます（ボーナスポイント:)） https://github.com/mgonto/restangular#creating-new-restangular-methods

これがあなたのためにうまくいくことを願っています:)。

そうでない場合は、これにngResource（$ resource）を使用することもできますが、私の意見では、「愛」と「砂糖」が必要です。

ベスト

15
mgonto

単純な相互作用には、Angular-Resource（ http://docs.angularjs.org/api/ngResource 。$ resource）を使用できます。これは、単純なREST =インタラクション（ダウンロードするには http://code.angularjs.org/1.0.6/ にアクセスしてください）

残念なことに、angularリソースを使用する場合にのみ制御が制限されます。さらに高度なものについては、Angularjs $ httpサービスに基づいて独自のサービスを作成する必要があります- http：// docs。 angularjs.org/api/ng .$http。

お役に立てば幸いです。

7
Guy Nesher

多くの調査の後、利用可能なすべてのソリューションの包括的なリストを以下に示します。

正直なところ、私はあまり幸せではなかったので、リストに自分のソリューションを追加することにしました。こちらをご覧ください： $ modelFactory 。

最終結果のコードは次のようになります。

var module = angular.module('services.Zoo', ['modelFactory']);

module.factory('AnimalModel', function($modelFactory){
  return $modelFactory('api/Zoo');
});

return module;

主にモデル定義がAngularのngResourceによく似ており、不足している必要な低レベルの機能を追加するだけなので、これは他のソリューションよりも優れたソリューションだと思います。超軽量（1.45k gzip/min）で、わずかな依存関係しかありません（lodash、jqueryなどはありません）。

5
amcdnl

ModelCore（ https://github.com/klederson/ModelCore ）はほぼこのように機能し、非常に簡単に実装できます。

var ExampleApp = angular.module('ExampleApp', ['ModelCore']); //injecting ModelCore

ExampleApp.factory("Users",function(ModelCore) {
  return ModelCore.instance({
    $type : "Users", //Define the Object type
    $pkField : "idUser", //Define the Object primary key
    $settings : {
      urls : {
        base : "http://myapi.com/users/:idUser",
      }
    },
    $myCustomMethod : function(info) { //yes you can create and apply your own custom methods
        console.log(info);
    }
  });
});

//Controller
function MainCrtl($scope, Users) {
  //Setup a model to example a $find() call
  $scope.AllUsers = new Users();

  //Get All Users from the API
  $scope.AllUsers.$find();

  //Setup a model to example a $get(id) call
  $scope.OneUser = new Users();

  //Hey look there are promisses =)
  //Get the user with idUser 1 - look at $pkField
  $scope.OneUser.$get(1).success(function() {
    console.log("Done!",$scope.OneUser.$fetch());
});
4
Klederson Bueno

Angular Rest-Mod は、Angularベースのモデル/ ORMのもう1つの優れたオプションです。

Restmodは、Angular内からRESTful APIと対話するために使用できるオブジェクトを作成します。コレクション、リレーション、ライフサイクルフック、属性の名前変更などもサポートします。

3
amcdnl

NgResourceのヘルパーのもう1つの例。これは、サービスの大部分が次のようなものであるという事実に依存しています。

http://Host/api/posts
http://Host/api/posts/123
http://Host/api/posts/123/comments
http://Host/api/posts/123/comments/456

そのため、タスクは、そのようなサービスにマップするAngularJSリソースオブジェクトを作成するヘルパーを作成することです。ここにあります：

'use strict';

var api = angular.module('api', ['ngResource']);

// RESTful API helper
api.addService = function (serviceNameComponents) {
    var serviceName = "";
    var resource = "/api"; // Root for REST services
    var params = {};

    serviceNameComponents.forEach(function (serviceNameComponent) {
        serviceName += serviceNameComponent;

        var lowerCaseServiceNameComponent = serviceNameComponent.toLowerCase();
        var collection = lowerCaseServiceNameComponent + 's';
        var id = lowerCaseServiceNameComponent + 'Id';

        resource += "/" + collection + "/:" + id;
        params[id] = '@' + id;
    });

    this.factory(serviceName, ['$resource',
        function ($resource) {
            return $resource(resource, {}, {
                    query: {
                        method: 'GET',
                        params: params,
                        isArray: true
                    },
                    save: {
                        method: 'POST',
                    },
                    update: {
                        method: 'PUT',
                        params: params,
                    },
                    remove: {
                        method: 'DELETE',
                        params: params,
                    }
                }
            );
        }
    ]);
}

それを使用するには、単にこのヘルパーを呼び出します

api.addService(["Post"]);
api.addService(["Post", "Comment"]);

そして、次のような必要なパラメータを持つコードでPostとPostCommentを使用できます。

2
Denis