错误:$injector:unp AngularJS中的未知提供程序

Error: $injector:unpr Unknown Provider in AngularJS

本文关键字:未知 程序 AngularJS injector unp 错误      更新时间:2023-09-26

我试图在AngularJS上做测试应用程序,但在一个地方坚持了几天出现此错误:

angular.js:38 Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.4.1/$injector/unpr?p0=AuthtokenProvider%20%3C…terceptor%20%3C-%20%24http%20%3C-%20%24templateRequest%20%3C-%20%24compile

据我所知,我在参考文献中的某个地方犯了一个错误:

你能告诉我下面的代码在哪里吗

mainController.js:

angular.module('mainController', [])
.controller('MainController', function($rootScope, $location, Auth) {
        var vm = this;
        vm.LoggedIn = Auth.isLoggedIn();
        $rootScope.$on('$routeChangeStart', function () {
            vm.LoggedIn = Auth.isLoggedIn();
            Auth.getUser()
                .then(function (data) {
                    vm.user = data.data;
                });
        });
        vm.doLogin = function () {
            vm.processing = true;
            vm.error = '';
            Auth.login(vm.loginData.username, vm.loginData.password)
                .success(function (data) {
                    vm.processing = false;
                    Auth.getUser()
                        .then(function (data) {
                            vm.user = data.data;
                        });
                    if (data.success)
                        $location.path('/');
                    else
                        vm.error = data.message;
                });
        }
        vm.doLogout = function () {
            Auth.logout();
            $location.path('/logout');
        }
    });

userController.js:

    angular.module('userController', ['userService'])
.controller('UserController', function(User){
    var vm = this;
    User.all()
        .success(function (data) {
            vm.users = data
        })
})
.controller('UserCreateController', function(User, $location, $window){
        var vm = this;
        vm.signupUser = function () {
            vm.message = '';
            User.create(vm.userData)
                .then(function(response){
                    vm.userData = {};
                    vm.message = response.data.message;
                    $window.localStorage.setItem('token', response.data.token);
                    $location.path('/');
                })
        }
    })

authService.js:

angular.module('authService', [])
.factory('Auth', function($http, $q, AuthToken) {
        var  authFactory = {};
        authFactory.login = function(username, password){
            return $http.post('/api/login', {
                username: username,
                password: password
            })
                .success(function(data){
                    AuthToken.setToken(data.token);
                    return data;
                })
        }
        authFactory.logout = function(){
            AuthToken.setToken();
        }
        authFactory.isLoggedIn = function(){
            if(AuthToken.getToken())
                return true;
            else
                return false;
        }
        authFactory.getUser = function(){
            if(AuthToken.getToken())
            return $http.get('/api/me');
            else
            return $q.reject({ message: "User has no token"});
        }
        return authFactory;
    })
.factory('AuthToken', function($window){
        var  authTokenFactory = {};
        authTokenFactory.getToken = function(){
            return $window.localStorage.getItem('token');
        }
        authTokenFactory.setToken = function (token) {
            if(token)
            $window.localStorage.setItem('token', token);
            else
            $window.localStorage.removeItem('token');
        }
        return authTokenFactory;
    })
.factory('AuthInterceptor', function ($q, $location, Authtoken) {
        var interceptorFactory = {};
        interceptorFactory.request = function(config){
            var token = Authtoken.getToken();
            if(token){
                config.headers['x-access-token'] = token;
            }
            return config
        };
        interceptorFactory.responseError = function (response) {
            if(response.status == 403)
            $location.path('/login');
            return $q.reject(response);
        }
        return interceptorFactory;
    });

userService.js:

angular.module('userService', [])
.factory('User', function($http){
        var userFactory = {};
        userFactory.create = function(userData){
            return $http.post('/api/signup', userData);
        }
        userFactory.all = function(){
            return $http.get('/api/users');
        }
        return userFactory;
    });

app.js:

angular.module('MyApp', ['appRoutes', 'mainController', 'authService', 'userController', 'userService'])
.config(function($httpProvider){
        $httpProvider.interceptors.push('AuthInterceptor');
    });

app.routes.js:

angular.module('appRoutes', ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'app/views/pages/home.html'
            })
            .when('/login',{
                templateUrl: 'app/views/pages/login.html'
            })
            .when('/signup', {
                templateUrl: 'app/views/pages/signup.html'
            });
        //$locationProvider.html5Mode(true);
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });
    });

由于您在mainController:中使用Auth,因此您需要将authService注入到您的mainController中以使其可用

angular.module('mainController', ['authService']);

每次将第二个参数传递给模块(数组)时,它都会创建一个新模块,该模块无法访问已创建的其他模块。因此,你必须通过这种方式让它们相互可用。

您可以在此处阅读有关加载依赖项的信息

可能问题在于在不同的文件中引用模块的名称。我在这里的另一篇文章中读到,这使得模块加载的次数是重复的。因此,为变量指定一个名称,然后在其余文件中使用该变量,而不是重新命名。

论坛示例。