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 controlled by a conveyor 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 conveyor controller is as follows:

 '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 a list and create methods. They generate the above error

I got this from angular docs for ng: areq , although I still can't figure out what is going on

AngularJS often claims that some values ​​will be present and true using a helper function. If the statement fails, this error occurs. To resolve this issue, ensure that the value that is awaiting approval is certain and true.

Here is 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> 

Conveyor 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 once experienced this error. The problem is that I defined angular.module () in two places with different arguments.

For example:

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

in the other place,

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

Answer 2

I got this error twice:

1) When I wrote:

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

instead:

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

2) When I copy and paste some html, and the controller name in html does not exactly match the controller name in the app.js file, for example:

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 html, the name of the controller is "MainCtrl", and in js I used the name "MyCtrl".

There is an error message in the error url:

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

Here it is without hieroglyphs:

MainCtrl does not have an undefined function

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

Answer 3

I ran into this problem when I defined a module in an Angular controller, but forgot to specify the application name in my HTML file. For example:

 <html ng-app> 

instead of the correct one:

 <html ng-app="myApp"> 

when i defined something like:

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

and refers to it in my HTML file.

Answer 4

You forgot to include the controller in your index.html. The controller does not exist.

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

Answer 5

I had the same error and the problem was that I did not introduce a new module in the main application

 var app = angular.module("geo", []); ... angular .module('myApp', [ 'ui.router', 'ngResource', 'photos', 'geo' //was missing ]) 

Answer 6

Check your angular module name ... what is the name of your module name in 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:

 angular.module('myApp') 

Answer 7

I also had this error, 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 need to make sure the name in the module is the same as ng-app

then the div will be in the area of ​​firstCtrl

Answer 8

The same thing happened to me, but my problem was that I did not add FILE_NAME_WHERE_IS_MY_FUNCTION.js

so my file.html did not find where my function was

As soon as I add "file.js", I solved the problem

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

:)

Answer 9

I have this error when the controller name was not the same (case sensitivity!):

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

and in sight

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

Answer 10

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

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

When should it be

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

Angular takes certain things that you call both the application and the controller, and sets them out in directives and in your application, try to point and verify this all in sequence while debugging

Answer 11

This happened to me when I have several angular modules on the same page

I ran into this error when using 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> 

Others had

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

I had them in the same module with another controller, and it started working

Answer 12

I had the same error in a demo application that related to security status and login. None of the other solutions helped, but just opening a new anonymous browser window did the trick.

Basically, cookies and tokens were removed from the previous version of the application, which put AngularJS in a state that was never supposed to be reached. Consequently, the areq statements failed.

Answer 13

There may also be another way.

In my application, I have a main module that takes care of managing, configuring, and setting up the state of ui-router. Actual functionality is defined in other modules.

I defined a module

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

in which there was a DashboardController controller, but forgot to enter it in the main module, where I had the state that the DashboardController referred to.

Since the DashboardController was not available due to lack of injection, it threw this error.

Answer 14

In my case, I turned on app.js under the controller, and app.js should include above any controller, for example

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

Answer 15

I did everything right, except for setting up the controller in $ stateProvider. I used the file name, not the variable name.

The following code is invalid:

 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 notice:

controller: 'ManagementController'

And for those who are interested in my ControlController.js control file, it looks like 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 the angular quick launch skeleton for the example above, check out this link https://github.com/zaferfatih/angular_skeleton

Answer 16

I know this sounds silly, but I don’t see it here yet :). I had this error caused by forgetting the closing parenthesis of the function and the associated semicolon, because it was anonymous, assigned by var at the end of my controller.

It seems that many problems with the controller (caused by an injection error, syntax, etc.) cause this error to occur.

Answer 17

An error will be detected when your controller is not found in the application. You need to make sure that you use the values ​​in the ng-app and ng-controller directives correctly

Answer 18

This happened to me when using ng-include, and the controllers were defined on the included page. This does not seem to be supported.

The controller loaded by ng-include does not work

Answer 19

I made a stupid mistake and spent a lot of time, so I am adding this answer here to help someone

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

for example what i was doing was something like this

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

where the required syntax is similar to this

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

Answer 20

// enable controller dependency in case of the third type

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

// first type to declare the controller // this does not work well

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

// The 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"; });