Argument 'mainController' is not a function, got undefined 1.4

Question

There are a ton of examples of using the newer angular directives like ng-blur, ng-focus, form validation, etc. They all work great in a single page, or in plinkr, jsfiddle, etc. with the exception of the people who try to define the function on the global namespace, that mistake is WELL documented.

However, I was having a different problem.

I was using an example from Scotch.io. This one works great...until you introduce it into an SPA that is using angular-route :(

After many hours of fighting with the error 'Argument 'mainController' is not a function, got undefined', I found the answer in a comment from Hajder Rabiee.Thanks Hadjer, Love you man!

score 0 · Answer 1 · edited May 23 '17 at 12:19

Hajder left this comment and in it, he says:

If you're using routes (high probability) and your config has a reference to a controller in a module that's not declared as dependency then initialisation might fail too.

E.g assuming you've configured ngRoute for your app, like

angular.module('yourModule',['ngRoute'])
.config(function($routeProvider, $httpProvider) { ... });

Be careful in the block that declares the routes,

.when('/resourcePath', { 
templateUrl: 'resource.html',
controller: 'secondModuleController' //lives in secondModule
});

Declare secondModule as a dependency after 'ngRoute' should resolve the issue. I know I had this problem.

Even with this help it took me a minute to get it working, so I thought I would share my sample code here to help the next poor bastard that gets stuck on this.

First, in the place where i declare my routes:

var app = angular.module('sporkApp', ['ngRoute','validationApp']);
app.config(function ($routeProvider) {
    $routeProvider
        .when('/home',
        {
            controller: 'HomeController',
            templateUrl: 'home/home.template.html'
        })
        .when('/tags',
        {
            controller: 'TagsController',
            templateUrl: 'tags/tags.template.html'
        })
        .when('/test',
        {
            controller: 'mainController',
            templateUrl: 'test/test.template.html'
        })
        .otherwise({ redirectTo: '/home' });
});

Then, you need to add your controller code somewhere, where it will get loaded in your shell page:

// create angular app
var validationApp = angular.module('validationApp', []);

// create angular controller
validationApp.controller('mainController', function($scope) {

    // function to submit the form after all validation has occurred            
    $scope.submitForm = function() {

        // check to make sure the form is completely valid
        if ($scope.userForm.$valid) {
            alert('our form is amazing');
        }

    };

});

Finally, you need to add the corresponding ng-app and ng-controller to some page element that wraps the controls you want to validate. I put the following inside of a div tag:

<div ng-app="validationApp" ng-controller="mainController">

Argument 'mainController' is not a function, got undefined 1.4

1 Answers1