找到你要的答案

Q:AngularJS injector issue

Q:AngularJS喷油器的问题

I'm trying to call a WebAPI from AngularJS. It is a simple GET request, and I have enabled CORS on the server.

I am getting the $injector:unpr Unknown Provider error.

I have an angular module called raterModule.js:

var raterModule = angular.module('rater', []);

a service called corsService.js that uses the 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's 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 called 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");
                    });
    }
]);

These are all included at the bottom of an HTML index page. What I was hoping to happen would be that corsService is injected into menuCtrl, and then menuCtrl is added to the raterModule.

The menuCtrl would use corsService to create a request which is then sent to the WebAPI, avoiding the same-origin policy problem.

I'm sure it is something simple but in my ignorance I cannot see it.

我想从AngularJS打电话给WebAPI。这是一个简单的GET请求,我已启用的服务器系统。

我得到的美元毫无未知提供者错误注入。

我有一个叫ratermodule.js角模块:

var raterModule = angular.module('rater', []);

一种服务叫做corsservice.js使用代码段从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's 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;
}

最后有一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");
                    });
    }
]);

这些都是包含在一个HTML页面的底部。我所希望发生的是,corsservice注入menuctrl,然后menuctrl添加到ratermodule。

的menuctrl会使用corsservice创建一个请求,然后发送给WebAPI,避开同源策略问题。

我相信这是简单的事情,但在我的无知,我不能看到它。

answer1: 回答1:

You've got an error because Angular expect that you gonna inject providers named method and url in your createCORSRequest, not function parameters.

So, you can review your corsService in following way:

raterModule.factory(`corsService`, function() {
    var service = {};

    service.createCORSRequest = fucntion(method, url) {
    // your logic here
    };

   return service;
})

你有一个错误,因为角期待你会在你的createcorsrequest注入商命名方法和网址,没有函数参数。

所以,你可以按以下方式corsservice:

raterModule.factory(`corsService`, function() {
    var service = {};

    service.createCORSRequest = fucntion(method, url) {
    // your logic here
    };

   return service;
})
javascript  angularjs  asp.net-web-api  angularjs-injector