web-dev-qa-db-ja.com

Angularjs：エラー：[ng：areq]引数 'HomeController'は関数ではなく、未定義です

これは、サービスファイルを作成し、コントローラにサービスを追加するために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);
javascriptangularjsangularjs-service
105
Cuong.Ho

これで新しいモジュール/アプリが作成されます。

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

これはすでに作成されたモジュールにアクセスしますが（、2番目の引数が省略されていることに注意してください）。

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

両方のスクリプトで最初のアプローチを使用するので、以前作成したモジュールを基本的に上書きします。

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

207
bmleite

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

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

 <!-- 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の各ページにすべて正しく「正しく」（同じ）綴りがあれば、これで問題は解決します。

20
AA11oAKas

注射のリストと機能の間に「、」を見逃したときはいつでも、何度か私に起こりました

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

}]);
9
jprism

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

yiiExamApp.controller('questionController' ...

しかしそれはあるべきです

yiiExamApp.controller('QuestionController' ...

この間違いに直面している人々に役立つことを願っています。この愚かなミスのため、4時間で無駄にしています。

5
Kuldeep Dangi

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

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

ALL ELSEが失敗して、あなたがgulpで私のようにMEANスタック上でローカルに実行しているなら...ただ停止して、もう一度奉仕してください！私は、単にgulp serveを再実行するまで、すべての投稿からすべての投稿までのすべてを細心の注意を払ってチェックすることを無駄にしていると聞いていました。

4
sigmapi13

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

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

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

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

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

4
Damith Ganegoda

私は自分のプロジェクトでもこの問題に遭遇しました。 my-controller.jsタグを付けて、karma.conf.jsを<script>ファイルに挿入した後、最終的にはうまくいきました。

これが役立つことを願っています。この問題につながる可能性が非常に多くの理由があります。

2
sosostris

私は同様の問題を抱えていました。修正は、bodyの終了タグの直前にあるindex.htmlの下の方のscriptタグ内で、あなたの担当者が定義されるだけでなく、フォルダーがどのように構成されているかの順序でそれらが正しいことも検証することです。

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

私の場合は、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
Casey

私は私がアプリで対応するモジュールを定義したスクリプトの前にコントローラスクリプトを追加したので、私はエラーを得ていました。まずスクリプトを追加する

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

それから追加だけ

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

メインファイル内。

1
user2470087

私もこのエラーを得ました。

ルーティング情報に新しいコントローラを追加する必要がありました。\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
zaini

これを試して

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

明らかに、これまでの投稿は役に立ちますが、私の場合は上記のいずれも役に立ちません。その理由は、スクリプトのロード順序が間違っていたためです。たとえば、私の場合、コントローラ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
Sergey Kulgan

エラー：ng：areq悪い引数が角かっこを閉じるのが早すぎるため、2、3回取得しています。以下の悪い例では、最後の括弧の前に実際に行くべきときに、 '$ state'の後で誤って閉じられています。

悪い：

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

});

良い：

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

}]);
1
foldinglettuce
sampleApp.controller('sampleApp', ['$scope', '$state', function($scope, $state){

私のために同じこと、機能の前にコンマ '、'は問題を解決するのに私を助けた - エラー：ng：areq悪い引数

0
fixit

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

  1. angular.minスクリプト
  2. app.js
  3. コントローラのJavaScriptページ

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

お役に立てれば。

0
Yehudit Grinwald

スペルミスも確認してください。

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
Mahesh

私は誤って私のHomeController.jsを、それが予期されていた場所から直接外に移動しました。元の場所にもう一度置いてください。

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

0
Charlie

はい。多くの人が以前に指摘したように、私は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
obscure79

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

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

それが役立つことを願っています。

0
Patrik Bego

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

エラーのあるもの：

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

修正されたもの

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

}]);
0
Kunok

私のコントローラファイルは空としてキャッシュされました。キャッシュをクリアすることで解決しました。

0
Priyank