How to configure Angular $ resource (ngResource) to retrieve data from another domain using CORS

Question

I would like to be able to tune resources using $ resource, using CORS to query my data. I have CORS working with $ http, but the same methods do not apply to $ resource, and I was hoping someone could come to my aid and show me how with $ resource.

I changed the last step of the Angular tutorial to use CORS by hacking the phonecatServices service in the services.js file,

I found this example that uses $ http.defaults.useXDomain = true; delete $ http.defaults.headers.common ['X-Requested-With']; to get an Angular data request using CORS, but if I try $ resource.defaults.useXDomain = true; I get an error: "Unable to set property" useXDomain "from undefined".

I assume $ resource does not have this property, so my question is how do I configure $ resource to query cross-domain resources using CORS.

Here is 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 trying to make a request: Object # <Resource> does not have a push method

EDIT

I tried setting up for $ http and it works most of the time, but when the call is made in a resource request, in this case Phone.get (phoneId); this seems to throw the above error.

The code of the calling code, which I suspect is causing an error (from controllers.js step 11 of the 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 method internals above, the code will work fine (without getting an image for the website), but I don’t understand why this will not work? I installed the $ http service to use CORS to probably pass it to $ resource.

Can anyone shed light on him? (any working example code would be greatly appreciated).

EDIT: 13/08/13

Just so that someone who examined this question knows that none of the answers below answered this question, I myself study the answer, but if someone says this and gets an answer, I would be very grateful to him.

EDIT: 06/09/13

Now, looking through this project, it seems everything I'm looking for: https://github.com/jpillora/xdomain

Answer 1

OK, the solution I found for my project is xdomain: https://github.com/jpillora/xdomain

I agree that this might not be suitable for everyone, but it is a decent cross-browser solution, and while we are stuck with IE and 10, this seems like the best solution. (I know that IE8 and IE9 provide partial support, but, as always, IE is not full support, and I do not want to waste time doing other work for IE).

Thanks to everyone who provided answers to the question.

Answer 2

I think this sample might work for you

 angular.module('myBeerApp.services', ['ngResource']). value('version', '0.1'). factory('beerDB', function($resource) { return $resource('URL',{ alt:'json', appToken:'TOKEN', q:'rock', callback: 'JSON_CALLBACK' }, { get: { method:'JSONP', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' } } }); }); 

Answer 3

You call useXDomain = true in your app.config ();