Angularjs http.get failure (but I see the data was returned)

Question

I'm walking thru the Angularjs phones tutorial and want to get the phones JSON from a remote server.

$http.get('http://myserver.com/phones.json').success(function(data) {
    $scope.phones = data;
});

This failed due to CORS, I was sending an OPTIONS not a GET request, so I added this first line to the controller

delete $http.defaults.headers.common['X-Requested-With'];    

I can see now in Charles that a GET not OPTIONS request is being made to myserver.com, and that the phones JSON is in the response. But the http.get is still failing with status 0 and 'data' is null.

Not sure what to try next. Any insights appreciated.

Answer 1

It should not be making an OPTIONS request for a GET, so that sounds right. I think what you want to do is:

$http.get('http://myserver.com/phones.json').then(function(data) {
  $scope.phones = data;
}, function(err) { alert('Oh no! An error!'});

I think you want to use then(), which takes two functions as arguments — the first for success, and the second for error. $http.get() returns a promise which is acted upon by then().

Also, you probably want to use $resource instead of $http. It provides a higher level of abstraction, and allows for a more reusable style, http://docs.angularjs.org/api/ngResource.$resource

EDIT:

Check out the angular debug tool here. It shows you what is available in scopes, and shows performance data.