We Keep Coding

$http get method fails even with valid json from .Net WebApi in AngularJS

I am getting a valid JSON request but only $http fail method is invoked. It shows OK 200 in firebug. Also the view is not getting updated. Newbie trying out AngularJS so something could be too wrong :)
$http.jsonp("http://localhost:51377/api/Books/1").success(function(data, status, headers, config) {
alert("Suc");
$scope.people = data;
}).error(function(data, status, headers, config) {
$scope.people = data;
alert("fail");
});
This is the response in firebug:
{"ID":1,"BookName":"ASP.Net"}
Also fails for:
[{"ID":1,"BookName":"ASP.Net"}]
getting 404 in status code in $http call. I am using jsonp which should take care CORS? as I read from somewhere. My angular is in file:// protocol
Update-1:
Tried with launching my angular in localhost from VS. Same results
Update-2:
I added configuration changes to remove CORS in my backend .net webapi and now it works with the following code but still the original above code using jsonp fails
$http({
method: 'get',
url: 'http://localhost:51377/api/Books/',
responseType: "json"
}).success(function (data, status, headers, config) {
alert(data);
console.log('Success: ' + data);
$scope.people = data;
}).error(function (data, status, headers, config) {
console.log('Error: ' + data);
});

I believe you need to add a callback parameter to your request:
$http.jsonp("http://localhost:51377/api/Books/1?callback=JSON_CALLBACK")
More info here:
https://docs.angularjs.org/api/ng/service/%24http#jsonp
Also, see this JSFiddle (not mine):
http://jsfiddle.net/saarmstrong/hYACX/8/light/
When you remove the callback parameter it fails...

try to use only "/api/Books/1" instead of "http://localhost:51377/api/Books/1"

Request Header in Success

In an angular service I am making a get request with $http.get('some/url/'). I need to check the content-disposition for what the filename should be on a success. I'm not sure if there's a way to access headers so for now I'm using then. Is there a way to get headers in the success function?

Is there a way to get headers in the success function?
As seen in AngularJs $http Documentation, second paragraph verbatim
$http.get('/someUrl').
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});

You can do
$http.get('/some/Url').then(function(successResponse){
console.log(successResponse); // this will print out the response object and you can access headers, config, data, etc.
}, function(failureResponse){
console.log(successResponse);
});

Angularjs - Calling json web service always returns 404

I am new to angularjs. I am using it with ionic framework. I am trying to calling a json web service but it always returns 404.
When I try in browser it works perfectly fine.
here is my code:
function FetchCtrl($scope, $http) {
$scope.fetch = function() {
$http({method: 'GET', url: 'http://example.com/anyservice'}).
success(function(data, status, headers, config) {
alert("data "+data);
}).
error(function(data, status, headers, config) {
alert("error "+status);
});
};
}

Use either Chrome or FireFox Developer Tools and open the Network tab, then give it a shot and see what the actual request is that is happening, that should help you finding your problem.

Angular $http call not working when session is lost

I'm having some problems when I try to make some $http calls after the user session has expired. Server side the methods are created in such a way that if a request comes and the user isn't authenticated it redirects to the login page. Making the call with JS doesn't help much because for some method it returns me the HTML mark-up for the login page and for other calls it doesn't work at all. I would like to know why some calls return something and some calls don't do a thing.
CODE - Call that works
$http({
url: url + $scope.ftValue,
method: 'GET'
})
.success(function (data, status, headers, config) {
//stuff on success
})
.error(function (data, status, headers, config) {
console.log("An error occured when applying the Free Text Search!");
});
Call that doesn't work
$http({
url: url + '&currentFacet=' + facetName,
method: 'GET'
})
.success(function (data, status, headers, config) {
//stuff on success
})
.error(function (data, status, headers, config) {
console.log("Error during facet values extraction. Status: " + status);
});
To note that the only thing that's different is the method that's getting called. And that's kind of irrelevant because the controller has an authorisation annotation and the call doesn't even reach the method (which is fine, because for the one that works it returns me the login page).
I would like to know what would cause the second call to not work. Both are triggered by an ng-click directive.

AngularJS $http object not showing all headers from response

I'm having a problem with AngularJS's $http service not returning all of the headers from the API I'm polling. Here's what I've got:
$http({
method: 'POST',
withCredentials: true,
url: 'http://api.mydomain.com/query',
data: JSON.stringify(parameters)
})
.success(function(data, status, headers, config){
... // setting some scope parameters based on data
console.log(headers());
})
I can tell through the network tab in Chrome that a bunch of response headers are being returned by the API (I'm particularly interested in the X-Pagination-Total-Items header).
Here's a screenshot of the network tab from the request:
But the console.log statement above (which should output all headers) only returns two:
Any idea what's going on? How do I actually access all of the headers coming back from the AJAX call?
Thanks,
-Nate

Turns out that the Access-Control-Expose-Headers cannot accept a wildcard. We needed to specify exactly which headers the client should have access to, and then it worked.