Christian Giupponi Christian Giupponi - 5 months ago 53
AngularJS Question

AngularJS - Error: $injector:unpr Unknown Provider userService

I'm trying to use AngularJS to create a simple signup and login form for my backend.

Here my files:

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>


my 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: '/'
});
}]);


controllers.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) {

}]);


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


the problem is that the console says:


Unknown provider: userServiceProvider <- userService <-
LoginController


I tried to pass it as dependency of the Controller but I get:


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

Answer

You have to register bookServices with bookApp module in app.js assuming you "pass it as dependency of the Controller"

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