Error: [ng:areq] from angular controller

Question

This is a long shot, but has anyone seen this error before? I am trying to add 'Transporters' using express, angular and mongoDB. I get this error whenever I access a page ruled by the transporters controller:

Error: [ng:areq] http://errors.angularjs.org/1.2.12/ng/areq?p0=TransportersController&p1=not%20aNaNunction%2C%20got%20undefined
    at Error (native)
    at http://localhost:3000/lib/angular/angular.min.js:6:450
    at tb (http://localhost:3000/lib/angular/angular.min.js:18:360)
    at Pa (http://localhost:3000/lib/angular/angular.min.js:18:447)
    at http://localhost:3000/lib/angular/angular.min.js:62:17
    at http://localhost:3000/lib/angular/angular.min.js:49:43
    at q (http://localhost:3000/lib/angular/angular.min.js:7:386)
    at H (http://localhost:3000/lib/angular/angular.min.js:48:406)
    at f (http://localhost:3000/lib/angular/angular.min.js:42:399)
    at http://localhost:3000/lib/angular/angular.min.js:42:67

The transporters controller looks like this:

'use strict';

angular.module('mean.transporters').controller('TransportersController', ['$scope', '$routeParams', '$location', 'Global', 'Transporters', function ($scope, $routeParams, $location, Global, Transporters) {
    $scope.global = Global;

    $scope.create = function() {
        var transporter = new Transporters({
            name: this.name,
            natl_id: this.natl_id,
            phone: this.phone
        });
        transporter.$save(function(response) {
            $location.path('transporters/' + response._id);
        });

        this.title = '';
        this.content = '';
    };

    $scope.remove = function(transporter) {
        if (transporter) {
            transporter.$remove();

            for (var i in $scope.transporters) {
                if ($scope.transporters[i] === transporter) {
                    $scope.transporters.splice(i, 1);
                }
            }
        }
        else {
            $scope.transporter.$remove();
            $location.path('transporters');
        }
    };

    $scope.update = function() {
        var transporter = $scope.transporter;
        if (!transporter.updated) {
            transporter.updated = [];
        }
        transporter.updated.push(new Date().getTime());

        transporter.$update(function() {
            $location.path('transporters/' + transporter._id);
        });
    };

    $scope.find = function() {
        Transporters.query(function(transporters) {
            $scope.transporters = transporters;
        });
    };

    $scope.findOne = function() {
        Transporters.get({
            transporterId: $routeParams.transporterId
        }, function(transporter) {
            $scope.transporter = transporter;
        });
    };
}]);

In my views I call the list and create methods. They generate the above error

I got this from the angular docs for ng:areq though still can't figure what's going on

AngularJS often asserts that certain values will be present and truthy using a helper function. If the assertion fails, this error is thrown. To fix this problem, make sure that the value the assertion expects is defined and truthy.

Here's the view that calls the controller public/views/transporters/list.html:

<section data-ng-controller="TransportersController" data-ng-init="find()">
    <ul class="transporters unstyled">
        <li data-ng-repeat="transporter in transporters">
            <span>{{transporter.created | date:'medium'}}</span> /
            <h2><a data-ng-href="#!/transporters/{{transporter._id}}">{{transporter.name}}</a></h2>
            <div>{{transporter.natl_id}}</div>
            <div>{{transporter.phone}}</div>
        </li>
    </ul>
    <h1 data-ng-hide="!transporters || transporters.length">No transporters yet. <br> Why don't you <a href="/#!/transporters/create">Create One</a>?</h1>
</section>

Transporters service code:

angular.module('transporterService', [])
    .factory('Transporter', ['$http', function($http){
        // all return promise objects
        return {
            get: function(){
                return $http.get('/api/transporters');
            },
            create: function(transporterData){
                return $http.post('/api/transporters', transporterData);
            },
            delete: function(id){
                return $http.delete('/api/transporters/'+id);
            }
        };
    }]);

Could you provide the code snippet that assigns the controller to a view? — Wottensprels, Feb 10 '14 at 09:59
Could you please provide the Transporters service code as well? — amoshaviv, Mar 27 '14 at 16:53
Make sure your controller is available or not. Possible solutions are controller name is misspelled or js file is not updated or saved — tk120404, May 28 '14 at 05:58
I got this error when I had an error in my controller js file. Put a line of code between an if block and an else block. I'm not usually a front-end developer, so I thought something would have stopped me from using bad javascript, but this was the first error that came up. — DaaaahWhoosh, Aug 18 '15 at 14:20

score 83 · Accepted Answer · answered Mar 28 '14 at 07:00

83

I experienced this error once. The problem was I had defined angular.module() in two places with different arguments.

Eg:

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

in other place,

var MyApp2 = angular.module('MyApp', ['ngAnimate']);

answered Mar 28 '14 at 07:00

Tharanga

2,689
1
21
18

1

dependency injection ftw – Connor Leech Jun 24 '14 at 17:59
What is the solution for this? – Magda Oct 23 '14 at 07:58
the solution is to not give two separate modules the same name. in @Tharanga's sample code, both modules have the name 'MyApp'. This is a problem; you can't redefine a module. So a solution would be to change the second module's name to 'MyOtherApp' or 'MyApp2' or anything else that isn't 'MyApp'. – Ken Bellows Apr 08 '15 at 20:15
4

In whole project code base, there should be at most one place where we can initialize app module with given name that is `var MyApp = angular.module('MyApp', []);`. and any put any injection in the [] bracket that may be required in whole code base. In rest of the files/place we should only be retrieving the app module i.e `var MyApp = angular.module('MyApp');` -- with no [] bracket. – fiberair Aug 26 '15 at 07:09

7stud · Answer 2 · 2015-10-16T00:01:50.960

I've gotten that error twice:

1) When I wrote:

var app = module('flapperNews', []);

instead of:

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

2) When I copy and pasted some html, and the controller name in the html did not exactly match the controller name in my app.js file, for instance:

index.html:

<script src="app.js"></script>
...
...
<body ng-app="flapperNews" ng-controller="MainCtrl">

app.js:

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

app.controller('MyCtrl', ....

In the html, the controller name is "MainCtrl", and in the js I used the name "MyCtrl".

There is actually an error message embedded in the error url:

Error: [ng:areq] http://errors.angularjs.org/1.3.2/ng/areq?p0=MainCtrl&p1=not%20a%20function%2C%20got%20undefined

Here it is without the hieroglyphics:

MainCtrl not a function got undefined

In other words, "There is no function named MainCtrl. Check your spelling."

score 25 · Answer 3 · answered Aug 11 '14 at 20:44

I ran into this issue when I had defined the module in the Angular controller but neglected to set the app name in my HTML file. For example:

<html ng-app>

instead of the correct:

<html ng-app="myApp">

when I had defined something like:

angular.module('myApp', []).controller(...

and referenced it in my HTML file.

ali pournemat · Answer 4 · 2019-05-29T09:09:08.437

14

you forgot to include the controller in your index.html. The controller doesn't exist.

<script src="js/controllers/Controller.js"></script>

edited May 29 '19 at 09:09

answered Aug 13 '15 at 21:07

ali pournemat

581
6
7

score 5 · Answer 5 · answered Apr 16 '15 at 05:58

5

I had same error and the issue was that I didn't inject the new module in the main application

var app = angular.module("geo", []);
...

angular
    .module('myApp', [
        'ui.router',
        'ngResource',
        'photos',
        'geo' //was missing
    ])

answered Apr 16 '15 at 05:58

Angel M.

2,692
2
32
43

Thanks for the solution, saved a lot of time. – Lalit Narayan Mishra Dec 30 '15 at 19:17

Chris · Answer 6 · 2014-06-01T19:17:18.523

4

Check the name of your angular module...what is the name of your module in your app.js?

In your TransportersController, you have:

angular.module('mean.transporters')

and in your TransportersService you have:

angular.module('transporterService', [])

You probably want to reference the same module in each:

angular.module('myApp')

edited Jun 01 '14 at 19:17

answered Jun 01 '14 at 18:18

Chris

1,533
2
17
33

score 4 · Answer 7 · edited Dec 03 '14 at 04:28

I had this error too, I changed the code like this then it worked.

html

 <html ng-app="app">

   <div ng-controller="firstCtrl">
       ...
   </div>

 </html>

app.js

(function(){

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

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

})();

You have to make sure that the name in module is same as ng-app

then div will be in the scope of firstCtrl

Jorge Casariego · Answer 8 · 2015-01-15T12:29:47.030

4

The same problem happened with me but my problem was that I wasn't adding the FILE_NAME_WHERE_IS_MY_FUNCTION.js

so my file.html never found where my function was

Once I add the "file.js" I resolved the problem

<html ng-app='myApp'>
    <body ng-controller='TextController'>
    ....
    ....
    ....
    <script src="../file.js"></script>
    </body>
</html>

:)

edited Jan 15 '15 at 12:29

answered Jan 15 '15 at 12:22

Jorge Casariego

21,948
6
90
97

Yes, this was my problem. – ben3000 Aug 07 '15 at 06:49

score 3 · Answer 9 · answered Nov 27 '15 at 12:16

3

I've got that error when the controller name was not the same (case sensitivity!):

.controller('mainCOntroller', ...  // notice CO

and in view

<div class="container" ng-controller="mainController">  <!-- notice Co -->

answered Nov 27 '15 at 12:16

Dalibor

1,430
18
42

score 3 · Answer 10 · answered May 05 '16 at 04:08

I got this same error when I included the entire controller file name in the Routes like this:

app.config(function($routeProvider) {
    $routeProvider 
    .when('/', { 
        templateUrl: 'home.html',
        controller: 'mainController.js'
    })

    .when('/portfolio', { 
        templateUrl: 'portfolio.html',
        controller: 'mainController.js'
    })
});

When it should be

app.config(function($routeProvider) {
    $routeProvider 
    .when('/', { 
        templateUrl: 'home.html',
        controller: 'mainController'
    })

    .when('/portfolio', { 
        templateUrl: 'portfolio.html',
        controller: 'mainController'
    })
});

Angular takes certain things you name like the app and controller and expounds on them in directives and across your app, take care to name everything consistently and check for this when debugging

score 2 · Answer 11 · answered Feb 26 '16 at 07:16

I know this sounds stupid, but don't see it on here yet :). I had this error caused by forgetting the closing bracket on a function and its associated semi-colon since it was anonymous assigned to a var at the end of my controller.

It appears that many issues with the controller (whether caused by injection error, syntax, etc.) cause this error to appear.

score 1 · Answer 12 · answered Aug 31 '15 at 13:35

This happened to me when I have multiple angular modules in the same page

I encountered this error when I used partial views

One partial view had

<script src="~/Scripts/Items.js"></script>
<div ng-app="SearchModule">
    <div ng-controller="SearchSomething" class="col-md-1">
        <input class="searchClass" type="text" placeholder="Search" />
    </div>
</div>

Other had

<div ng-app="FeaturedItems" ng-controller="featured">
    <ul>
        <li ng-repeat="item in Items">{{item.Name}}</li>
    </ul>
</div>

I had them in same module with different controller and it started working

score 1 · Answer 13 · answered Oct 19 '15 at 19:32

I had the same error in a demo app that was concerned with security and login state. None of the other solutions helped, but simply opening a new anonymous browser window did the trick.

Basically, there were cookies and tokens left from a previous version of the app which put AngularJS in a state that it was never supposed to reach. Hence the areq assertions failed.

score 1 · Answer 14 · answered Dec 31 '15 at 18:03

There's also another way this could happen.

In my app I have a main module that takes care of the ui-router state management, config, and things like that. The actual functionality is all defined in other modules.

I had defined a module

angular.module('account', ['services']);

that had a controller 'DashboardController' in it, but had forgotten to inject it into the main module where I had a state that referenced the DashboardController.

Since the DashboardController wasn't available because of the missing injection, it threw this error.

score 1 · Answer 15 · answered Feb 04 '16 at 11:46

1

In my case I included app.js below the controller while app.js should include above any controller like

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

answered Feb 04 '16 at 11:46

Ashwani Panwar

3,819
3
46
66

score 1 · Answer 16 · answered Feb 21 '16 at 15:56

I had done everything right other than setting controller in $stateProvider. I used filename rather than variable name.

Following code is wrong:

formApp.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

       .state('management', {
            url: '/management',
            templateUrl: 'Views/management.html',
            controller: 'Controllers/ManagementController.js'
        });

and this is the right approach;

formApp.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

       .state('management', {
            url: '/management',
            templateUrl: 'Views/management.html',
            controller: 'ManagementController'
        });

Make sure you noticed;

controller: 'ManagementController'

And for those who are curious about my controller file ManagementController.js, it looks like the this;

formApp.controller('ManagementController', ['$scope', '$http', '$filter', '$state',function(scope, http, filter, state) {
    scope.testFunc = function() {
        scope.managementMsg  = "Controller Works Fine.";
    };
}]);

For those who want a quick-start angular skeleton for above example check this link https://github.com/zaferfatih/angular_skeleton

score 1 · Answer 17 · answered Jun 12 '16 at 13:50

1

The error will be seen when your controller could not be found in the application. You need to make sure that you are correct using values in ng-app and ng-controller directives

answered Jun 12 '16 at 13:50

Wand Maker

18,476
8
53
87

score 1 · Answer 18 · edited May 23 '17 at 12:34

1

This happened to me when using ng-include, and the included page had controllers defined. Apparently that's not supported.

Controller loaded by ng-include not working

edited May 23 '17 at 12:34

Community

1
1

answered Jul 21 '16 at 09:30

Trenton D. Adams

1,805
2
16
20

score 1 · Answer 19 · answered Jul 28 '16 at 07:30

I have made a stupid mistake and wasted lot of time so adding this answer over here so that it helps someone

I was incorrectly adding the $scope variable(dependency)(was adding it without single quotes)

for example what i was doing was something like this

angular.module("myApp",[]).controller('akshay',[$scope,

where the desired syntax is like this

angular.module("myApp",[]).controller('akshay',['$scope',

score 1 · Answer 20 · answered Feb 14 '17 at 14:42

// include controller dependency in case of third type

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

// first type to declare controller // this doesn't work well

var FirstController = function($scope) {
    $scope.val = "First Value";
}

//Second type of declaration

app.controller('FirstController', function($scope) {
    $scope.val = "First Controller";
});

// Third and best type

angular.module('controller',[]).controller('FirstController', function($scope) {
    $scope.val = "Best Way of Controller";
});

Error: [ng:areq] from angular controller

20 Answers20

Linked