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

Question

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

Answer 1

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.

Answer 2

I think this sample could 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

Are you calling useXDomain = true in your app.config();