Inject Angular factory into controller - angularjs

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

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

Answer 2

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