Javascript AngularJS-未捕获错误：[$injector:modulerr]未能实例化模块_Javascript_Jquery_Angularjs

Javascript AngularJS-未捕获错误：[$injector:modulerr]未能实例化模块

javascript jquery angularjs

Javascript AngularJS-未捕获错误：[$injector:modulerr]未能实例化模块,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我正在学习AngularJS，在查看index.html时，我在控制台中收到了神秘的“AngularJS-未捕获错误：[$injector:modulerr]”，我将在下面发布它（以及被引用的AngularJS文件）有人能告诉我我做错了什么吗？错误信息太模糊了 index.html <!DOCTYPE html> <html lang="en"> <head> <meta char-set="UTF-8"> <!--FOR

我正在学习AngularJS，在查看index.html时，我在控制台中收到了神秘的“AngularJS-未捕获错误：[$injector:modulerr]”，我将在下面发布它（以及被引用的AngularJS文件）

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

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

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

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

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;

});

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');
   };

 });

authService.js

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

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

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;

});

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');
   };

 });

mainCtrl.js

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

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

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;

});

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 core的一部分，因此您需要在index.html文件中引用ngStorage的js文件

出于兴趣-您是否有任何理由为您的服务/控制器创建一个模块，而不是将其作为主“userApp”模块的一部分？

因此，在闲逛之后，我尝试了CDN中的angular早期版本。旧版本在我的控制台中给出了更详细的错误消息，并告诉我在app.routes.js中，HTML5模式不是一个函数。呜呜声。改变

$locationProvider.html5mode(true);

对此

$locationProvider.html5mode = true;

解决了这个问题。我希望我使用的Angular的最新版本能告诉我这一点，但是哦，好吧

我有这个错误，迁移到1.4.x angular，在我的例子中，使用min版本时，异常没有说什么

未捕获错误：[$injector:moduler]未能实例化模块mymodule

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

未捕获错误：[$injector:modulerr]未能实例化模块mymodule，原因是：错误：[$injector:modulerr]未能实例化模块aon.module.directions，原因是：错误：[$compile:baddir]指令名“Lists Radio”无效。第一个字符必须是小写字母

已解决重命名为列表收音机的问题

对你来说，可能

工厂（'Auth'）

希望它能工作

嘿，谢谢你的回复。我删除了ngStorage依赖项（它甚至没有在authService中使用，我忘了我添加了它，但它似乎没有造成问题），但神秘的错误依然存在。关于你的问题，我正在阅读的书声称这可以保持代码干净，并将其与大型应用程序分离。我发现了问题，如果你好奇，可以检查我的答案。酷..很高兴你解决了这个问题！