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);
            }
        };
    }]);

Solution 1

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']);

Solution 2

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."

Solution 3

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.

Solution 4

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

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

Solution 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
    ])

View more solutions

Comments

[Connor Leech]

dependency injection ftw

[Magda]

What is the solution for this?

[Ken Bellows]

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'.

[ben3000]

Yes, this was my problem.

[fiberair]

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.

[Lalit Narayan Mishra]

Thanks for the solution, saved a lot of time.