Come configurare la risorsa $ angolare (ngResource) per estrarre i dati da un altro dominio utilizzando CORS

Question

Mi piacerebbe essere in grado di impostare le risorse usando $ risorse usando CORS per richiedere i miei dati. Ho CORS che lavora con $ http ma le stesse tecniche non si applicano a $ resource e speravo che qualcuno potesse venire in mio soccorso e mostrarmi come con $ resource.

Ho modificato il last step of the Angular tutorial per utilizzare CORS hackerando il servizio phonecatServices, nel file services.js.

Ho trovato this example che utilizza $ http.defaults.useXDomain = true; cancella $ http.defaults.headers.common ['X-Requested-With']; linea per diventare angolare per richiedere i dati usando CORS ma se provo $ resource.defaults.useXDomain = true; Ottengo l'errore: "Impossibile impostare la proprietà 'useXDomain' di undefined".

Suppongo che $ risorsa non abbia questa proprietà, quindi la mia domanda è, come configurare $ resource per effettuare richieste di risorse tra domini tramite CORS.

Ecco il mio codice:

angular.module('phonecatServices', ['ngResource']). 
    factory('Phone', function($resource){ 
    return $resource('http\\://localhost\\:8080/:phoneId.json', {}, { 
    query: {params:{phoneId:'phones'}, isArray:true} 
    }); 
}); 

ricevo il seguente errore quando provo a fare la richiesta: Object # <Resource> non ha un metodo 'push'

EDIT

Ho provato a impostare $ http e funziona la maggior parte del tempo, ma quando viene effettuata la chiamata alla query della risorsa, in questo caso Phone.get (phoneId); questo sembra gettare l'errore di cui sopra.

codice

chiamata che ho il sospetto che sta causando l'errore (da 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; 
    } 
} 

Se rimuovo le interiora del metodo sopra il codice funziona benissimo (senza ottenere l'immagine per il sito web) , ma non capisco perché questo non avrebbe funzionato? Ho configurato il servizio $ http per usare CORS in modo che lo si possa trasferire a $ risorse apparentemente.

Qualcuno può far luce su di esso? (qualsiasi codice di esempio funzionante sarebbe molto apprezzato).

EDIT: 13/08/13

Solo così chiunque voglia visitare questa domanda è a conoscenza, nessuna delle risposte di seguito hanno davvero risposto alla domanda, sono alla ricerca di una risposta me stesso, ma se qualcuno macchie questo ed ha una risposta Lo apprezzerei molto ancora.

EDIT: 06/09/13

Attualmente alla ricerca in questo progetto, sembra permettere tutto quello che sto cercando: https://github.com/jpillora/xdomain

Answer 1

OK, la soluzione che ho trovato per il mio progetto è xdomain: https://github.com/jpillora/xdomain

Ammetto che questo potrebbe non essere adatto a tutti, ma è una soluzione cross browser decente e mentre siamo bloccati con IE < 10 questa sembra essere la soluzione migliore. (Sono consapevole che IE8 e IE9 forniscono supporto parziale, ma che come sempre con IE non è completamente supportato e non voglio perdere tempo a fare un altro lavoro per IE).

Grazie a tutti coloro che hanno fornito risposte alla domanda.

Answer 2

Penso che questo campione potrebbe funzionare per voi

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

Stai chiamando useXDomain = true nella tua app.config();