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

Answer 1

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

Answer 2

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.

Answer 3

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 4

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

Answer 5

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

Answer 6

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