javascript - 错误: $injector:unpr Unknown Provider in AngularJS

Question

我正在尝试在 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
        });
    });

Answer 1

您需要将 authService 注入(inject)到 mainController 中以使其可用，因为您在 mainController 中使用了 Auth:

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

每次将第二个参数传递给模块(数组)时，它都会创建一个新模块，该模块无法访问已创建的其他模块。因此，您必须以这种方式使它们彼此可用。

您可以阅读 loading dependencies here