64

私は AngularJS にかなり慣れていませんが、それをサーバーの REST Api バックエンドに結び付ける方法がよくわかりません。

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

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

ここで、AngularJS アプリでこの「画像」オブジェクトを何らかの形で表現したいと考えています。この表現は、単なるフィールドのマッピングではありません。たとえば、date_createフィールドを人間が読み取れるものに変換する関数など、「ヘルパー」関数を追加したいと考えています。

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

ボーナスポイント：

モデル間に「関係」を追加する方法も不明です。たとえば、「画像」リソースが埋め込まれた「ユーザー」リソースがあり、ユーザー リソースを取得したいが、「画像」部分で「画像」ヘルパー関数を呼び出すことができる場合があります。モデル。

4

7 に答える 7

7

単純な対話には、Angular-Resource ( http://docs.angularjs.org/api/ngResource .$resource) を使用できます。これは、単純な REST 対話に非常に便利です (ダウンロードするには、http://code.angularjs.組織/1.0.6/ )

悲しいことに、angular リソースを使用する場合は制限された制御しか得られません。さらに高度なものについては、Angularjs $http サービス ( http://docs.angularjs.org/api/ng .$http ) に基づいて独自のサービスを作成する必要があります。

それが役立つことを願っています。

于 2013-04-24T08:49:29.837 に答える
5

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

しかし、正直なところ、私はあまり満足していなかったので、リストに独自のソリューションを追加することにしました (笑)。ここで確認してください: $modelFactory。

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

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

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

return module;

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

于 2014-11-19T14:13:24.570 に答える
3

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

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

于 2014-08-11T17:48:33.213 に答える
2

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_id のような必要なパラメーターを使用して、コードで Post および PostComment を使用できます。

于 2014-05-26T19:26:04.370 に答える