Angularjs:错误:[ng:areq]参数'HomeController'不是一个函数,未定义


109

这是我使用angularjs进行的演示,用于创建服务文件并将服务添加到控制器。

我的演示有两个问题:

  • 一种是<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);

1
确认是否已将* .controller.js添加到BundleConfig.cs文件中。这解决了我的问题。
Syed Mohamed

Answers:


210

这将创建一个新的模块/应用程序:

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

当它访问一个已经创建的模块时(注意省略了第二个参数):

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

由于您在两个脚本上都使用了第一种方法,因此基本上可以覆盖先前创建的模块。

在要加载的第二个脚本上,使用var myApp = angular.module('myApp');


这也解决了我的错误。我错误地将angular.module('myApp',['ui.router'])留在了两个不同的文件(app.js和routes.js)中。一旦我从route.js中删除了数组,它就修复了单元测试。
艾伦·博

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

跑了同样的概率。必须在我的索引页中添加相应的controller.js文件以及其他控制器
ahmednawazbutt

21

另外,还要确保在脚本标记内的index.html底部附近定义了控制器,而这些标记恰好在body的结束标记之前。

 <!-- 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) { }]);
Benji

5

我也遇到了此错误,但就我而言,这是因为控制器命名约定。我controller: "QuestionController".state中声明,但在控制器定义中我声明为

yiiExamApp.controller('questionController' ...

但这应该是

yiiExamApp.controller('QuestionController' ...

希望这对因为我愚蠢的错误而导致我遇到错误的人们有所帮助,因为我在识别错误​​上浪费了4个小时。


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堆栈上,请停下并再次服务!我一直在认真听取我的意见,从您所有的帖子中仔细检查所有内容,直到我只是重新进行一次大口大口的品尝。


咕serve发球时也会发生这种情况
Acromm

2

我有类似的问题。修复程序是确保不仅在body的结束标记之前的index.html底部的脚本标记中定义了ctrollers,而且还验证了它们是否按照文件夹的结构顺序进行定义。

<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.js到我的karma.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错误的论点使我有些困惑,因为我过早关闭了方括号。在下面的BAD示例中,在“ $ state”之后,它实际上应该在最后的括号之前,但未正确关闭。

坏:

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

});

好:

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

}]);

0

是。正如许多人之前指出的那样,我已将src路径添加到index.html中的所有控制器文件。

<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

在我的情况下,当我未在数组参数中声明函数时出现此错误。

错误的一个:

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直接移到了预期的位置。再次将其放在原始位置。

此后,我的网站开始每秒自动加载页面,我什至无法看清错误。所以我清除了浏览器缓存。解决了问题

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.