AngularJS循环依赖发现：$ HTTP＆LT; - 验证＆LT; - AuthInterceptor＆LT; - $ HTTP＆LT; - $ templateRequest＆LT; - $编译 [英] AngularJS Circular dependency found: $http <- Auth <- AuthInterceptor <- $http <- $templateRequest <- $compile
本文介绍了AngularJS循环依赖发现：$ HTTP＆LT; - 验证＆LT; - AuthInterceptor＆LT; - $ HTTP＆LT; - $ templateRequest＆LT; - $编译的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我从一本书学习角，和我得到以下错误在我的Chrome浏览器的控制台...
循环依赖发现：$ HTTP＆LT; - 验证＆LT; - AuthInterceptor＆LT; - $ HTTP＆LT; - $ templateRequest＆LT; - $编译的
下面是相关files..any帮助code将大大AP preciated，因为我有一个折角总小白：（
的index.html
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENGT＆;
＆LT; HEAD＆GT; ＆LT;元字符集=UTF-8＆GT;
＆LT;！ - 角形路由 - ＆GT;
＆LT;基本href =/＆GT;
＆LT;链接rel =stylesheet属性HREF =资产/ CSS / style.css文件＆GT; ＆所述; SCRIPT SRC =https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.js＆GT;＆下; /脚本＆GT; ＆LT;脚本SRC =应用程序/控制器/ mainCtrl.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =应用程序/控制器/ userCtrl.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =应用程序/服务/ authService.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =应用程序/服务/ userService.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =应用程序/ app.routes.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =应用程序/ app.js＆GT;＆LT; / SCRIPT＆GT;＆LT; /头＆GT;＆LT;机身NG-应用=userAppNG控制器=mainController为主＆GT; ＆LT;报头GT;
＆LT; UL＆GT;
＆LT;！main.loggedIn李NG-IF =＆GT;
＆LT; A HREF =/登录＆GT;登录和LT;！/ A＆GT;
＆LT; /李＆GT; ＆LT;李NG-IF =main.loggedIn＆GT;
您好，{{main.user.name}}
＆LT; /李＆GT; ＆LT;李NG-IF =main.loggedIn＆GT;
＆所述; A HREF =＃纳克点击=main.doLogout（）＆GT;注销＆下; / A＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; /头＆GT; ＆lt;主＆GT;
＆LT; DIV NG-视图＆gt;＆LT; / DIV＆GT;
＆LT; /主＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;
app.js
angular.module（'userApp'，[
app.routes'，
authService'，
mainCtrl'，
userCtrl'，
userService
]）的.config（函数（$ httpProvider）{
//附上我们的权威性拦截令牌融入请求。
$ httpProvider.interceptors.push（'AuthInterceptor'）;
}）;
authService.js
angular.module（'authService'，[]）.factory（'验证'，函数（$ HTTP，的authToken）{变种authFactory = {};//登录
authFactory.login =功能（用户名，密码）{
返回$ http.post（'/登录'，{
用户名：用户名，
密码：密码
}）
.success（功能（数据）{
AuthToken.setToken（data.token）;
返回的数据;
}）;
};//登出
authFactory.logout =功能（）{
AuthToken.setToken（）;
};//检查用户登录。
authFactory.isLoggedIn =功能（）{
如果（AuthToken.getToken（））
返回true
其他
返回false};authFactory.getUser =功能（）{ 如果（AuthToken.getToken（））
返回$ http.get（'/ API /用户/我'，{缓存：真}）;
其他
返回$ q.reject（{消息：用户没有令牌'}）;
};返回authFactory;}）.factory（'的authToken'，函数（$窗口）{变种authTokenFactory = {};//获取身份验证令牌
authTokenFactory.getToken =功能（）{
返回$ window.localStorage.getItem（'令牌'）;
};//设置或明确的身份验证令牌
authTokenFactory.setToken =功能（标记）{
如果（标记）{
$ window.localStorage.setItem（'令牌'令牌）;
};
};返回authTokenFactory;}）.factory（'AuthInterceptor'，函数（$ Q $位置，验证）{ //添加令牌的所有请求。 变种authInterceptorFactory = {}; authInterceptorFactory.request =功能（配置）{ VAR令牌= Auth.getToken（）; 如果（标记）{
config.headers ['X-访问令牌'] =记号。
}; 返回配置; }; authInterceptorFactory.responseError =功能（响应）{ 如果（response.status == 403）{
AuthToken.setToken（）;
$ location.path（'/登录'）;
}; 返回$ q.reject（响应）;
}; 返回authInterceptorFactory;}）;
mainCtrl.js
angular.module（'mainCtrl'，[]） .controller（'mainController'，函数（$ rootScope，$位置，验证）{ VAR VM =这一点; //获取信息，如果一个人登录
vm.loggedIn = Auth.isLoggedIn（）; //检查，看是否有usre被记录在每个请求
$ rootScope。在$（'$ routeChangeStart'，函数（）{
vm.loggedIn = Auth.isLoggedIn（）; //获取路线更改用户信息
Auth.getUser（）
.success（功能（数据）{
vm.user =数据;
}）;
}）; //函数来处理登录表单
vm.doLogin =功能（）{ //调用Auth.login（）函数
Auth.login（vm.loginData.username，vm.loginData.password）
.success（功能（数据）{ //如果用户成功登录，重定向到用户页面
如果（data.success）
$ location.path（'/用户）;
其他
vm.error = data.message; }）;
}; //函数来处理注销
vm.doLogout =功能（）{
Auth.logout（）;
//重新设置所有用户信息
vm.user = {};
$ location.path（'/登录'）;
}; }）;
解决方案
在您code AuthInterceptor 要求验证服务，这是使用 $ HTTP 。我相信你犯了一个错误在这里，因为在你使用的authToken ，而不是验证。
.factory（'AuthInterceptor'，函数（$ Q $位置的authToken）{//＆LT; ---在这里，//添加令牌的所有请求。变种authInterceptorFactory = {};authInterceptorFactory.request =功能（配置）{ VAR令牌= AuthToken.getToken（）; 如果（标记）{
config.headers ['X-访问令牌'] =记号。
}; 返回配置;};authInterceptorFactory.responseError =功能（响应）{ 如果（response.status == 403）{
AuthToken.setToken（）;
$ location.path（'/登录'）;
}; 返回$ q.reject（响应）;
};返回authInterceptorFactory;
}）;
编辑：
至于在评论你的问题，您尝试使用 $ Q 服务而不将它传递给你的验证服务
.factory（'验证'，函数（$ Q $ HTTP，的authToken）{//＆LT; ---失踪这里变种authFactory = {}; ...authFactory.getUser =功能（）{ 如果（AuthToken.getToken（））
返回$ http.get（'/ API /用户/我'，{缓存：真}）;
其他
返回$ q.reject（{消息：用户没有令牌'}）; //＆LT; - 你在这里使用它
};返回authFactory;}）
I am learning Angular from a book, and am getting the following error in my Chrome console...
"Circular dependency found: $http <- Auth <- AuthInterceptor <- $http <- $templateRequest <- $compile"
Here is the code from the relevant files..any help would be greatly appreciated, as I am a total noob with Angular :(
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta char-set="UTF-8">
<!--FOR ANGULAR ROUTING-->
<base href="/">
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.js"></script>
<script src="app/controllers/mainCtrl.js"></script>
<script src="app/controllers/userCtrl.js"></script>
<script src="app/services/authService.js"></script>
<script src="app/services/userService.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/app.js"></script>
</head>
<body ng-app="userApp" ng-controller="mainController as main">
<header>
<ul>
<li ng-if="!main.loggedIn">
<a href="/login">Login!</a>
</li>
<li ng-if="main.loggedIn">
Hello, {{main.user.name}}
</li>
<li ng-if="main.loggedIn">
<a href="#" ng-click="main.doLogout()">Logout</a>
</li>
</ul>
</header>
<main>
<div ng-view></div>
</main>
</body>
</html>
app.js
angular.module('userApp', [
'app.routes',
'authService',
'mainCtrl',
'userCtrl',
'userService'
])
.config(function($httpProvider) {
//Attach our auth interceptor to integrate token into request.
$httpProvider.interceptors.push('AuthInterceptor');
});
authService.js
angular.module('authService',[])
.factory('Auth', function($http, AuthToken) {
var authFactory = {};
//Login
authFactory.login = function(username, password) {
return $http.post('/login', {
username: username,
password: password
})
.success(function(data){
AuthToken.setToken(data.token);
return data;
});
};
//Logout
authFactory.logout = function() {
AuthToken.setToken();
};
//Check if user is logged in.
authFactory.isLoggedIn = function() {
if (AuthToken.getToken())
return true
else
return false
};
authFactory.getUser = function() {
if (AuthToken.getToken())
return $http.get('/api/users/me', { cache: true });
else
return $q.reject({ message: 'User has no token' });
};
return authFactory;
})
.factory('AuthToken', function($window) {
var authTokenFactory = {};
//Get auth token
authTokenFactory.getToken = function() {
return $window.localStorage.getItem('token');
};
//Set or clear auth token
authTokenFactory.setToken = function(token) {
if (token) {
$window.localStorage.setItem('token', token);
};
};
return authTokenFactory;
})
.factory('AuthInterceptor', function($q, $location, Auth) {
//Add token to all requests.
var authInterceptorFactory = {};
authInterceptorFactory.request = function(config) {
var token = Auth.getToken();
if (token) {
config.headers['x-access-token'] = token;
};
return config;
};
authInterceptorFactory.responseError = function(response) {
if (response.status == 403) {
AuthToken.setToken();
$location.path('/login');
};
return $q.reject(response);
};
return authInterceptorFactory;
});
mainCtrl.js
angular.module('mainCtrl', [])
.controller('mainController', function($rootScope, $location, Auth) {
var vm = this;
// get info if a person is logged in
vm.loggedIn = Auth.isLoggedIn();
// check to see if a usre is logged in on every request
$rootScope.$on('$routeChangeStart', function() {
vm.loggedIn = Auth.isLoggedIn();
// get user information on route change
Auth.getUser()
.success(function(data) {
vm.user = data;
});
});
// function to handle login form
vm.doLogin = function() {
// call the Auth.login() function
Auth.login(vm.loginData.username, vm.loginData.password)
.success(function(data) {
// if a user successfully logs in, redirect to users page
if (data.success)
$location.path('/users');
else
vm.error = data.message;
});
};
// function to handle logging out
vm.doLogout = function() {
Auth.logout();
// reset all user info
vm.user = {};
$location.path('/login');
};
});
解决方案
In you code AuthInterceptor requires a Auth service, which is using $http. I believe you made a mistake here, as in the interceptor you use AuthToken rather than Auth.
.factory('AuthInterceptor', function($q, $location, AuthToken) { // <--- Here
//Add token to all requests.
var authInterceptorFactory = {};
authInterceptorFactory.request = function(config) {
var token = AuthToken.getToken();
if (token) {
config.headers['x-access-token'] = token;
};
return config;
};
authInterceptorFactory.responseError = function(response) {
if (response.status == 403) {
AuthToken.setToken();
$location.path('/login');
};
return $q.reject(response);
};
return authInterceptorFactory;
});
Edit:
As for your problem from the comment, you try to use $q service without passing it to your Auth service
.factory('Auth', function($q, $http, AuthToken) { // <--- was missing here
var authFactory = {};
...
authFactory.getUser = function() {
if (AuthToken.getToken())
return $http.get('/api/users/me', { cache: true });
else
return $q.reject({ message: 'User has no token' }); // <-- you use it here
};
return authFactory;
})
这篇关于AngularJS循环依赖发现：$ HTTP＆LT; - 验证＆LT; - AuthInterceptor＆LT; - $ HTTP＆LT; - $ templateRequest＆LT; - $编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
