错误：来自角度控制器的 [ng:areq]答案

【问题标题】：Error: [ng:areq] from angular controller错误：来自角度控制器的 [ng:areq]
【发布时间】：2014-03-07 13:26:08
【问题描述】：

这是一个很长的镜头，但是以前有人见过这个错误吗？我正在尝试使用 express、angular 和 mongoDB 添加“Transporters”。每当我访问由传输控制器控制的页面时，我都会收到此错误：

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

transporters 控制器如下所示：

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

在我看来，我调用列表并创建方法。他们产生上述错误

我从 ng:areq 的 angular 文档中得到了这个，但仍然不知道发生了什么

AngularJS 经常断言某些值将存在且真实使用辅助函数。如果断言失败，则抛出此错误。要解决此问题，请确保断言期望的值是定义和真实。

这是调用控制器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>

运输服务代码：

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

【问题讨论】：

您能提供将控制器分配给视图的代码 sn-p 吗？
能否请您也提供Transporters 服务代码？
知道了，但我想我以某种方式解决了这个问题
确保您的控制器可用或不可用。可能的解决方案是控制器名称拼写错误或 js 文件未更新或保存
当我的控制器 js 文件中出现错误时出现此错误。在 if 块和 else 块之间放置一行代码。我通常不是前端开发人员，所以我认为有些东西会阻止我使用糟糕的 javascript，但这是出现的第一个错误。

标签： javascript angularjs angularjs-controller mean-stack

【解决方案1】：

您忘记在 index.html 中包含控制器。控制器不存在。

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

【讨论】：

【解决方案2】：

//在第三种情况下包含控制器依赖

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

// 声明控制器的第一个类型 // 这不好用

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

//第二种声明方式

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

// 第三种也是最好的类型

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

【讨论】：

【解决方案3】：

我犯了一个愚蠢的错误并浪费了很多时间，所以在这里添加这个答案以便它帮助某人

我错误地添加了 $scope 变量（依赖）（添加时没有单引号）

例如我正在做的事情是这样的

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

所需的语法是这样的

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

【讨论】：

【解决方案4】：

这发生在我使用 ng-include 时，并且包含的页面定义了控制器。显然不支持。

Controller loaded by ng-include not working

【讨论】：

【解决方案5】：

当您的控制器无法在应用程序中找到时，就会出现该错误。您需要确保使用 ng-app 和 ng-controller 指令中的值是正确的

【讨论】：

【解决方案6】：

当我将整个控制器文件名包含在这样的路由中时，我遇到了同样的错误：

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

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

应该是什么时候

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

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

Angular 采用您命名的某些东西，例如应用程序和控制器，并在指令和整个应用程序中对它们进行阐述，注意统一命名所有内容并在调试时检查这一点

【讨论】：

【解决方案7】：

我知道这听起来很愚蠢，但在这里还没有看到它:)。由于忘记了函数上的右括号及其关联的分号，因此我遇到了此错误，因为它是匿名分配给控制器末尾的 var 的。

看来控制器的很多问题（无论是注入错误、语法等引起的）都会导致出现这个错误。

【讨论】：

【解决方案8】：

除了在 $stateProvider 中设置控制器之外，我所做的一切都是正确的。我使用文件名而不是变量名。

以下代码错误：

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

    $stateProvider

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

这是正确的方法；

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

    $stateProvider

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

确保你注意到了；

控制器：'ManagementController'

对于那些对我的控制器文件 ManagementController.js 感到好奇的人，它看起来像这样；

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

对于想要快速启动上述示例的角骨架的人，请查看此链接https://github.com/zaferfatih/angular_skeleton

【讨论】：

【解决方案9】：

在我的例子中，我将app.js 包含在控制器下方，而app.js 应该包含在任何控制器上方，例如

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

【讨论】：

【解决方案10】：

还有另一种可能发生的方式。

在我的应用程序中，我有一个主模块，负责处理 ui-router 状态管理、配置等。实际功能都在其他模块中定义。

我已经定义了一个模块

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

