如何解决角度模块未定义答案

【问题标题】：How to solve angular module got undefined如何解决角度模块未定义
【发布时间】：2023-03-21 07:35:01
【问题描述】：

我在不同的文件中有四个控制器

InvoiceCtrl
BillingCtrl
InvoicePaymentCtrl
InvoiceViewCtrl

2、3、4 有这个 angular.module('invoice.controller',[])

1 有这个 angular.module('test',[])

在我的 app.js 中，我使用以下代码

angular.module('invoiceapp', ['invoice.controller','test','starter.services','ngDialog','angularMoment'])

现在每当我尝试用 2,3,4 更改 1 时

Argument 'InvoiceCtrl' is not a function, got undefined

我还尝试为每个控制器删除 angular.module 中的 []

任何人都知道如何解决这个问题

提前致谢！

P.S 每个控制器都在一个单独的文件中。

billing.controller.js
payment.controller.js
invoice.controller.js
view.controller.js

angular.module('invoice.controller', [])

.controller('BillingCtrl', function($scope,$http,Dialogs,Invoices){

    $scope.status = 'Billing OK!';

});

angular.module('invoice.controller', [])

.controller('InvoicePaymentCtrl', function($scope,$http,Dialogs,Invoices){

    $scope.status = 'Invoice Payment OK!';

});

angular.module('invoice.controller', [])

.controller('InvoiceCtrl', function($scope,$http,Dialogs,Invoices){

    $scope.status = 'Invoice OK!';

});

angular.module('invoice.controller', [])

.controller('InvoiceViewCtrl', function($scope,$http,Dialogs,Invoices){

    $scope.status = 'Invoice View OK!';

});

【问题讨论】：

InvoiceCtrl 文件是什么样的？
请给我看看你的代码。
只是为了确认。你应该使用angular.module('invoice.controller',[]).controller(...).controller(...)，而不是angular.module('invoice.controller',[]).controller('one'); angular.module('invoice.controller',[]).controller('two')...。
感谢您的回复，我已经编辑了帖子并添加了我的代码。

标签： angularjs angular-controller angular-module

【解决方案1】：

你这样做的那一刻：

angular.module('invoice.controller', [])

您创建了一个全新的模块，您可以省略后续的模块声明，只使用这样的控制器：

// app.js file
angular.module('invoice.controller', [])

// File #1
angular.module('invoice.controller')
.controller('BillingCtrl', function($scope,$http,Dialogs,Invoices){

    $scope.status = 'Billing OK!';

})

// File #2
angular.module('invoice.controller')
.controller('InvoicePaymentCtrl', function($scope,$http,Dialogs,Invoices){
$scope.status = 'Invoice Payment OK!';
})

// File #3
angular.module('invoice.controller')
.controller('InvoiceCtrl', function($scope,$http,Dialogs,Invoices){
    $scope.status = 'Invoice OK!';
}) 

// File #4
angular.module('invoice.controller')
.controller('InvoiceViewCtrl', function($scope,$http,Dialogs,Invoices){
    $scope.status = 'Invoice View OK!';
});

注意到模块上缺少 [] 了吗？这是因为使用 [] 会创建应用程序本身的另一个实例 :)

【讨论】：

谢谢！但那是我以前的格式。现在我发现随着代码的增加很难管理。我需要将它们分成 4 个不同的文件。
好的，我更改了解决方案 - 请注意，每次您在模块中使用 [] 时，它都会创建一个新模块，如果名称相同，则将其省略引用第一个 app.module 附加控制器对它：）一开始我被吓到了好几次！
您好，很抱歉回复晚了，这是我现在遇到的错误模块“starter.controller”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。我还在想办法
很高兴您对它进行了排序！那个以前让我难过:)

【解决方案2】：

这段代码：

angular.module('invoice.controller',[])

创建一个新模块。

在使用它们之前，您需要构建代码以创建一次模块。然后通过获取对之前创建的模块的引用来附加控制器：

var module = angular.module('invoice.controller');

我会这样做：

在 app.js 文件中我会这样做：

angular.module('invoice.controller',[]); angular.module('test',[]);
然后，在所有其他文件中，我将引用该模块

var module = angular.module('invoice.controller'); module.controller('InvoiceCtrl',...)

【讨论】：