Angular - TypeError: XX is not a function

Question

Maybe I'm missing some kind of property, but I'm follow this project and I'm 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 press the submit button called signin() from a form. Then I got this two lines in my console with the correct data

>> username: somename
>> pass: somepassword

And after that the error shows up. Can anyone help me in order to pass this signin() function?

Answer 1

You are messing with Dependency injection array, that should follow correct order of dependency when you are using it in a function.

Code

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