64

我对 AngularJS 很陌生，但我不清楚如何将它与我的服务器的 REST Api 后端绑定。

例如，假设我有一个通过 GET-ing 获得的“图像”资源：myApi/image/1/。这将返回一个带有各种字段的 json 对象。让我们这样说：

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

现在，我想在我的 AngularJS 应用程序中对这个“图像”对象进行某种表示。这种表示不仅仅是字段的映射 - 我想添加“帮助”函数，例如将date_create字段转换为人类可读内容的函数。

我知道 $resource 服务，但我不清楚我需要做什么才能在 Angular 中创建一个基本的“类”，它使用 Resource 来获取 JSON 对象，然后通过添加各种帮助函数来增强它。

奖励积分：

我也不清楚如何在模型之间添加“关系”。例如，我可能有一个“用户”资源，其中嵌入了一个“图像”资源，我想要获取用户资源，但能够在“图像”部分调用“图像”辅助函数该模型。

4

7 回答 7

80

JSData
一个以 angular-data 开始的项目现在是“一个与框架无关的数据存储，为易于使用和安心而构建。” 它具有出色的文档，并支持关系、多个后端（http、localStorage、firebase）、验证，当然还有角度集成。
http://www.js-data.io/

BreezeJS AngularJS YouTube 频道使用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 等。

Restangular
“AngularJS 服务可以正确轻松地处理 Rest API Restful 资源”
https://github.com/mgonto/restangular

或者尝试一些其他 ORM 的
https://stackoverflow.com/questions/6786307/which-javascript-orm-to-use

于 2013-04-28T14:20:06.580 回答
15

我是 Restangular 的创建者，所以我的意见可能有偏见。

但正如 Bob 所说，您可以使用 Restangular。

Restangular 使用你的 Restful API 资源来遍历树。您还可以为此添加新方法。

这是编码示例：https ://github.com/mgonto/restangular#lets-code

通过这种方式，您可以向对象添加新方法（奖励积分:)）https://github.com/mgonto/restangular#creating-new-restangular-methods

希望这对你有用:)。

否则，您也可以为此使用 ngResource ($resource)，但在我看来，它需要一些“爱”和“糖”。

最好的

于 2013-05-09T22:57:43.140 回答
7

对于简单的交互，您可以使用 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。

希望有帮助。

于 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/min）并且只有几个小的依赖项（没有 lodash、jquery 等）。

于 2014-11-19T14:13:24.570 回答
4

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());
});
于 2013-05-21T14:31:15.760 回答
3

Angular Rest-Mod是基于 Angular 的模型/ORM 的另一个不错的选择。

Restmod 创建对象，您可以在 Angular 中使用这些对象与您的 RESTful API 进行交互。它还支持集合、关系、生命周期挂钩、属性重命名等等。

于 2014-08-11T17:48:33.213 回答
2

另一个 ngResource 助手的例子。这依赖于绝大多数服务都是这样的事实：

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 以及所需的参数，例如 :post_id

于 2014-05-26T19:26:04.370 回答