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

Question

这是一个很长的镜头，但是以前有人见过这个错误吗？我正在尝试使用 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

运输者控制器如下所示：

'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的角度文档中得到了这个，但仍然无法弄清楚发生了什么

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

score 83 · Accepted Answer

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

例如：

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

在其他地方，

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

score 33 · Accepted Answer

我已经两次收到该错误：

1）当我写：

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

代替：

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

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

索引.html：

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

应用程序.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= not %20 a %20 function %2C%20 got %20 undefined

这里没有象形文字：

MainCtrl 不是一个未定义的函数

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

score 25 · Accepted Answer

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

<html ng-app>

而不是正确的：

<html ng-app="myApp">

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

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

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

score 14 · Accepted Answer

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

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

score 5 · Accepted Answer

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

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

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

score 4 · Accepted Answer

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

在您的 TransportersController 中，您有：

angular.module('mean.transporters')

在您的 TransportersService 中，您有：

angular.module('transporterService', [])

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

angular.module('myApp')

score 4 · Accepted Answer

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

html

 <html ng-app="app">

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

 </html>

应用程序.js

(function(){

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

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

})();

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

那么 div 将在 firstCtrl 的范围内

score 4 · Accepted Answer

我也遇到了同样的问题，但我的问题是我没有添加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>

:)

score 3 · Accepted Answer

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

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

并且在视野中

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

score 2 · Accepted Answer

当我在路由中包含整个控制器文件名时，我得到了同样的错误，如下所示：

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

score 2 · Accepted Answer

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

似乎控制器的许多问题（无论是由注入错误、语法等引起的）都会导致出现此错误。

score 1 · Accepted Answer

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

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

我定义了一个模块

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

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

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

score 1 · Accepted Answer

当在应用程序中找不到您的控制器时，将看到该错误。您需要确保使用ng-app和ng-controller指令中的值是正确的

score 1 · Accepted Answer

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

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

例如我正在做的是这样的

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

所需的语法是这样的

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

score 1 · Accepted Answer

除了在 $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.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

score 1 · Accepted Answer

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

ng-include 加载的控制器不起作用

score 1 · Accepted Answer

// 在第三种类型的情况下包含控制器依赖项

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

当我在同一页面中有多个角度模块时，这发生在我身上

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

一种局部观点有

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

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

score 1 · Accepted Answer

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

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

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

20 回答 20

Related

Reference