Inject Angular factory into controller

Question

I decided to base my AngularJS project on angular-seed if found on GitHub. But I have a problem with factory that I try to call from my controller.

I have controller like this:

(function() {
    'use strict';

    angular.module('myApp.authentication', ['ngRoute'])

    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/authentication', {
            templateUrl: 'views/authentication/authentication.partial.html',
            controller: 'AuthenticationCtrl',
            controllerAs: 'vm',
            bindToController: true
        });
    }])

    AuthenticationCtrl.$inject = ['authenticationService']

    .controller('AuthenticationCtrl', [function(authenticationService) {

        var vm = this;
        vm.login = function() {
           var all =  authenticationService.getAll();
            console.log("login" + all)
        }

    }]);
})();

So when vm.login() get triggered I want to call authenticationService.getAll();to get data from my service as below:

(function () {
    'use strict';

    angular
        .module('myApp')
        .factory('authenticationService', authenticationService);

    function authenticationService() {
        var service = {
            getAll: getAll
        };

        return service;

        function getAll() {
            return [
                {first: 'Alan', last: 'Dex', lunchMoney: 123},
                {first: 'Ada', last: 'True', lunchMoney: 82},
                {first: 'Adam', last: 'Mc Donald', lunchMoney: 122},
                {first: 'Anthony', last: 'Heys', lunchMoney: 322},
                {first: 'Pamela', last: 'Anders', lunchMoney: 422}
            ];

        }
    }
})();

But I got following error Uncaught ReferenceError: AuthenticationCtrl is not defined Is that because I try to inject factory into controller that is not created yet? If so how should I write this piece?

Answer 1

If you want to define your controller explicitly as a function, then you need write it like so:

    function AuthenticationCtrl (authenticationService) {

            var vm = this;
            vm.login = function() {
               var all =  authenticationService.getAll();
                console.log("login" + all)
            }

        };

AuthenticationCtrl.$inject = ['authenticationService'];
angular.module('myApp.authentication')
  .controller('AuthenticationCtrl', AuthenticationCtrl);

I suggest to write dependencies in that way:

.controller('AuthenticationCtrl', ['authenticationService', function(authenticationService) {

    var vm = this;
    vm.login = function() {
       var all =  authenticationService.getAll();
        console.log("login" + all)
    }

}]);

Seems more readable and less lines of code

Answer 2

Make the followinf changes to your controller :

(function() {
    'use strict';

    angular.module('myApp.authentication', ['ngRoute'])

    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/authentication', {
            templateUrl: 'views/authentication/authentication.partial.html',
            controller: 'AuthenticationCtrl',
            controllerAs: 'vm',
            bindToController: true
        });
    }])

    .controller('AuthenticationCtrl', AuthenticationCtrl);

    AuthenticationCtrl.$inject = ['authenticationService']

   function AuthenticationCtrl(function(authenticationService) {

        var vm = this;
        vm.login = function() {
           var all =  authenticationService.getAll();
            console.log("login" + all)
        }

    });
})();

Actually you are trying to inject service to your controller before defining that controller.i.e. when it tries to inject service it don't found the controller.

Thanks & Cheers