web-dev-qa-db-ja.com

エラー：[ng：areq] from angular controller

これはロングショットですが、以前にこのエラーを見たことがありますか？ express、angular、およびmongoDBを使用して「トランスポーター」を追加しようとしています。トランスポーターコントローラーによって支配されているページにアクセスするたびに、このエラーが表示されます。

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 の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);
            }
        };
    }]);
javascriptangularjsangularjs-controllermean-stack
62
Connor Leech

このエラーは一度発生しました。問題は、引数が異なる2つの場所でangle.module（）を定義していたことです。

例えば：

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

他の場所で、

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

私はそのエラーを2回受けました：

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 =not％20a％20function％2C％20got％20未定義

ここでは象形文字なしです。

MainCtrlは未定義の関数ではありません

つまり、「MainCtrlという名前の関数はありません。スペルを確認してください。」

32
7stud

Angularコントローラーでモジュールを定義したが、HTMLファイルにアプリ名を設定することを怠ったときに、この問題に遭遇しました。例えば：

<html ng-app>

正しい代わりに：

<html ng-app="myApp">

次のようなものを定義したとき：

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

それを私のHTMLファイルで参照しました。

25
Anthony Panozzo

index.htmlにコントローラーを含めるのを忘れました。コントローラーが存在しません。

<script src="js/controllers/Controller.js"></script>
13
ali pournemat

私は同じエラーがあり、問題はメインアプリケーションに新しいモジュールを挿入しなかったことです

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

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

私もこのエラーが発生しました。このようにコードを変更すると、うまくいきました。

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のスコープになります

4
tobyui

angularモジュールの名前を確認してください... app.jsのモジュールの名前は何ですか？

TransportersControllerには次のものがあります。

angular.module('mean.transporters')

transportersServiceには次のものがあります。

angular.module('transporterService', [])

おそらく、それぞれで同じモジュールを参照する必要があります。

angular.module('myApp')
4
Chris

私と同じ問題が発生しましたが、私の問題は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>

:)

4
Jorge Casariego

コントローラー名が同じではない場合（大文字と小文字の区別！）

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

そして視界内

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

次のようにルートにコントローラーファイル名全体を含めると、同じエラーが発生しました。

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は、アプリやコントローラーなど、特定の名前を付けて、ディレクティブやアプリ全体でそれらを説明し、一貫してすべてに名前を付け、デバッグ時にこれを確認します

2
Virge Assault

これは馬鹿げているように聞こえますが、まだここには表示されません:)。このエラーは、コントローラーの終わりにある変数に匿名で割り当てられていたため、関数とそれに関連するセミコロンの閉じ括弧を忘れたために発生しました。

コントローラーに関する多くの問題（注入エラー、構文などが原因であるかどうか）がこのエラーを表示するようです。

2
Nick Brady

セキュリティとログイン状態に関係するデモアプリでも同じエラーが発生しました。他の解決策はどれも役に立たなかったが、単に新しい匿名ブラウザウィンドウを開くがうまくいった。

基本的に、AngularJSが到達するはずのない状態にした前のバージョンのアプリからのCookieとトークンが残っていました。したがって、areqアサーションは失敗しました。

1
dirkjot

これは、同じページに複数のangularモジュールがあるときに起こりました

部分ビューを使用したときにこのエラーが発生しました

1つの部分ビューには

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

同じモジュールに別のコントローラーがあり、動作し始めました

1
Vignesh Subramanian

これが起こる別の方法もあります。

私のアプリには、UIルーターの状態管理、構成などを処理するメインモジュールがあります。実際の機能はすべて他のモジュールで定義されています。

モジュールを定義していた

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

コントローラ「DashboardController」が含まれていましたが、DashboardControllerを参照する状態のメインモジュールにそれを挿入するのを忘れていました。

DashboardControllerはインジェクションがないため使用できなかったため、このエラーがスローされました。

1
Kyle S

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

上記の例のクイックスタートangularスケルトンが必要な場合は、このリンクを確認してください https://github.com/zaferfatih/angular_skeleton

1
Zafer Fatih Koyuncu

私は愚かな間違いを犯し、多くの時間を無駄にしたので、この答えをここに追加して、誰かを助ける

私は間違って$ scope変数（依存関係）を追加していました（一重引用符なしで追加していました）

たとえば、私がやっていたことはこのようなものでした

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

目的の構文は次のとおりです

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

このエラーは、アプリケーションでコントローラーが見つからなかったときに表示されます。 ng-appおよびng-controllerディレクティブの値を使用して正しいことを確認する必要があります

1
Wand Maker

私の場合、コントローラの下にapp.jsを含めましたが、app.jsは次のようなコントローラの上に含める必要があります

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

これは、ng-includeを使用しているときに起こり、含まれているページにはコントローラーが定義されていました。どうやらそれはサポートされていません。

ng-includeによって読み込まれたコントローラーが機能しない

1
Trenton D. Adams

// 3番目のタイプの場合、コントローラーの依存関係を含める

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

//コントローラを宣言する最初のタイプ//これはうまく機能しません

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

// 2番目のタイプの宣言

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

// 3番目に最適なタイプ

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