Angular Controller error 'Argument 'MainCtrl' is not a function, got undefined'

Question

At some point this afternoon I suddenly got the following AngularJS error: Argument 'MainCtrl' is not a function, got undefined

I have a good version still running in Chrome without any errors, so I'm attempting to find the diffs - however to no avail.

I would appreciate any advice on how to fix the error Argument 'MainCtrl' is not a function, got undefined

I load the controllers.js file in index.html - within the body section:

 <!DOCTYPE html>
 <html ng-app="rage.ui">

 <head>
     <!-- loading css files here... -->
 </head>

 <body ng-controller="MainCtrl as main">

  <!-- Wrapper-->
  <div id="wrapper">
     <!-- Navigation -->
  </div>

  <script src="app/app.js"></script>
  <script src="app/config.js"></script>
  <script src="app/js/controllers.js"></script>

</body>

Here's the MainCtrl in my controllers.js file (also loaded in index.html) -

* MainCtrl - controller */

(function () {
 'use strict';
 angular.module('rage.ui')
    .controller('MainCtrl', ['$scope', '$interval', '$window', 'widgetDefinitions', main])
    .factory('widgetDefinitions', [widgetDefinitions])
    .value('defaultWidgets', [
    { name: 'random' },
    { name: 'time' },
    { name: 'datamodel' },
    {
        name: 'random',
        style: {
            width: '50%'
        }
    },
    {
        name: 'time',
        style: {
            width: '50%'
        }
    }
    ]);

function main($scope, $interval, $window, widgetDefinitions, defaultWidgets) {
    this.userName = 'Risk user';
    // ...
}
  function widgetDefinitions(RandomDataModel) {
    return [
      {
          name: 'random',
          directive: 'wt-scope-watch',
          attrs: {
              value: 'randomValue'
          }
      }
      {
          name: 'treegrid',
          templateUrl: 'app/views/templateGadget/treeGrid.html',
          title: "Tree Grid Report",
          attrs: {
              width: '50%',
              height: '250px'
          }
      }
    ];
  }

})();

in my attempt to add a new 'gadgetModelFactory' to the malhar Angular-Dashboard framework, I broke my system. Here's the good version of my new factory, now fixed:

'use strict';

angular.module('rage').
factory('gadgetDataModel', function ($scope, WidgetDataModel) {
function gadgetDataModel() {
    var test = 123;
}

gadgetDataModel.prototype = Object.create(WidgetDataModel.prototype);
gadgetDataModel.prototype.constructor = WidgetDataModel;

angular.extend(gadgetDataModel.prototype = {        
    init: function () {
        // to be overridden by subclasses
        var dataModelOptions = this.dataModelOptions;
    },

    destroy: function () {
        // to be overridden by subclasses
        WidgetDataModel.prototype.destroy.call(this);
        $interval.cancel(this.intervalPromise);
    }
});

});

and my app.config:

(function () {
angular.module('rage.ui', [
    'ui.router',
    'ui.bootstrap',
    'ui.dashboard'
])
})();

@PSL - I was trying to keep the code short and concise so I inadvertently left out ng-app. Please see my revised index.html, as well as my app.js — bob.mazzo
– bob.mazzo, Commented Dec 13, 2014 at 0:05
Change main to be vm so MainCtrl as vm, because your alias and your function can't the same. — Omar.Alani
– Omar.Alani, Commented Dec 13, 2014 at 0:08
@bob Don't see any issue with the code you have provided. plnkr.co/edit/Y2kHhOclaKJVCZmiwHHA?p=preview Do you see any other error in the console? Are you sure your controller file is loaded? — PSL
– PSL, Commented Dec 13, 2014 at 0:09
@bob Yeah i know.. that was just in the examples not really for real life usage..IMHO imagine the case (which is most often) you have nested controller what would you name them? vm1 vm2? Also it will be so unreadable and i believe his example were more on attaching controller instance to scope (before the introduction of controllerAs). However my point was different in the comment above.. :) — PSL
– PSL, Commented Dec 13, 2014 at 0:35

Community · Accepted Answer · 2017-05-23 12:28:26Z

1

Have a look at other posts (AngularJS error: 'argument 'FirstCtrl' is not a function, got undefined')
Check whether you defined ng-app properly
Check whether you have listed the JS files properly in the index
Try to rewrite your controllers to the more conventional way (see egghead.io tutorials)

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Dec 13, 2014 at 0:07

AMG

7041 gold badge8 silver badges20 bronze badges

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

1 Comment

bob.mazzo Over a year ago

guys, turned out I was loading a bad factory in my index.html. Once I commented it out, my page loaded fine. Please note the "gadgetDataModel" factory which gets injected in my original post.

wibeasley · Accepted Answer · 2019-05-14 19:44:00Z

0

Maybe you have two files .js with same module name. Eg.:

file1.js:

var appControllers = angular.module('appControllers', []);

file2.js:

var appControllers = angular.module('appControllers', []);

edited May 14, 2019 at 19:44

wibeasley

5,3073 gold badges38 silver badges68 bronze badges

answered May 14, 2019 at 18:32

bart

11 bronze badge

Collectives™ on Stack Overflow

Angular Controller error 'Argument 'MainCtrl' is not a function, got undefined'

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related