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

时间:2014-02-10 09:33:08

标签: javascript angularjs angularjs-controller mean-stack

这是一个很长的镜头,但有没有人见过这个错误?我试图使用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);
            }
        };
    }]);

19 个答案:

答案 0 :(得分:80)

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

例如:

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

在其他地方,

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

答案 1 :(得分:32)

我有两次错误:

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

错误网址中实际存在错误消息:

  

错误:[ng:areq]   http://errors.angularjs.org/1.3.2/ng/areq?p0= MainCtrl &安培; P1 = <强>不%20的%20的功能%2C%20 <强>得到 20%的未定义

这里没有象形文字:

  

MainCtrl不是一个未定义的函数

换句话说,“没有名为MainCtrl的功能。检查你的拼写。”

答案 2 :(得分:25)

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

<html ng-app>

而不是正确的:

<html ng-app="myApp">

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

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

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

答案 3 :(得分:13)

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

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

答案 4 :(得分:5)

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

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

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

答案 5 :(得分:4)

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

在您的TransportersController中,您有:

angular.module('mean.transporters')

在您的TransportersService中,您有:

angular.module('transporterService', [])

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

angular.module('myApp')

答案 6 :(得分:4)

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

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的范围内

答案 7 :(得分:4)

同样的问题发生在我身上,但我的问题是我没有添加 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>

:)

答案 8 :(得分:3)

当控制器名称不相同时(区分大小写!),我得到了错误:

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

并在视野中

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

答案 9 :(得分:2)

我知道这听起来很愚蠢,但是在这里看不到它:)。忘记函数及其相关的分号的结束括号导致此错误,因为它是匿名分配给我的控制器末尾的var。

控制器的许多问题(无论是由注入错误,语法等引起)都会导致出现此错误。

答案 10 :(得分:2)

当我在路由中包含整个控制器文件名时,我得到了同样的错误:

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会将您定义的某些内容视为应用和控制器,并在指令和应用中对其进行详细说明,注意一致地命名所有内容并在调试时检查这一点

答案 11 :(得分:1)

//包含第三种类型的控制器依赖

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

答案 12 :(得分:1)

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

我错误地添加了$ scope变量(依赖项)(在没有单引号的情况下添加它)

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

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

所需语法如下

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

答案 13 :(得分:1)

使用ng-include时发生了这种情况,并且包含的​​页面已定义了控制器。显然不支持。

Controller loaded by ng-include not working

答案 14 :(得分:1)

当在应用程序中找不到您的控制器时,将会看到错误。您需要确保使用ng-appng-controller指令

中的值是正确的

答案 15 :(得分:1)

在我的情况下,我在控制器下方添加了app.js,而app.js应该包含在

之类的控制器之上
<script src="js/app.js"></script> 
<script src="js/controllers/mainCtrl.js"></script>

答案 16 :(得分:1)

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

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

我已经定义了一个模块

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

有一个控制器&#39; DashboardController&#39;在其中,但忘记将其注入主模块,在那里我有一个引用DashboardController的状态。

由于DashboardController由于缺少注入而无法使用,因此它抛出了此错误。

答案 17 :(得分:1)

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

基本上,从应用程序的先前版本中留下了cookie和令牌,这使得AngularJS处于一个从未应该达到的状态。因此areq断言失败了。

答案 18 :(得分:1)

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

我在使用部分视图时遇到此错误

一个部分视图

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

其他人

public class ProductRepository : IDisposable
{
    private readonly IOtherService m_OtherService;

    public ProductRepository(IOtherService other_service)
    {
        m_OtherService = other_service;
    }

    ...
}

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