问题
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?
回答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
};
};
}]);
来源:https://stackoverflow.com/questions/34024853/what-is-the-best-approach-for-integrating-angularjs-with-a-non-restful-api