AngularJS:创建映射到REST资源的对象(ORM样式)

Eda*_*aor 64 javascript orm web-applications angularjs

我对AngularJS很新,但是我还不清楚如何将它与我的服务器的REST Api后端联系起来.

例如,假设我有一个"图像"资源,我通过GET-ing获得:myApi/image/1 /.这将返回带有各种字段的json对象.让我们说:

{url: "some/url", date_created: 1235845}
Run Code Online (Sandbox Code Playgroud)

现在,我希望在我的AngularJS应用程序中使用此"Image"对象进行某种表示.这种表示不仅仅是字段的映射 - 我想添加"辅助"函数,例如将date_create字段转换为人类可读的字符的函数.

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

奖励积分:

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

Bob*_*ger 80

JSData
一个以角度数据开始的项目现在是"一个框架无关的数据存储,专为易用性和安心而构建." 它具有出色的文档,并支持关系,多个后端(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;
});
Run Code Online (Sandbox Code Playgroud)

我发现ngResource非常有限,甚至与Backbone.Model相比,它具有:

  • 通过Model.parse自定义JSON解析
  • 可以扩展BaseModel(没有ngResource中的baseUrl)
  • 其他钩子,如Backbone.sync,支持LocalStorage等.

Restangular
"AngularJS服务,可以正确,轻松地处理Rest API Restful资源"
http://ngmodules.org/modules/restangular

或者尝试其他一些ORM的
客户端JavaScript ORM可以使用哪些选项?


mgo*_*nto 15

我是Restangular的创造者所以我的观点可能有偏见.

但正如鲍勃所说,你可以使用Restangular.

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

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

这样你可以为你的对象添加新的方法(奖励点:))https://github.com/mgonto/restangular#creating-new-restangular-methods

希望这对你有用:).

否则,您也可以使用ngResource($ resource),但在我看来,它需要一些"爱"和"糖".

贝斯茨


Guy*_*her 7

对于简单的交互,您可以使用Angular-Resource(http://docs.angularjs.org/api/ngResource.$ resource),这对于简单的REST交互非常方便(下载到http://code.angularjs. org/1.0.6 /)

遗憾的是,在使用角度资源时,你只能得到有限的控制,而对于任何更高级的东西,你需要根据Angularjs $ http服务创建自己的服务 - http://docs.angularjs.org/api/ng.$ http.

希望有所帮助.


amc*_*dnl 5

经过大量研究,以下是所有可用解决方案的完整列表:

但说实话,我不是很开心,所以我决定将自己的解决方案添加到列表中哈哈.在这里查看:$ modelFactory.

您的最终结果代码最终会看起来像:

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

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

return module;
Run Code Online (Sandbox Code Playgroud)

我相信这是一个比其他更好的解决方案,因为主要是模型定义非常类似于Angular ngResource,只增加了缺乏的低级功能.它超级轻量级​​(1.45k gzip/min)并且只有一些小的依赖(没有lodash,jquery等).