AngularJS shows undefined function for controller

Question

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

You forgot to self invoke the controller closure..do a () at the end — Developer
– Developer, Commented Aug 20, 2016 at 6:57
check whether you added that script in your html <script src= " ...." > — Syam Pillai
– Syam Pillai, Commented Aug 20, 2016 at 6:57
As you have defined both your module and controller in different files, you will have include both .js files. — Ruhul
– Ruhul, Commented Aug 20, 2016 at 6:59

Aleksey L. · Accepted Answer · 2016-08-20 07:07:27Z

1

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;
 }
})()

edited Aug 20, 2016 at 7:07

Aleksey L.

38.4k11 gold badges86 silver badges90 bronze badges

answered Aug 20, 2016 at 6:59

Developer

6,4703 gold badges20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sajan Over a year ago

I knew this would be something like this. Thanks for the help.

Developer Over a year ago

@sajan - no probs, I have done this mistake 100 times :)

Collectives™ on Stack Overflow

AngularJS shows undefined function for controller

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related