【发布时间】：2015-08-13 14:02:33
【问题描述】：
我正在从一本书中学习 Angular，并在我的 Chrome 控制台中收到以下错误...
“找到循环依赖：$http
这是来自相关文件的代码。任何帮助将不胜感激，因为我是 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');
};
});
【问题讨论】：
-
你的主控制器在哪里
-
现在将其添加到我的问题中，不确定是否需要:)
标签： javascript angularjs html authentication