sajan sajan - 3 months ago 10
AngularJS Question

AngularJS shows undefined function for controller

I have just created a simple app. Route for

main controller
is working but not for another one.
This is the part of the code of route file

$routeProvider
.when('/', {
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'main'
})
.when('/signatures', {
templateUrl: 'app/components/signature/signature.html',
controller: 'SignatureController',
controllerAs: 'signature',
resolve: {
signatureLists: function(SignatureService){
return SignatureService.getSignatures();
}
}
})
.otherwise({
redirectTo: '/'
});


and below is the controller

(function() {
'use strict';

angular
.module('demoapp')
.controller('SignatureController', SignatureController);

/** @ngInject */
function SignatureController(signatureLists) {
var vm = this;
vm.signatures = signatureLists;
}
})


I have defined the module in another file:

(function() {
'use strict';

angular
.module('demoapp', ['ngRoute', 'toastr']);

})();


when I try to visit
/signatures
page, I get this error:


Error: [ng:areq] Argument 'SignatureController' is not a function, got undefined


Maybe its just a silly error due to a typo or something else but still I can't figure it out

Answer

You forgot to self invoke the controller closure..do a () at the end

(function() {
 'use strict';

 angular
 .module('demoapp')
 .controller('SignatureController', SignatureController);

 /** @ngInject */
 function SignatureController(signatureLists) {
  var vm = this;
  vm.signatures = signatureLists;
 }
})()