我正在学习 Angular，并且在查看 index.html 时在我的控制台中收到了神秘而神秘的“AngularJS - 未捕获错误:[$injector:modulerr]”，我将在下面发布该内容(以及 Angular JS 文件)被引用。)
有人可以告诉我我做错了什么吗？错误消息是如此模糊......
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.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-resource.min.js"></script>
<script src="app/controllers/mainCtrl.js"></script>
<script src="app/services/authService.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'
]);
app.routes.js
angular.module('app.routes', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/views/pages/home.html'
})
.when('/login', {
templateUrl: 'app/views/pages/login.html',
controller: 'mainController',
controllerAs: 'login'
});
$locationProvider.html5mode(true);
});
authService.js
angular.module('authService', ['ngStorage'])
.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 user 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
$location.path('/users');
});
};
// function to handle logging out
vm.doLogout = function() {
Auth.logout();
// reset all user info
vm.user = {};
$location.path('/login');
};
});
最佳答案
您正在使用ngStorage，但您似乎没有提取该模块的js文件。它不是 Angular 核心的一部分，因此您需要在 index.html 文件中引用 ngStorage 的 js 文件。
出于兴趣 - 您是否有任何理由为您的服务/ Controller 创建一个模块，而不是将它们作为主“userApp”模块的一部分？
关于javascript - AngularJS - Uncaught Error : [$injector:modulerr] Failed to instantiate module，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31720766/