其中有一个控制器“DashboardController”，但忘记将其注入到主模块中，在那里我有一个引用 DashboardController 的状态。

由于缺少注入导致 DashboardController 不可用，因此引发了此错误。

【讨论】：

【解决方案11】：

当控制器名称不同时，我遇到了这个错误（区分大小写！）：

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

在视野中

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

【讨论】：

【解决方案12】：

我在一个与安全性和登录状态有关的演示应用程序中遇到了同样的错误。其他解决方案都没有帮助，但只需打开一个新的匿名浏览器窗口就可以了。

基本上，以前版本的应用程序留下的 cookie 和令牌使 AngularJS 处于它不应该达到的状态。因此areq 断言失败。

【讨论】：

【解决方案13】：

我已经两次收到该错误：

1) 我写的时候：

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

代替：

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

2）当我复制粘贴一些html时，html中的控制器名称与我的app.js文件中的控制器名称不完全匹配，例如：

index.html:

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

app.js：

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

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

在html中，控制器名称为“MainCtrl”，而在js中我使用了名称“MyCtrl”。

错误url中其实嵌入了一条错误信息：

错误：[ng:areq] http://errors.angularjs.org/1.3.2/ng/areq?p0=MainCtrl&p1=不是%20a%20函数%2C%20得到%20未定义

这里没有象形文字：

MainCtrl 不是一个未定义的函数

换句话说，“没有名为 MainCtrl 的函数。请检查您的拼写。”

【讨论】：

【解决方案14】：

当我在同一页面中有多个角度模块时发生这种情况

我在使用局部视图时遇到了这个错误

一个局部视图有

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

其他有

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

我将它们放在具有不同控制器的同一模块中，它开始工作

【讨论】：

【解决方案15】：

我有同样的错误，问题是我没有在主应用程序中注入新模块

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

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

【讨论】：

感谢您的解决方案，节省了很多时间。

【解决方案16】：

同样的问题发生在我身上，但我的问题是我没有添加 FILE_NAME_WHERE_IS_MY_FUNCTION.js

所以我的 file.html 从来没有找到我的函数在哪里

添加“file.js”后，问题就解决了

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

:)

【讨论】：

是的，这是我的问题。

【解决方案17】：

我也有这个错误，我改变了这样的代码然后它工作了。

html

 <html ng-app="app">

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

 </html>

app.js

(function(){

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

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

})();

你必须确保模块中的名称与 ng-app 相同

那么div就会在firstCtrl的范围内

【讨论】：

【解决方案18】：

我在 Angular 控制器中定义了模块但忽略了在我的 HTML 文件中设置应用程序名称时遇到了这个问题。例如：

<html ng-app>

而不是正确的：

<html ng-app="myApp">

当我定义了类似的东西时：

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

并在我的 HTML 文件中引用它。

【讨论】：

【解决方案19】：

检查您的 Angular 模块的名称...您的 app.js 中的模块名称是什么？

在您的 TransportersController 中，您有：

angular.module('mean.transporters')

在你的 TransportersService 中你有：

angular.module('transporterService', [])

您可能希望在每个模块中引用相同的模块：

angular.module('myApp')

【讨论】：

【解决方案20】：

我曾经遇到过这个错误。问题是我在两个地方用不同的参数定义了 angular.module()。

例如：

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

在其他地方，

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

【讨论】：

依赖注入ftw
解决办法是什么？
解决方案是不要给两个单独的模块同名。在@Tharanga 的示例代码中，两个模块的名称都为“MyApp”。这是个问题;你不能重新定义一个模块。因此，解决方案是将第二个模块的名称更改为“MyOtherApp”或“MyApp2”或其他任何不是“MyApp”的名称。
在整个项目代码库中，最多应该有一个地方我们可以用给定的名字var MyApp = angular.module('MyApp', []);来初始化应用程序模块。并且将任何注入在整个代码库中可能需要的 [] 括号中。在其余文件/位置中，我们应该只检索应用程序模块，即var MyApp = angular.module('MyApp');——没有 [] 括号。