jsonp request with AngularJS $resource

Question

I have defined the following 2 services in AngularJS. Both should return JSONP since I'm doing a cross domain request.

Service A:

angular.module('ServiceA', ['ngResource']).
  factory('A', function ($resource) {
     return $resource('url/offers', {},
       {
         get: { method: 'JSONP', params: {property_code: 'DEMO_ERFOLGX', adults: '2',
                callback: 'JSON_CALLBACK'} }
       }
    );
  });

Service B:

angular.module('ServiceB', ['ngResource']).
  factory('B', function ($resource) {
     return $resource('url/search.json', {},
       {
         get: { method: 'JSONP', params: {property_code: 'DEMO_ERFOLGX', adults: '2',
                callback: 'JSON_CALLBACK'} }
       }
    );
  });

In my Controller, I'm binding the result to my scope:

$scope.foo = A.get();  
$scope.bar = B.get();

According to my console.log() output, B returns the expected result in JSON format, while A returns something like:

SyntaxError: invalid label
{"DEMO_ERFOLGX":{"offers":[{"checkin":"2012-12-01","checkout"

Am I missing something? What do I have to do, in order to receive proper JSON from A?

Answer 1

Your code looks confusing. Both services were called A but you use different module names. Apart from that, does it matter that your second service calls a JSON file whereas the first one doesn't?

I would try the following:

angular.module('app.services', ['ngResource'])
  .factory('ServiceA', function ($resource) {
     return $resource('url/offers', {},
       {
         get: { method: 'JSONP', params: {property_code: 'DEMO_ERFOLGX', adults: '2',
                callback: 'JSON_CALLBACK'} }
       }
    );
  });
  .factory('ServiceB', function ($resource) {
     return $resource('url/search.json', {},
       {
         get: { method: 'JSONP', params: {property_code: 'DEMO_ERFOLGX', adults: '2',
                callback: 'JSON_CALLBACK'} }
       }
    );
  });