1. ホーム
  2. javascript

[解決済み] Angularjs: Error: [ng:areq] 引数 'HomeController' が関数でないため、未定義となりました。

2022-02-01 04:33:41

質問

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

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

  • 1つは <script src="HomeController.js"> の前に <script src="MyService.js"> こんなエラーが出るんです。

エラーです。[ng:areq] 引数 'HomeController' は関数ではありません、未定義です。

  • もうひとつは <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);

解決方法は?

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

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

これは既に作成されたモジュールにアクセスするものですが ( は、第2引数が省略されていることに注意してください。 ):

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

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

2番目に読み込まれるスクリプトで var myApp = angular.module('myApp'); .