Allowing variable length arguments to Angular's $resource? - angularjs

Question

Here's the issue, I have multiple API calls to make along the lines of:
www.domain.com/foo/bar?token=12345
There may be more subdirectories in-between, there may be less.
I'm currently using $resource
agentApp.factory('apiFactory', function($resource) {
return $resource('www.domain.com/v1/' + ':folder',
{
'query': {
method: 'GET',
isArray: true
}
});
Which gets called as follows:
apiFactory.query({folder: 'foo', token: '12345'}, function() {...})
I would like to make this more extensible as I have the need to occasionally change the isArray value to false, and the amount of subdirectories in the URL are unknown on occasion, so I'd prefer to not use $resource's :token structure, and rather just have one that takes a string.
Is there a service I could create that would allow me to make the call as follows:
apiService.query(urlStringAndQueries, booleanForIsArray).then(function(response) { ...do something with response });
So far I've attempted the following, which obviously doesn't give me what I want, I'm not sure how to get $resource to actually kick off the API call, I put this down to a fundamental misunderstanding of how $resource works:
agentApp.factory('apiService', ['$resource', '$q', function ($resource, $q) {
var factory = {
query: function (urlStringAndQueries, isArray) {
return $q(
function() {
$resource('www.domain.com/v1/' + ':location', { location: urlStringAndQueries }, {
'query': {
method: 'GET',
isArray: isArray
}
});
}
)
},
return factory;
}]);
Which I attempt to call as follows:
apiService.query('/foo/bar?token=12345', true)
.then(function(response) { ...do something with response });
Any help and/or advice is very much appreciated.
Thanks!
EDIT: Here's my solution until a more generic pattern comes along
I couldn't simply provide an extra entity to the base URL string externally, e.g. foo/bar?token=12345, due to $response inherently encoding URL, so the characters (/?=) get converted into their encoded counterparts. Hence the separating of strings in the pattern:
agentApp.factory('apiService', ['$resource', function($resource) {
var factory = {
resourceObj: function(isArray, urlStringAndQueries) {
/* urlStringAndQueries will be variadic parameters,
so we deconstruct them for use in the URL */
var location1, location2, location3, locations = [];
angular.forEach(arguments, function(path) {
locations.push(path);
});
return $resource(vapiURL + vapiVer + '/' + ':location1' + '/' + ':location2' + '/' + ':location3' + '/' + ':location4', {
location1: locations[1],
location2: locations[2],
location3: locations[3],
location4: locations[4],
}, {
'query': {
method: 'GET',
isArray: isArray
},
'save': {
method: 'POST',
isArray: isArray
}
})
}
};
return factory;
}]);
This solution still assumes I'll have a finite amount of paths, which isn't ideal but at least it's easy to reuse.
Still open to more and better suggestions :)

Answer 1

I don't understand why you are returning promise object from your service method again, while $resource return promise itself. Don't do that
Code
agentApp.factory('apiService', ['$resource', '$q', function($resource, $q) {
var factory = {
resourceObj: function(urlStringAndQueries, isArray) {
return $resource('www.domain.com/v1/' + ':location', {
location: urlStringAndQueries
}, {
'query': {
method: 'GET',
isArray: isArray
}
});
)
}
}]);
Call factory method then you'll get access to resource object then call its query of that resource object method
Controller
apiService.resourceObj('/foo/bar?token=12345', true).query()
.then(function(response) { ...do something with response });