AngularJS - 错误:$injector:unpr 未知提供程序用户服务

AngularJS - Error: $injector:unpr Unknown Provider userService

本文关键字：程序 用户服务 未知 injector 错误 AngularJS unpr      更新时间：2023-09-26

>我正在尝试使用AngularJS为我的后端创建一个简单的注册和登录表单。

这是我的文件：

索引.html

<!DOCTYPE html>
<html lang="en" ng-app="bookApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Book Wishlist Application</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="bower_components/restangular/dist/restangular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>

<style>
    li {
        padding-bottom: 8px;
    }
</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Book Wishlist Application</h1>
        </div>
    </div>
    <div ng-view></div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

我的应用.js

var app = angular.module('bookApp', [
    'ngRoute',
    'bookController'
]);
app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/login', {
            templateUrl: 'partials/login.html',
            controller: 'LoginController'
        })
        .when('/signup', {
            templateUrl: 'partials/signup.html',
            controller: 'SignupController'
        })
        .when('/', {
            templateurl: 'partials/index.html',
            controller: 'MainController'
        })
        .otherwise({
            redirectTo: '/'
        });
}]);

控制器.js

var bookController = angular.module('bookController', []);
bookController.controller('LoginController', ['$scope', '$http', 'userService', function ($scope, $http, userService) {
    $scope.login = function() {
        userService.login(
            $scope.email, $scope.password,
            function(response){
                $location.path('/');
            },
            function(response){
                alert('Something went wrong with the login process. Try again later!');
            }
        );
    }
    $scope.email = '';
    $scope.password = '';
    if(userService.checkIfLoggedIn())
        $location.path('/');
}]);
bookController.controller('SignupController', ['$scope', '$http', 'userService', function ($scope, $http, userService) {
    $scope.signup = function(){
        userService.signup(
            $scope.name, $scope.email, $scope.password,
            function(response){
                alert('Account Creato');
                $location.path('/');
            },
            function(response){
                alert('Something went wrong with the signup process. Try again later.');
            }
        );
    }
    $scope.name = '';
    $scope.password = '';
    $scope.email = '';
    if( userService.checkIfLoggedIn()){
        $location.path('/');
    }
}]);
bookController.controller('MailController', ['$scope', '$http', function ($scope, $http) {
}]);

服务.js

var bookServices = angular.module('bookServices', [
    'LocalStorageModule'
]);
bookServices.factory('userService', ['$http', 'localStorageService', function ($http, localStorageService) {
    function checkIfLoggedIn() {
        if (localStorageService.get('token')) {
            return true;
        }
        return false;
    }
    function signUp(name, email, password, onSuccess, onError) {
        $http.post('/api/auth/signup', {
                name: name,
                email: email,
                password: password
            })
            .then(function (response) {
                localStorageService.set('token', response.data.token);
                onSuccess(response);
            }, function () {
                onError(response);
            });
    }
    function login(email, password, onSuccess, onError) {
        $http.post('api/auth/login', {
                email: email,
                password: password
            })
            .then(function (response) {
                localStorageService.set('token', response.data.token);
                onSuccess(response);
            }, function (response) {
                onError(response);
            });
    }
    function logout() {
        localStorageService.remove('token');
    }
    function getCurrentToken() {
        return localStorageService.get('token');
    }
    return {
        checkIfLoggedIn: checkIfLoggedIn,
        signUp: signUp,
        login: login,
        logout: logout,
        getCurrentToken: getCurrentToken
    }
}]);

问题是控制台说：

未知提供程序： 用户服务提供程序 <- 用户服务 <- 登录控制器

我试图将其作为控制器的依赖项传递，但我得到：

由于以下原因，无法实例化模块 bookApp： 错误： [$injector：模块] http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=b... 错误（本机） 在 http://laravelangular.app/bower_components/angular/angular.min.js:6:412 在 http://laravelangular.app/bower_components/angular/angular.min.js:40:134 在 R （http://laravelangular.app/bower_components/angular/angular.min.js:7:355） 处 在 G （http://laravelangular.app/bower_components/angular/angular.min.js:39:222） 处 在 http://laravelangular.app/bower_components/angular/angular.min.js:39:391 在 R （http://laravelangular.app/bower_components/angular/angular.min.js:7:355） 处 在 G （http://laravelangular.app/bower_components/angular/angular.min.js:39:222） 处 在分贝 （http://laravelangular.app/bower_components/angular/angular.min.js:43:246） 在 C （http://laravelangular.app/bower_components/angular/angular.min.js:20:359

您的用户服务工厂位于 bookServices 模块中。此模块未注入到图书控制器模块中。用：

var bookController = angular.module('bookController', ['bookServices']);

您的用户服务和控制器位于单独的模块中。 尝试将图书服务服务模块注入 bookController 模块

var bookController = angular.module('bookController', ['bookServices']);
您必须在

应用程序中向bookApp模块注册bookServices.js假设您"将其作为控制器的依赖项传递"

var app = angular.module('bookApp', [ 'ngRoute', 'bookServices', 'bookController' ]);

相关文章：