Angularjs:エラー:[ng:areq]引数 'HomeController'は関数ではないため、定義されていません


109

これは、angularjsを使用してサービスファイルを作成し、コントローラーにサービスを追加するための私のデモです。

私のデモには2つの問題があります。

  • 1つは、このエラーが発生する<script src="HomeController.js">前に置いたときです<script src="MyService.js">

エラー:[ng:areq]引数 'HomeController'は関数ではないため、定義されていません

  • もう1つは、次のエラーが発生する<script src="MyService.js">前に置いたときです<script src="HomeController.js">

エラー:[$ injector:unpr]不明なプロバイダー:MyServiceProvider <-MyService

私の情報源:

ファイルIndex.html

<!DOCTYPE html>
<html >
    <head lang="en">…</head>
    <body ng-app="myApp">
        
        <div ng-controller="HomeController">
            <div ng-repeat="item in hello">{{item.id + item.name}}</div>
        </div>

        <script src="Scripts/angular.js"></script>
        <script src="Scripts/angular-route.js"></script>

        <!-- App libs -->
        <script src="app/app.js"></script>    
        <script src="app/services/MyService.js"></script>
        <script src="app/controllers/HomeController.js"></script>
    </body>
</html>

ファイルHomeController.js

(function(angular){
    'use strict';

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

    myApp.controller('HomeController',function($scope,MyService){    
        $scope.hello=[];
        $scope.hello = MyService.getHello();
    });
})(window.angular);

ファイルMyService.js

(function(angular){
    'use strict';

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

    myApp.service('MyService', function () {
        var hello =[  {id:1,name:'cuong'},
            {id:2,name:'nguyen'}];
        this.getHello = function(){
            return hello;
        };
    });

})(window.angular);

1
* .controller.jsがBundleConfig.csファイルに追加されているかどうかを確認します。これは私のものを修正します。
Syed Mohamed

回答:


210

これは新しいモジュール/アプリを作成します:

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

これはすでに作成されたモジュールにアクセスします(2番目の引数の省略に注意してください):

var myApp = angular.module('myApp');

両方のスクリプトで最初のアプローチを使用するため、基本的には以前に作成したモジュールをオーバーライドしています。

ロードされる2番目のスクリプトで、を使用しますvar myApp = angular.module('myApp');


これも私のエラーを修正しました。angular.module( 'myApp'、['ui.router'])を2つの異なるファイル(app.jsとroutes.js)に誤って残しました。配列をroutes.jsから削除すると、ユニットテストが修正されました。
Allan Bogh

64

私はこのエラーを一度経験しました。私の問題は、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>

1
大きな時間を助けました。Yeomanは、角度ジェネレーターのindex.htmlの下部にスクリプトタグを配置します。これをありがとう!
JaeGeeTee 2015

同じ問題を実行した。他のコントローラーと一緒に対応するcontroller.jsファイルを私のインデックスページに追加する必要がありました
ahmednawazbutt

21

また、コントローラーが、bodyの終了タグの直前のindex.htmlの下部にあるスクリプトタグ内で定義されていることを確認してください。

 <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/controllers/Administration.js"></script>
    <script src="scripts/controllers/Leaderboard.js"></script>
    <script src="scripts/controllers/Login.js"></script>
    <script src="scripts/controllers/registration.js"></script>

specific.html、specific.js、app.jsページですべてが正しく(同じ)スペルで記述されている場合、これで問題が解決します。


10

注射と機能のリストの間で「、」を逃すたびに私に数回起こった

app.controller('commonCtrl', ['$scope', '$filter',function($scope,$filter) {

}]);

コントローラ名とインジェクションのリストの間に「、」がない場合も同じことが起こりました。つまり、app.controller('commonCtrl' ['$scope', '$filter',function($scope,$filter) { }]);
ベンジー

5

このエラーも発生しましたが、私の場合、コントローラーの命名規則が原因でした。で宣言しcontroller: "QuestionController"ました.stateが、コントローラー定義では次のように宣言しました

