앵귤러 팩토리/인젝터에 서비스를 삽입 할 수없는 이유는 무엇입니까?

WEB API를 호출 할 때 사용하는 인증 서비스 (AuthenticationService)를 작성했습니다. 나는 최근에 인터셉터에 대해 배웠다. 요청을 가로 채고 AuthenticationService의 상태를 기반으로 헤더를 수정하는 인터셉터를 만들고 싶습니다.앵귤러 팩토리/인젝터에 서비스를 삽입 할 수없는 이유는 무엇입니까?

AuthenticationService를 제 인터셉터에 주입하는 데 문제가 있습니다. 이 작업을 수행하면 페이지가 손상됩니다. 값 대신 {{MyVariableName}} 같은 것을 봅니다. 또한 양식을 제출해도 작동하지 않습니다. 버튼을 클릭해도 아무런 변화가 없습니다.

오류 메시지 또는 문제가 무엇인지 나타내는 것이 없기 때문에 문제의 원인을 알 수 없습니다. 콘솔에 아무것도 없습니다. 페이지가 깨졌습니다. 인터셉터에서 AuthenticationService를 제거하면 모든 것이 다시 작동합니다. 아래는 나의 인터셉터 코드입니다 :

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"는 다른 JavaScript 파일 (app.js)에 정의되어 있습니다. 이것은 또한 AuthenticationService가있는 곳입니다. 이 서비스는 다음과 같이 선언한다 :

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

내 스크립트는 다음과 같은 순서로로드됩니다

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

나는 또한 내 요격 코드에서 $ 인젝터를 사용하여 시도,하지만 쓸모했다. 나는 $ injector가 실행시에 정의되지 않았다는 에러 메시지를 받았다.

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

누구든지 내 인터셉터의 문제점이 AuthenticationService에 무엇인지 말할 수 있습니까?

감사

편집 : 요청 정보 :

<html ng-app="MyAppName">

app.js :

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

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

콘솔에 존재하는 오류가 없습니다.

출처

2016-11-04 Dave

체크/당신의'NG-app' 태그와'var에 응용 = angular.module (...)를 포함하는 각 자바 스크립트의 라인을 보여' – Walfrat

웹 브라우저 콘솔에 오류가 있습니다. 그것은 무엇을 말하는가? –

모듈'MyAppName'을 실제로 선언 한 위치도 보여줍니다. 마지막 줄은 단순히 그것을 참조합니다. –

인터셉터에 circular dependency이있는 것 같습니다. $httpProvider을 구성하는 동시에 $http을 사용하는 서비스를 주입하려고 시도하고 있습니다.

하나의 해결책은 수동으로 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; 
}]);

출처

2016-11-04 16:26:56 Zajn

당신의 authInjector이 시도 :

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

변화가 :

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

에 :

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

위해 스크립트 :

<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

출처

2016-11-04 16:18:52

앵귤러 팩토리/인젝터에 서비스를 삽입 할 수없는 이유는 무엇입니까?

답변

관련 문제