I'd like to be able to setup resources using $resource using CORS to request my data. I've got CORS working with $http but the same techniques don't apply to $resource and I was hoping someone can come to my rescue and show me how with $resource.
I've modified the last step of the Angular tutorial to use CORS by hacking the phonecatServices service, in the services.js file.
I found this example which uses the $http.defaults.useXDomain = true; delete $http.defaults.headers.common['X-Requested-With'];line to get angular to request the data using CORS but if I try $resource.defaults.useXDomain = true; I get the error: "Cannot set property 'useXDomain' of undefined".
I presume $resource doesn't have this property, so my question is, how do I configure $resource to make cross domain resource requests using CORS.
Here's my code:
angular.module('phonecatServices', ['ngResource']).
factory('Phone', function($resource){
return $resource('http\\://localhost\\:8080/:phoneId.json', {}, {
query: {params:{phoneId:'phones'}, isArray:true}
});
});
I get the following error when I try to make the request: Object #<Resource> has no method 'push'
EDIT
I've tried setting up for $http and it works most of the time, but when the call is made to the resource query, in this case Phone.get(phoneId); this seems to throw the above error.
Calling code that I suspect is causing the error (from controllers.js step 11 angular tutorial):
function PhoneDetailCtrl($scope, $routeParams, Phone) {
$scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
$scope.mainImageUrl = phone.images[0];
});
$scope.setImage = function(imageUrl) {
$scope.mainImageUrl = imageUrl;
}
}
If I remove the innards of the above method the code runs fine (without obtaining the image for the website), but I don't understand why this wouldn't work? I have set up the $http service to use CORS so that should pass it to $resource apparently.
Can anyone shed any light on it? (any working example code would be greatly appreciated).
EDIT: 13/08/13
Just so anyone visiting this question is aware, none of the answers below have really answered the question, I am researching an answer myself but if anyone spots this and has an answer I'd greatly appreciate it still.
EDIT: 06/09/13
Currently looking into this project, seems to allow everything I'm looking for: https://github.com/jpillora/xdomain
OK, the solution I've found for my project is xdomain: https://github.com/jpillora/xdomain
I accept that this may not be suitable for everyone but it's a decent cross browser solution and whilst we're stuck with IE<10 this seems to be the best solution. (I am aware IE8 and IE9 provide partial support but that as always with IE isn't full support and I don't want to have to waste time doing another work around for IE).
Thanks to everyone who provided answers to the question.