Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to find a reason AngularJS "Argument 'MyCtrl' is not a function, got undefined"

When AngularJS crashes with an error "Argument 'MyCtrl' is not a function, got undefined" it's may be little bit challenging to find a reason why.

Here I want to make a kind of a "check list", what should you check when got an error

like image 722
Sergei Panfilov Avatar asked Nov 07 '14 09:11

Sergei Panfilov


2 Answers

  1. Is file with 'MyCtrl' connected via html? (check twice if you concat or uglify your files)
<script src='path/to/controllers.js'></script>
  1. Is 'MyCtrl' defined correctly?

There are a few patterns:

app.controller('MyCtrl', ['$scope', function ($scope) {...}])

app.controller('MyCtrl', function ($scope) {...})

var MyCtrl = function ($scope) {...})
  1. Is 'MyCtrl' defined in right module?
  2. Is "MyCtrl's" module added to app dependencies?
angular.module('app', ['app.sources']);
  1. If you define your module multiple times, you should define it in this order:

    • First define should be like
angular.module('app.sources', []);

(with [ ])

  • Subsequent defines should be like
angular.module('app.sources');

(without [ ])

Important: Declaration order is important - definition with [ ] should go first.

  1. Check that module is defined only once. You may have forgotten to rename module after copy-paste. Check src for string like
angular.module('app.sources', []);
  1. Check your 'ng-app'. Better to use only one of these with name like ng-app='app' (In other words do not define multiple unnamed ngApp directives)

  2. Is your controller's syntax correct for your AngularJS version?

(There is a difference between definition in Angular 1.0.x and 1.2.x and higher. With Angular versions greater than 1.3.x, you cannot declare a global constructor function and use it with ng-controller)

like image 170
Sergei Panfilov Avatar answered Nov 15 '22 19:11

Sergei Panfilov


If you're using the ng-controller with "controller as" syntax, be sure to check that the name of the controller is correct.

My case:

//controller register    
angular.module("myApp").controller("someController", SomeController)

//in my code
<div ng-controller="SomeController as vm"></div>

Notice that I used ng-controller="SomeController as vm", where SomeController has a capital S. It should have been with a lowercase s because that's how I registered it.

So, check that your controller name is correct.

like image 31
Cosmin Bacanu Avatar answered Nov 15 '22 19:11

Cosmin Bacanu