AngularJS - 'Controller not a function: Seperate controller files

Question

I am getting the 'Controller is not a function error in my application.

From what I have read the most common issue is that it the controller file is not referenced in the html page - this is not the case for me.

I do not get the error when I have included the controller in the same file as declaring the module, but when I am using seperate files for each controller.

Here is my folder structure:

app.js:

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

myApp.config(function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'assets/views/mainView.html',
        controller: 'assets/controllers/mainController.js'
    });
});

mainController.js

var myApp = angular.module('myApp');

myApp.controller('mainController', ['$scope', function($scope){
    $scope.name = "test";
}]);

I have also read that when you declare a module, the array braces [] create a new module so I took them out of the module in mainController.js.

It works if I do this:

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

myApp.config(function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'assets/views/mainView.html',
        controller: 'mainController.js'
    });
});


myApp.controller('mainController', ['$scope', function($scope){
    $scope.name = "hi";
}]);

I have referenced the controller like this in my index.html in the head section:

<script src="assets/scripts/js/app.js"></script>
<script src="assets/controllers/mainController.js"></script>

Remove var myApp = angular.module('myApp'); from controller file. — Ashish Bairagi
– Ashish Bairagi, Commented Mar 11, 2016 at 8:44
you have given your controller's file path in config function like this : controller: 'assets/controllers/mainController.js' whereas as far i know it is the controller name and not path something like this in your case : controller: 'mainController'. Try doing this and let me know — Neha Saggam
– Neha Saggam, Commented Mar 11, 2016 at 9:10

Neha Saggam · Accepted Answer · 2016-03-11 09:18:11Z

2

When you are having controller in another file no need to give path of the controller there which you have given in your config

    myApp.config(function ($routeProvider) {
$routeProvider.when('/', {
    templateUrl: 'assets/views/mainView.html',
     //Remove this
    //controller: 'assets/controllers/mainController.js'
     //and then try this
       controller: 'mainController'
   });
});

answered Mar 11, 2016 at 9:18

Neha Saggam

1751 silver badge9 bronze badges

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

1 Comment

AnonDCX Over a year ago

Thanks, I would have never guessed that you dont need to specify the path to the controller...

kmhigashioka · Accepted Answer · 2016-03-11 12:30:36Z

1

Are you using IIFE? If not you should not assign angular module var myApp = angular.module('myApp'); on your mainController.js as it overwrite your myApp variable since it is treated as globe variable.

If you want to apply IIFE your code should be:

app.js

    (function () {
         var myApp = angular.module('myApp', ['ngRoute']);

        myApp.config(function ($routeProvider) {
            $routeProvider.when('/', {
                templateUrl: 'assets/views/mainView.html',
                controller: 'mainController'
            });
        });
    })();

mainController.js

    (function () {
        var myApp = angular.module('myApp');

        myApp.controller('mainController', ['$scope', function($scope){
            $scope.name = "test";
        }]);

    })();

edited Mar 11, 2016 at 12:30

answered Mar 11, 2016 at 8:57

kmhigashioka

5315 silver badges14 bronze badges

Collectives™ on Stack Overflow

AngularJS - 'Controller not a function: Seperate controller files

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related