controller is not a function error with AngularJS 1.5.7

Question

I've a very simple app with no code in it yet. I've removed it to check for this error that I am getting - "angular.js:13708 Error: [ng:areq] Argument 'ClientFileConfigController' is not a function, got undefined"

I've followed the similar patter in my angularjs app (1.5.3) and it works fine. This code is using angularjs (1.5.7) and the only difference is I used bower to individually chose my packages, rather than using nuget.

I am unable to decode this error :-(

app.js

(function () {

    var app = angular.module('ConfigApp', ['ngRoute', 'ngAnimate', 'TreeWidget']);

    app.config(['$routeProvider', function ($routeProvider) {
        var viewBase = '/app/ConfigApp/views/';

        $routeProvider
            .when('/clients', {
                controller: 'ClientFileConfigController',
                templateUrl: viewBase + 'clients.html',
                controllerAs: 'vm'
            })
            //.when('/clients/:clientId/:fileId', {
            //    controller: 'clientfileEditController',
            //    templateUrl: viewBase + 'edit.html',
            //    controllerAs: 'vm'
            //})
            .otherwise({ redirectTo: '/clients' });

    }]);

}());

clientfileConfigController.js

(function(){
    var injectParams = ['$scope'];

    var ClientFileConfigController = function ($scope) {

    }

    ClientFileConfigController.$inject = injectParams;
    angular.module('ConfigApp').controller('ClientFileConfigController', ClientFileConfigController)
}());

index.html

<html ng-app="ConfigApp">
<head>
    <title>Client File Angular Tree Widget</title>
    <meta charset="utf-8" />
</head>
<body ng-cloak>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#/clients">Clients</a></li>
                </ul>
            </div>
        </div>
    </nav>
    .top-buffer { margin-top:20px; }
    <div class="slide-animation-container">
        <div ng-view id="ng-view" class="slide-animation"></div>
    </div>
</body>
</html>

clients.html

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>Hello World</h1>

    <!--<tree nodes='treeNodes'>-->
</body>
</html>

Error Image

score 1 · Answer 1 · answered Jul 15 '16 at 15:01

1

Change your IIFE to this structure:

(function (){
   //your code here
})()

and include your controller in the script

answered Jul 15 '16 at 15:01

ocespedes

1,233
4
14
27

Isn't it the same way I used? (function(){ //clientfileConfigController here }()); – vrkala Jul 15 '16 at 15:07
@vrkala no...look at how you closed it and invoked it – charlietfl Jul 15 '16 at 15:08
I changed but no luck! – vrkala Jul 15 '16 at 15:11
I observed something though...When I do F12 and go to "sources" in chrome, I don't see the controller js file... – vrkala Jul 15 '16 at 15:12
1

@ocespedes On a different note, a quick question why IIFE needs to be defined the way you told...while it is working for me the way I defined? – vrkala Jul 15 '16 at 15:19
You can have more info here http://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript about IIFE – ocespedes Jul 15 '16 at 17:16

score 0 · Accepted Answer · answered Jul 15 '16 at 15:00

0

You get this error on two scenarios:

Controller not included in script. (undefined)
Injector dependency couldn't be resolved.

answered Jul 15 '16 at 15:00

Shintu Joseph

962
7
19

The only injector dependency here is $scope for the controller. With AngularJS already referenced, I don't see an issue with this. I've put the controller script as mentioned in my code. – vrkala Jul 15 '16 at 15:07
Wat abt the IIFE as @ocespedes said, I dint notice it though – Shintu Joseph Jul 15 '16 at 15:08
I might not have included the script file properly...let me review – vrkala Jul 15 '16 at 15:13
Thank you...not linking the controller js file properly (typo) in my html is the main issue...so, your point 1 (controller not included in script is the correct hint) – vrkala Jul 15 '16 at 15:18

score 0 · Answer 3 · answered Jul 15 '16 at 15:16

0

I would say that you need to include the js files in your index html page. Angular is looking for your controller but there is no file specified that contains the code for it

answered Jul 15 '16 at 15:16

dmunk

31
3

controller is not a function error with AngularJS 1.5.7

3 Answers3