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

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

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