个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 14:25:26 25 4
gpt4 key购买 nike

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

这是我的文件:

index.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>

我的app.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: '/'
        });
}]);

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

问题是控制台显示:

Unknown provider: userServiceProvider <- userService <- LoginController

我尝试将其作为 Controller 的依赖项传递，但我得到:

Failed to instantiate module bookApp due to: Error: [$injector:modulerr] http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=b...) at Error (native) at http://laravelangular.app/bower_components/angular/angular.min.js:6:412 at http://laravelangular.app/bower_components/angular/angular.min.js:40:134 at r (http://laravelangular.app/bower_components/angular/angular.min.js:7:355) at g (http://laravelangular.app/bower_components/angular/angular.min.js:39:222) at http://laravelangular.app/bower_components/angular/angular.min.js:39:391 at r (http://laravelangular.app/bower_components/angular/angular.min.js:7:355) at g (http://laravelangular.app/bower_components/angular/angular.min.js:39:222) at db (http://laravelangular.app/bower_components/angular/angular.min.js:43:246) at c (http://laravelangular.app/bower_components/angular/angular.min.js:20:359

最佳答案

您的 userService 工厂位于 bookServices 模块中。该模块未注入(inject)到 bookcontroller 模块中。使用:

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

关于javascript - AngularJS-错误 : $injector:unpr Unknown Provider userService，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38293532/

25 4 0
文章推荐： javascript - Dragula - 将元素从一个容器拖到不同的元素
文章推荐： javascript - 过滤数组以查找具有项目计数的唯一项目
文章推荐： javascript - 创建一个将另一个函数纳入其自身的函数
文章推荐： javascript - str.replace 中的白名单
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com