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

编程入门行业动态更新时间:2024-10-25 04:25:30

本文介绍了Angularjs:错误:[ng:areq] 参数“HomeController"不是函数，未定义的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

这是我使用 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:

<html><head lang="en">...</head><body ng-app="myApp">…<div ng-controller="HomeController"><div ng-repeat="你好中的物品">{{item.id + item.name}}</div><script src="Scripts/angular.js"></script><script src="Scripts/angular-route.js"></script><!-- 应用程序库--><script src="app/app.js"></script><script src="app/services/MyService.js"></script><script src="app/controllers/HomeController.js"></script></html>

文件HomeController.js:

(函数(角度){'使用严格';var myApp = angular.module('myApp',[]);myApp.controller('HomeController',function($scope,MyService){$scope.hello=[];$scope.hello = MyService.getHello();});})(window.angular);

文件MyService.js:

(函数(角度){'使用严格';var myApp = angular.module('myApp',[]);myApp.service('MyService', function () {var hello =[ {id:1,name:'cuong'},{id:2,name:'nguyen'}];this.getHello = function(){回你好；};});})(window.angular);

解决方案

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

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

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

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

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

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

This is my demo using angularjs, for creating a service file, and adding service to a controller.

I have two problems with my demo:

One is when I put <script src="HomeController.js"> before <script src="MyService.js"> I get this error,

Error: [ng:areq] Argument 'HomeController' is not a function, got undefined

The other is when I put <script src="MyService.js"> before <script src="HomeController.js"> I get the following error,

Error: [$injector:unpr] Unknown provider: MyServiceProvider <- MyService

My source:

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

File 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);

File 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);

解决方案

This creates a new module/app: