Angular - TypeError: XX is not a function

Question

I may be missing some property, but I am following this project and I am getting this error in my controller.

TypeError: loginService.signin is not a function 

This is my controller.js

 angular.module('appcontrollers', []).controller('LoginController', ['$rootScope', '$scope', '$http', '$location', '$localStorage', 'loginService', function ($rootScope, $scope, $http, loginService) { $scope.signin = function() { console.log("username: " + $scope.username); console.log("pass: " + $scope.password); var formData = { username: $scope.username, password: $scope.password }; // ERROR IN THIS LINE loginService.signin(formData, function(res) { console.log("asdf"); if (res.type == false) { console.log(res.data); } else { $localStorage.token = res.data.token; console.log("Window location /"); } }, function() { $rootScope.error = "Error en el logueo del usuario"; }); // Setting Token: $scope.token = $localStorage.token; } }]) 

This is my service.js

 'use strict'; angular.module('app-services', []) .factory('loginService', ['$http', '$localStorage', function ($http, $localStorage) { console.log('services - loginService'); var baseUrl = "http://angular-restful-auth.herokuapp.com"; function changeUser(user) { console.log('1'); angular.extend(currentUser, user); } function urlBase64Decode(str) { console.log('2'); var output = str.replace('-', '+').replace('_', '/'); switch (output.length % 4) { case 0: break; case 2: output += '=='; break; case 3: output += '='; break; default: throw 'Illegal base64url string!'; } return window.atob(output); } function getUserFromToken() { console.log('3'); var token = $localStorage.token; var user = {}; if (typeof token !== 'undefined') { var encoded = token.split('.')[1]; user = JSON.parse(urlBase64Decode(encoded)); } return user; } // Set user token. var currentUser = getUserFromToken(); return { save: function(data, success, error) { $http.post(baseUrl + '/signin', data).success(success).error(error) }, signin: function(data, success, error) { $http.post(baseUrl + '/authenticate', data).success(success).error(error) }, me: function(success, error) { $http.get(baseUrl + '/me').success(success).error(error) }, logout: function(success) { changeUser({}); delete $localStorage.token; success(); } }; } ]); 

My application works until the user clicks the submit button signin() from the form. Then I got two lines in my console with the correct data

 >> username: somename >> pass: somepassword 

And after that an error appears. Can someone help me to pass this signin() function?

Answer 1

You mess with the Dependency injection array, which should follow the correct order of dependency when you use it in a function.

the code

 angular.module('appcontrollers', []).controller('LoginController', ['$rootScope', '$scope', '$http', '$location', '$localStorage', 'loginService', function ($rootScope, $scope, $http, $location, $localStorage, loginService) {