I am trying to call WebAPI from AngularJS. This is a simple GET request, and I enabled CORS on the server.
I get the message $ injector: unpr Unknown provider .
I have an angular module called raterModule.js :
var raterModule = angular.module('rater', []);
a service called corsService.js that uses a snippet from enable-cors.org:
raterModule.factory("corsService", function createCORSRequest(method, url) { var xhr = new XMLHttpRequest(); // Check if the XMLHttpRequest object has a "withCredentials" property. // "withCredentials" only exists on XMLHTTPRequest2 objects. if ("withCredentials" in xhr) { xhr.withCredentials = true; xhr.open(method, url, true); } // Otherwise, check if XDomainRequest. XDomainRequest only exists in IE, and is IE way of making CORS requests. else if (typeof XDomainRequest != "undefined") { xhr = new XDomainRequest(); xhr.open(method, url); } // Otherwise, CORS is not supported by the browser. else { xhr = null; } return xhr; }
)
and finally, a controller named menuController.js :
raterModule.controller("menuCtrl",["$scope","$http","corsService", function menuCtrl($scope, $http, corsService) { var xhr = corsService.createCORSRequest('GET', 'http://localhost:50942/api/menu/items'); if (!xhr) { throw new Error('CORS not supported'); } // Getting menu items $http.get(xhr) .success(function (data, status, headers, config) { $scope.menu = data; }) .error(function (data, status, headers, config) { alert("error getting menu items"); }); } ]);
All are included at the bottom of the HTML index page. What I expected would be that the corsService is entered in menuCtrl and then menuCtrl is added to raterModule.
menuCtrl will use corsService to create a request, which is then sent to the WebAPI, avoiding problems with policies of the same origin.
I am sure that this is something simple, but from my ignorance I do not see it.