Angularjs：错误：[ng:areq] 参数“HomeController”不是函数，未定义

Posted 2023-02-21

技术标签:

【中文标题】Angularjs：错误：[ng:areq] 参数“HomeController”不是函数，未定义【英文标题】：Angularjs: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined 【发布时间】：2014-11-11 18:21:46 【问题描述】：

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

我的演示有两个问题：

一个是当我将<script src="HomeController.js"> 放在<script src="MyService.js"> 之前时，我得到了这个错误，

错误：[ng:areq] 参数 'HomeController' 不是函数，未定义

另一种是当我将<script src="MyService.js"> 放在<script src="HomeController.js"> 之前时出现以下错误，

错误：[$injector:unpr] 未知提供者：MyServiceProvider

我的来源：

文件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);

【问题讨论】：

确认你的*.controller.js 是否添加到BundleConfig.cs 文件中。这解决了我的问题。 【参考方案1】：

这会创建一个新的模块/应用程序：

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

虽然这会访问一个已经创建的模块（注意省略了第二个参数）：

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

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

在加载第二个脚本时，使用var myApp = angular.module('myApp');。

【讨论】：

这也解决了我的错误。我错误地将 angular.module('myApp', ['ui.router']) 留在了 2 个不同的文件（app.js 和 routes.js）中。一旦我从 routes.js 中删除了数组，它就修复了单元测试。【参考方案2】：

我曾经遇到过这个错误。我的问题是我没有添加 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>

【讨论】：

帮了大忙。 Yeoman 将脚本标签放在角度生成器的 index.html 底部……很容易错过。谢谢！运行了同样的问题。必须在我的索引页面中添加相应的 controller.js 文件以及其他控制器【参考方案3】：

还要确保你的控制器是在 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 页面上的所有内容都拼写“正确”（相同），这应该可以解决您的问题。

【讨论】：

【参考方案4】：

每当我错过注射列表和功能之间的“，”时，都会发生几次

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

]);

【讨论】：

当我在控制器名称和注入列表之间缺少“，”时发生了同样的事情，即app.controller('commonCtrl' ['$scope', '$filter',function($scope,$filter) ]);【参考方案5】：

我也遇到了这个错误，但在我的情况下是因为控制器命名约定。我在.state 中声明了controller: "QuestionController"，但在控制器定义中我声明为

yiiExamApp.controller('questionController' ...

但应该是的

yiiExamApp.controller('QuestionController' ...

希望对那些因为我浪费了 4 个小时来识别它的愚蠢错误而面临这个错误的人有所帮助。

【讨论】：

【参考方案6】：

如果 ALL ELSE 失败并且您像我一样在 MEAN 堆栈上本地运行 gulp...只需停止并再次发球！在我重新运行 gulp serve 之前，我一直在仔细检查所有帖子中的所有内容，但无济于事。

【讨论】：

grunt serve 也会发生这种情况【参考方案7】：

我遇到了同样的错误。我定义了这样的java脚本

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

然后我改成了这个

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

这之后我的问题就解决了。

【讨论】：

【参考方案8】：

我也遇到了同样的错误，我的解决方法是将我的子模块包含在主模块数组中。

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

【讨论】：

【参考方案9】：

我有类似的问题。修复方法是确保您的 ctrollers 不仅在 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>

【讨论】：

【参考方案10】：

我在项目中也遇到过这个问题。在我将my-controller.js 插入到我的karma.conf.js 文件中并带有<script> 标签后，它最终起作用了。

希望这会有所帮助。导致这个问题的原因有很多。

【讨论】：

【参考方案11】：

我也遇到了这个错误。

我必须将我的新控制器添加到路由信息中。 \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'
])

干杯！

【讨论】：

【参考方案12】：

显然，以前的帖子很有用，但以上任何一个都对我没有帮助。原因是加载脚本的顺序错误。例如，在我的例子中，控制器 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>

因此，要修复错误，您需要首先声明所有没有依赖关系的脚本，然后再声明依赖于先前声明的脚本。

【讨论】：

【参考方案13】：

试试这个

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

【讨论】：

【参考方案14】：

就我而言，我在 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">

【讨论】：

【参考方案15】：

我收到错误是因为我在应用程序中定义相应模块的脚本之前添加了控制器脚本。先添加脚本

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

那就只加

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

在主文件中。

【讨论】：

【参考方案16】：

Error: ng:areq Bad Argument 得到了我几次，因为我关闭方括号太快了。在下面的 BAD 示例中，它在 '$state' 之后被错误地关闭，而它实际上应该在最后一个括号之前。

不好：

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

);

好：

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

]);

【讨论】：

【参考方案17】：

是的。正如许多人之前指出的那样，我已将 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>

这修复了该错误。

【讨论】：

【参考方案18】：

我遇到了同样的问题，但我忘记将文件包含在 grunt/gulp 最小化过程中。

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

希望对您有所帮助。

【讨论】：

【参考方案19】：

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

错误：

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

固定的：

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

]);

【讨论】：

【参考方案20】：

同时检查拼写错误。

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>

【讨论】：

【参考方案21】：

检查您的 HTML 页面是否包含：

angular.min

app.js

javascript

文件包含的顺序很重要。这是我解决这个问题的方法。

希望这会有所帮助。

【讨论】：

【参考方案22】：

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

同样的事情，逗号 ',' 在函数帮助我解决问题之前 -- 错误：ng:areq Bad Argument

【讨论】：

【参考方案23】：

我的控制器文件被缓存为空。清除缓存为我修复了它。

【讨论】：

【参考方案24】：

我不小心将我的 HomeController.js 直接移出了预期的位置。再把它放在原来的位置上。

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

【讨论】：

【参考方案25】：

对我来说，解决方案是在我的 HomeController.js 中声明的函数之一之后添加一个分号

//Corrected code is :
app.controller('HomeController', function($scope, $http, $log) 

  $scope.demo1 = function()
      console.log("In demo");
   //Here i forgot to add the semicolon
  
  $scope.demo2 = function()
      console.log("In demo");
  ;
  
);

【讨论】：

以上是关于Angularjs：错误：[ng:areq] 参数“HomeController”不是函数，未定义的主要内容，如果未能解决你的问题，请参考以下文章

错误：[ng:areq] 参数“Ctrl”不是函数

angular.min.js:118 Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?

错误：来自角度控制器的 [ng:areq]

使用 Ionic + TypeScript + Angular 的混合应用程序

在 Yeoman 中使用多个 Angular 控制器

AngularJS延迟错误：参数'fn'不是函数，得到对象