yiiExamApp.controller('questionController' ...

しかしそれは

yiiExamApp.controller('QuestionController' ...

この愚かな間違いのためにこのエラーに直面している人々の助けとなることを願っています。


5

同じエラーが発生しました。私はこのようにJavaスクリプトを定義しました

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

それから私はこれに変更しました

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

これで私の問題は解決しました。


4

私もこの同じエラーに遭遇し、私の修正はメインモジュール配列に子モジュールを含めることでした。

var myApp = angular.module('myApp', ['ngRoute', 'childModuleName']);

4

ALL ELSEが失敗し、gulpを使用して、私のようなMEANスタックでローカルに実行している場合は、停止して再びサービスを提供します!私は単純にガルプサーブを再実行するまで、あなたのすべての投稿からすべてが無駄になるまで細心の注意を払ってチェックしているのを聞きました。


これは、グラントサーブでも発生します
acromm

2

同様の問題がありました。修正により、ctrollerがindex.htmlの下部にあるスクリプトタグ内でbodyの終了タグの直前に定義されているだけでなく、フォルダーの構造順になっていることも確認されました。

<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/Administration.js"></script>
<script src="scripts/controllers/Leaderboard.js"></script>
<script src="scripts/controllers/Login.js"></script>
<script src="scripts/controllers/registration.js"></script>

2

私のプロジェクトでもこの問題が発生しました。タグを付けmy-controller.jskarma.conf.jsファイルにを挿入した後、最終的には機能しました<script>

これがお役に立てば幸いです。この問題につながる可能性のある理由は数多くあります。


1

このエラーも発生しました。

新しいコントローラーをルーティング情報に追加する必要がありました。\ src \ js \ app.js

angular.module('Lillan', [
  'ngRoute',
  'mobile-angular-ui',
  'Lillan.controllers.Main'
])

コントローラを追加して、次のようにしました

angular.module('Lillan', [
  'ngRoute',
  'mobile-angular-ui',
  'Lillan.controllers.Main',
  'Lillan.controllers.Growth'
])

乾杯!


1

当然、以前の投稿は役に立ちますが、上記のいずれも私の場合は役に立ちません。その理由は、スクリプトのロード順序が間違っていたためです。たとえば、私の場合、コントローラeditCtrl.jsはui-bootstrap-tpls.jsに依存(使用)するため、最初にロードする必要があります。これによりエラーが発生しました:

<script src="scripts/app/station/editCtrl.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.js"></script>

これは正しい、機能します:

<script src="scripts/angular-ui/ui-bootstrap-tpls.js"></script>
<script src="scripts/app/station/editCtrl.js"></script>

したがって、エラーを修正するには、まず依存関係のないすべてのスクリプトを宣言し、次に以前に宣言されたスクリプトに依存するスクリプトを宣言する必要があります。


1

これを試して

    <title>My First Angular App</title>

</head>

<body>

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <h3>Adding Simple Controller<h3>        

    <div ng-controller="SimpleController">
        Name:

        <br/>

        <input type = "text" data-ng-model = "name"/> {{name}}

        <br/>

        <ul>    
            <li data-ng-repeat = "cust in customers | filter:name | orderBy:'city'">
                {{cust.name}} - {{cust.city}}
            </li>
        </ul>

    </div>


    <script>

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

        angularApp.controller('SimpleController', [ '$scope', SimpleController]);

        function SimpleController($scope)
        {

            $scope.customers = [
                                    {name:'Nikhil Mahirrao', city:'Pune'},
                                    {name:'Kapil Mahire', city:'Pune'},
                                    {name:'Narendra Mahirrao', city:'Phophare'},
                                    {name:'Mithun More', city:'Shahada'}

                                ]; 
        }

    </script>

</body>


1

私の場合、htmlファイルにAngularアプリケーションの名前がありませんでした。たとえば、アプリケーションファイルの先頭にこのファイルを含めました。実行されていると思っていましたが、実行されていませんでした。

app.module.js

(function () {
    'use strict';

    angular
        .module('app', [
        // Other dependencies here...
        ])
    ;

})();

しかし、私がhtmlでアプリを宣言したとき、私はこれを持っていました:

index.html

<html lang="en" ng-app>

しかし、私が使用した名前でAngularアプリケーションを参照するには、以下を使用する必要がありました。

index.html(固定)

<html lang="en" ng-app="app">

1

アプリで対応するモジュールを定義したスクリプトの前にコントローラースクリプトを追加したため、エラーが発生しました。最初にスクリプトを追加します

<script src = "(path of module.js file)"></script>

次に追加するだけ

<script src = "(path of controller.js file)"></script>

メインファイル。


1

エラー:ng:areq不正な引数角括弧を閉じるのが早すぎるため、が数回表示されます。以下の悪い例では、最後の括弧の前に実際に置かれるはずの「$ state」の後に誤って閉じられています。

悪い:

sampleApp.controller('sampleApp', ['$scope', '$state'], function($scope, $state){

});

良い:

sampleApp.controller('sampleApp', ['$scope', '$state', function($scope, $state){

}]);

0

はい。以前に多くの人が指摘したように、index.htmlのすべてのコントローラーファイルにsrcパスを追加しました。

<script src="controllers/home.js"></script>
<script src="controllers/detail.js"></script>
<script src="controllers/login.js"></script>
<script src="controllers/navbar.js"></script>
<script src="controllers/signup.js"></script>

これはそのエラーを修正しました。


0

同じ問題がありましたが、ファイルをgrunt / gulpの最小化プロセスに含めるのを忘れていました。

grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/missing_controller.js']
      }
    }
  }
});

お役に立てば幸いです。


0

私の状況では、配列エラー内で関数を宣言しなかったときにこのエラーが発生しました。

1 エラー

taskAppControllers.controller('MainMenuCtrl', []);

固定されたもの:

taskAppControllers.controller('MainMenuCtrl', [function(){

}]);

0

スペルの間違いもチェックしてください。

var MyApp = angular.module('AppName',[]);
MyApp.controller('WRONG_SPELLING_MyCtrl', ['$scope', MyControllerCtrl])
function MyControllerCtrl($scope) {
   var vm = $scope;
   vm.Apple = 'Android';
}

<div ng-controller="ACTUAL_SPELLING_MyCtrl">
    {{Apple}}
</div>

0

HTMLページに次のものが含まれているかどうかを確認します。

  1. angular.min 脚本
  2. app.js
  3. コントローラJavaScriptページ

ファイルが含まれる順序は重要です。それがこの問題に対する私の解決策でした。

お役に立てれば。


0
sampleApp.controller('sampleApp', ['$scope', '$state', function($scope, $state){

同じことが、関数の前のカンマ「、」が問題の修正に役立つ-エラー:ng:areq不正な引数


0

コントローラファイルが空としてキャッシュされました。キャッシュをクリアすると修正されました。


0

誤って、HomeController.jsを予期しない場所に直接移動しました。元の場所にもう一度置きます。

その後、私のウェブサイトが毎秒自動的にページをロードし始めたので、エラーを見ることさえできませんでした。だから私はブラウザのキャッシュをクリアしました。問題を解決しました

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.