Question

我正在学习Angular并且在查看index.html时我的控制台中收到了神秘的“AngularJS - Uncaught Error：[$ injector：modulerr]”，我将在下面发布（以及Angular JS文件）被引用。）

有人可以告诉我我做错了什么吗？错误信息太模糊了......

的index.html

CustomView

app.js

<!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.routes.js

angular.module('userApp', [
'app.routes',
'authService',
'mainCtrl'
]);

authService.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);
});

mainCtrl.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;

});

Answer 1

您正在使用ngStorage，但您似乎并没有为该模块提供js文件。它不是Angular核心的一部分，因此您需要在index.html文件中引用ngStorage的js文件。

出于兴趣 - 是否有任何理由为您的服务/控制器创建模块，而不是将它们作为主要用户应用程序的一部分。模块？

Answer 2

我有这个错误，迁移到1.4.x角度，在我的情况下，使用最小版本，例外没有说明

未捕获错误：[$ injector：modulerr]无法实例化模块mymodule

使用非缩小版本，我看到一个内部错误是一个以大写字母开头的模块

未捕获错误：[$ injector：modulerr]由于以下原因无法实例化模块mymodule：错误：[$ injector：modulerr]由于以下原因无法实例化模块aon.module.directives：错误：[$ compile：baddir]指令名称＆＃39; Lists-Radio＆＃39;是无效的。第一个字符必须是小写字母

重命名为list-Radio已解决。

在您的情况下，可能是

工厂（＆＃39; Auth＆＃39; ...

希望它有效

Answer 3

所以，在摆弄后，我尝试了CDN早期版本的角度。旧版本在我的控制台中给出了更详细的错误消息，并告诉我在app.routes.js中，html5mode不是一个函数。 Woops。改变

$locationProvider.html5mode(true);

到这个

$locationProvider.html5mode = true;

修复了问题。希望我使用的最新版本的Angular会告诉我，但是哦。

AngularJS - 未捕获错误：[$ injector：modulerr]无法实例化模块

3 个答案: