为什么检索到的模块名称应该与 angular.module 中第一个参数中传递的模块名称相同答案

【问题标题】：Why should retrieved module name should be same as the module name passed in the first argument in angular.module为什么检索到的模块名称应该与 angular.module 中第一个参数中传递的模块名称相同
【发布时间】：2014-03-07 14:09:17
【问题描述】：

我编写了一个使用角度模块的程序。我创建了一个模块如下：

// Module A
var modA = angular.module("moduleA",[]);
//Controller A
modA.controller("AController", function($scope, $rootScope, $log){
    $log.info("In controller A");
    $scope.message = "I am in controller A";
});

创建了另一个模块和控制器。

使用上面创建的模块创建了一个新的角度模块：

var myApp = angular.module("mainModule",["modA","moduleB"]);

但是当我运行代码时，我收到以下错误： 未捕获的错误：没有模块：modA

但是当我将检索到的模块名称“modA”更改为“moduleA”时，它在创建它时作为模块中的第一个参数传递。我可以知道为什么会这样吗？

完整代码如下：

<!DOCTYPE HTML>
<html ng-app="mainModule">
<head>
<script type="text/javascript" src="../js/angular.js"></script>
<script text="text/javascript">

// Module A
var modA = angular.module("moduleA",[]); 
//Controller A
modA.controller("AController", function($scope, $rootScope, $log){
    $log.info("In controller A");
    $scope.message = "I am in controller A";
});

// Module B
var moduleB = angular.module("moduleB",[]);
// Controller B
moduleB.controller("BController", function($scope, $rootScope, $log){
    $log.info("In controller B");
    $scope.message = "I am in controller B";
});

var myApp = angular.module("mainModule",["modA","moduleB"]);
</script>
</head>
<body>
<div ng-controller="AController">
<span>{{message}}</span>
</div>

<div ng-controller="BController">
<span>{{message}}</span>
</div>
</body>
</html>

【问题讨论】：

标签： angularjs module

【解决方案1】：

模块是在引导过程中应用到应用程序的配置和运行块的集合。

模块可以列出其他模块作为它们的依赖项。 依赖于模块意味着需要在加载所需模块之前加载所需模块。

在您的情况下，您正在注入“modA”

var myApp = angular.module("mainModule",["modA","moduleB"]);

之前未声明，因此无法加载。因此，它在“依赖注入”期间引发错误。

这发生在 VM 的异步加载机制执行模块期间，因为模块在加载时什么都不做，它们可以以任何顺序加载到 VM 中，因此脚本加载器可以利用此属性并并行化加载过程。

您可以参考link了解更多信息。

【讨论】：

【解决方案2】：

Angular 的错误发生在依赖注入期间。注入器使用您指定的模块/组件名称：

var modA = angular.module("moduleA",[]);

在这种情况下，您告诉它创建一个名为“moduleA”的模块，其中没有其他模块的依赖项。它不关心你给变量取什么名字，它只是用你给的名字注册它。实际上，您甚至不需要存储返回值，因为您可以链接它或检索它

angular.module('moduleA').controller('MyOtherCtrl', function()...);

当您调用不带第二个参数的 angular.module(name) 时，它会按名称检索模块，因此您也可以通过这种方式向其添加组件。

【讨论】：

感谢您的回复。但我的疑问是，如果我创建如上所述的模块，是否有必要将变量名称与模块名称相同。在我的情况下，模块声明应该像：var moduleA = angular.module("moduleA",[]);。如果将 var 作为 moduleA ，则代码有效。