javascript - What is the best approach for integrating AngularJS with a non-RESTful API?

Question

I have a REST API which has something like this:

GET /zones - lists all zones

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

POST /zones - creates a new zone

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

DELETE /zones/:id

deletes a zone

PUT /zones/:id

updates a zone

and now, finally I have this:

GET /zones/increment_counter/:id

which increments the counter parameter of the zone.

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

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

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

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?

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.

What is the best approach to this?

Answer 1

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

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

Factory

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);
    }]);

Controller

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
            };
        };
    }]);