将 AngularJS 与非 RE​​STful API 集成的最佳方法是什么? [英] What is the best approach for integrating AngularJS with a non-RESTful API?

问题描述

我有一个 REST API，它有这样的东西:

I have a REST API which has something like this:

GET/zones - 列出所有区域

{
  "zones": [
    {
      "name": "zone 1",
      "persons": [
        0,
        2,
        3
      ],
      "counter" : 3
    },
    {
      "name": "zone 2",
      "persons": [
        1,
        5
      ],
      "counter" : 0
    }
  ]
}

POST/zones - 创建一个新区域

{
  "name": "zone 1",
  "persons": [
    0,
    2,
    3
  ]
}

删除/zones/:id

删除区域

PUT/zones/:id

更新区域

现在，我终于有了这个:

and now, finally I have this:

GET/zones/increment_counter/:id

增加区域的计数器参数.

which increments the counter parameter of the zone.

我正在使用 Angular 并且我正在为 Zone 对象定义一个工厂，它应该从这个 REST API 中提供自己.

I am using Angular and I am defining a factory for the Zone object, which should feed itself from this REST API.

我看过这个例子，它几乎满足我想要的，除了增量操作，它不遵循 RESTful 准则.

I have seen this example and it fulfills almost of what I want, except the increment operation, which does not follow the RESTful guidelines.

我无法修改 REST API，所以我必须处理这个问题.我应该如何处理这些类型的端点?

I cannot modify the REST API so I have to deal with this. How should I handle these types of endpoints?

另外，我应该使用服务还是我可以在我的区域工厂中定义一个方法(例如:zone.incrementCounter())，它直接查询服务器并增加计数器?

Also, should I use services or could I just define a method in my Zone factory (ex.: zone.incrementCounter()) which directly queries the server and increments the counter?

我习惯了 Java 对象，我只需要为一个类定义 getter 和 setter该类将在后台访问服务器的端点.

I am used to Java objects, where I just need to define getters and setters for a class and the class will access the server's endpoints under the hood.

最好的方法是什么?

推荐答案

你试过 ngResource?因为那是你应该开始的地方.

Have you tried ngResource? Because that is where you should start.

这是一个未经测试的片段，可以让您了解它的要点.

Here's an untested snippet to give you the gist of it.

工厂

angular.module('MyApplication')
    .factory('ZoneFactory', ['$resource', function($resource) {
        var url = 'www.example.com/api/zones';
        var paramDefaults = {};
        var methods = {
            'get': {
                'url': url,
                'method': 'GET'
            },
            'post': {
                'url':  url,
                'method': 'POST'
            },
            'delete': {
                'url':  url,
                'method': 'DELETE',
                'params': {
                    'id': '@id'
                }
            },
            'put': {
                'url':  url,
                'method': 'PUT',
                'params': {
                    'id': '@id'
                }
            },
            'increment': {
                'url':  url + '/increment_counter',
                'method': 'GET',
                'params': {
                    'id': '@id'
                }
            }
        };
        return $resource(url, paramDefaults, methods);
    }]);

控制器

angular.module('MyApplication')
    .controller('SomeController', ['ZoneFactory', function(ZoneFactory) {
        var mv = this;

        mv.newZone = {
            'name': '',
            'persons': [],
            'counter': 0
        };
        mv.zones = ZoneFactory.get();

        mv.createZone = function() {
            ZoneFactory.post({'zone': mv.newZone});
            mv.zones.push(mv.newZone);

            mv.newZone = {
                'name': '',
                'persons': [],
                'counter': 0
            };
        };
    }]);

这篇关于将 AngularJS 与非 RE​​STful API 集成的最佳方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！