为什么我不能将服务注入Angular工厂/注入器？

Question

I have written an authentication service (AuthenticationService) I use for calling out to a WEB API. 我已经编写了用于调用Web API的身份验证服务（AuthenticationService）。 I recently have learned about interceptors. 我最近了解了拦截器。 I want to create an interceptor to intercept requests and modify headers based on the state of the AuthenticationService. 我想创建一个拦截器来拦截请求并根据AuthenticationService的状态修改标头。

I am having some sort of problem with injecting the AuthenticationService into my interceptor. 将AuthenticationService注入到我的拦截器中时，我遇到了一些问题。 When I do this, my page is broken. 当我这样做时，我的页面坏了。 I see things like {{MyVariableName}} instead of the value. 我看到诸如{{MyVariableName}}之类的东西，而不是值。 Also submitting a form does not work. 另外，提交表单无效。 Nothing happens on a button click. 单击按钮没有任何反应。

I have no idea what the problem is, because I cannot find any error message or anything to indicate what the problem is. 我不知道问题是什么，因为我找不到任何错误消息或任何指示问题的原因。 Nothing is in the console. 控制台中没有任何内容。 The page is just broken. 页面刚刚坏了。 If I remove the AuthenticationService from the interceptor, everything works again. 如果我从拦截器中删除AuthenticationService，一切将再次起作用。 Below is my interceptor code: 以下是我的拦截器代码：

app.factory('authInjector', ['AuthenticationService', function (AuthenticationService) {
var authInjector = {
    request: function (config) {
        config.headers['x-session-token'] = 'test'; 
        return config;
    }
};
    return authInjector;
 }]);

app.config(['$httpProvider', function ($httpProvider) {
       $httpProvider.interceptors.push('authInjector');
}]);

"app" is defined in another JavaScript file (app.js). “ app”是在另一个JavaScript文件（app.js）中定义的。 This also where AuthenticationService is. 这也是AuthenticationService所在的位置。 The service is declared like this: 该服务的声明如下：

app.service('AuthenticationService', function ($http) { ... }

My scripts are loaded in the following order: 我的脚本按以下顺序加载：

    <script src="~/Scripts/app.js"></script>
    <script src="~/Scripts/injector.js"></script>

I also tried using $injector in my interceptor code, but it was worthless. 我还尝试在拦截器代码中使用$ injector，但这毫无用处。 I got an error stating that $injector was undefined at run time. 我收到一条错误消息，指出$ injector在运行时未定义。

var AuthService = $injector.get('AuthenticationService');

Can anyone tell what my interceptor's problem is with AuthenticationService? 谁能告诉我AuthenticationService的拦截器问题是什么？

Thanks 谢谢

Edit: Requested information: 编辑：要求的信息：

<html ng-app="MyAppName">

app.js: app.js：

angular.module('MyAppName').controller('LoginController', function ($scope, $rootScope, $window, AuthenticationService) {

var app = angular.module('MyAppName', ['ngRoute', 'ngSanitize', 'ngMaterial', 'ngMessages', 'material.svgAssetsCache']);

There is no error present in the console. 控制台中没有错误。

Answer 1

Try this in your authInjector : 在您的authInjector中尝试一下：

var AuthenticationService = $injector.get('AuthenticationService');

change that: 改变：

app.factory('authInjector', ['AuthenticationService', function (AuthenticationService) {

to: 至：

app.factory('authInjector', ['$injector', function ($injector) {

order of scripts: 脚本顺序：

<script src="~/app/app.js"></script> // create the app and dependencies
<script src="~/app/authentication.service.js"></script> // create the authentication service
<script src="~/app/auth-injector.service.js"></script> // create the interceptor factory
<script src="~/app/app.config.js"></script> //push the interceptor to httpProvider

Answer 2

It looks like you have a circular dependency in your interceptor. 看起来您的拦截器中有circular dependency 。 You're attempting to inject a service that is using $http while at the same time attempting to configure the $httpProvider . 您尝试注入使用$http的服务，同时尝试配置$httpProvider 。

One solution would be to manually inject the authService inside the request property of the interceptor. 一种解决方案是将authService手动注入到拦截器的request属性中。

app.factory('authInjector', ['$injector', function($injector) {

  var authInjector = {
    request: function (config) {
      var AuthService = $injector.get('AuthService');
      // Do whatever you need to do with AuthService
      config.headers['x-session-token'] = 'test'; 
      return config;
    }
  };
  return authInjector;
}]);

为什么我不能将服务注入Angular工厂/注入器？

问题描述

2 个解决方案

解决方案1
0 2016-11-04 16:18:52

解决方案2
0 已采纳 2016-11-04 16:26:56

为什么我不能将服务注入Angular工厂/注入器？

问题描述

2 个解决方案

解决方案1 0 2016-11-04 16:18:52

解决方案2 0 已采纳 2016-11-04 16:26:56

解决方案1
0 2016-11-04 16:18:52

解决方案2
0 已采纳 2016-11-04 16:26:56