angular.module 带依赖数组和不带依赖数组的区别是什么？

提供数组会创建一个模块。省略数组则会检索已注册的模块，因此多个文件可以扩展同一个可注入命名空间。

如何对AngularJS模块进行单元测试？

通过 angular.mock.module 加载，然后使用 inject() 解析控制器。浏览器级别的代码覆盖率则驱动页面，这在历史上是 Pro 的惯例。trac托尔。

在现代 Angular 中，angular.module 被什么取代了？

@NgModule 在 Angular 2 中接管了该功能，独立组件现在是默认设置，它们通过自己的 imports 数组声明依赖项。

AI 如何帮助将 AngularJS 迁移到 Angular？

机器学习工具会读取每一个 angular.module 调用，构建依赖关系图，并根据迁移风险对模块进行排名。 Rev访问者验证每个指令映射ping.

GitHub Copilot 能否生成 AngularJS 模块样板代码？

GitHub Copilot 和类似的智能助手可以根据一个提示生成模块、控制器和文件框架。生成的代码需要审核。

AngularJS 模块

⚡ 智能摘要

AngularJS 中的模块充当容器，将控制器、服务、指令和过滤器分组到一个逻辑边界之后，因此 ng-app 指令只会在运行时加载单个页面实际需要的功能。

🔘 定义： angular.module 注册并检索应用程序使用的每个组件。
☑️ 创建： 依赖项数组用于创建模块；省略依赖项数组则会检索模块。
✅ Bootstrapping: ng-app 是 Angular 为该区域加载的模块名称。
🧪 分离： 模块作用域控制器避免了全局名称和跨控制器冲突。
📊 版本说明： AngularJS 的支持已于 2022 年 1 月结束；Angular 更倾向于使用独立组件。

什么是 AngularJS 模块？

模块定义了应用程序的功能，这些功能通过 ng-app 指令应用于整个 HTML 页面。它定义了诸如服务之类的功能，指令以及过滤器，使其易于在不同应用程序中重复使用。

上图概括了这一边界。

在我们之前的所有教程您应该已经注意到，我们使用了 ng-app 指令来定义您的主 Angular 应用程序。这是 AngularJS 模块的关键概念之一。

⚠️ 版本说明： AngularJS 的支持已于 2022 年 1 月结束。。现代角度方向它使用了 @NgModule，并且默认使用独立组件。以下代码为历史代码。

如何在 AngularJS 中创建模块

在开始讲解什么是模块之前，让我们先来看一个例子。 AngularJS 应用没有模块，然后就会明白在应用程序中使用模块的必要性。

我们来创建一个名为“DemoController.js”的文件，并将以下代码添加到该文件中。

function DemoController($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                            }

在上面的代码中，我们创建了一个名为“DemoController”的函数，它将充当我们的应用程序中的控制器。

在这个控制器中，我们只是将两个变量 a 和 b 相加，并将这两个变量的和赋值给一个新变量 c，然后再将 c 赋值回原变量。范围目的。

现在让我们创建主 Sample.html，这将是我们的主要应用程序。让我们将以下代码片段插入 HTML 页面中。

<body ng-app="">
      <div ng-controller="DemoController">
      <h3> Guru99 Global Event</h3>
      {{c}}

在上面的代码中，我们包含了我们的 DemoController，然后通过表达式调用 $scope.c 变量的值。

但请注意我们的 ng-app 指令，它有一个空白值。

这基本上意味着在 ng-app 指令上下文中调用的所有控制器都可以全局访问。多个控制器之间没有分隔线。
在现代编程中，将控制器不附加到任何模块并使其可全局访问是一种不好的做法。必须为控制器定义一些逻辑边界。

这就是模块的作用所在。模块用于创建边界分离，并帮助根据功能分离控制器。

让我们修改上面的代码来实现模块，并将我们的控制器附加到这个模块

var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('DemoController', function($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                         });

让我们注意一下上面代码中的关键区别

```
var sampleApp = angular.module('sampleApp',[]);
```
我们专门创建了一个名为“sampleApp”的 AngularJS 模块。这将为该模块将包含的功能形成一个逻辑边界。因此，在上面的示例中，我们有一个模块，其中包含一个控制器，该控制器执行 2 个范围对象的加法。因此，我们可以有一个具有逻辑边界的模块，该边界表示该模块将仅执行应用程序的数学计算功能。
```
sampleApp.controller('DemoController', function($scope)
```
现在我们将控制器附加到我们的 AngularJS 模块“sampleApp”上。这意味着，如果我们不在主 HTML 代码中引用模块“sampleApp”，我们将无法引用控制器的功能。

二传手与接球手： angular.module 仅当……时才创建模块依赖传递数组；如果没有传递数组，调用将检索一个已存在的模块。

我们的主要 HTML 代码现在将如下所示。

<body ng-app="sampleApp">
                           <div ng-controller="DemoController">
                           <h3> Guru99 Global Event</h3>
                		   {{c}}

让我们注意一下上面的代码和我们之前的代码之间的主要区别

<body ng-app="sampleApp">

在我们的 body 标签中，

我们现在不再使用空的 ng-app 指令，而是调用模块 sampleApp。
通过调用此应用程序模块，我们现在可以访问控制器“DemoController”和演示控制器中存在的功能。

AngularJS 中的模块和控制器

In AngularJS用于开发的模式ping 现代网络应用程序旨在创建多个模块和控制器，以在逻辑上分离多个功能层级。

通常模块将存储在单独的 JavaScript 文件，这与主应用程序文件不同。

让我们看一个例子来了解如何实现这一点。

在下面的示例中，

我们将创建一个名为 Utilities.js 的文件，其中包含两个模块：一个用于实现加法运算功能，另一个用于实现减法运算功能。trac化。
然后我们将创建 2 个单独的应用程序文件并从每个应用程序文件访问实用程序文件。
在一个应用程序文件中，我们将访问用于加法的模块；在另一个应用程序文件中，我们将访问用于子运算的模块。trac化。

步骤1） 定义多个模块和控制器的代码。

var AdditionApp = angular.module('AdditionApp',[]);
AdditionApp.controller('DemoAddController', function($scope) {
       $scope.a=5;
       $scope.b=6;
       $scope.c=$scope.a + $scope.b;
});
var SubractionApp = angular.module('SubtractionApp',[]);
SubractionApp.controller('DemoSubtractController', function($scope) {
       $scope.a=8;
       $scope.b=6;
       $scope.d=$scope.a - $scope.b;
});

让我们注意一下上面代码中的关键点

```
 var AdditionApp = angular.module('AdditionApp',[]);
 var SubractionApp = angular.module('SubtractionApp',[]);
```
创建了两个独立的 AngularJS 模块，一个名为“AdditionApp”，另一个名为“Sub”。tractionApp'。
```
AdditionApp.controller('DemoAddController', function($scope)
SubractionApp.controller('DemoSubtractController', function($scope)
```
每个模块都定义了两个独立的控制器，一个是 DemoAddController，另一个是 DemoSub。tractController。每个控制器都有独立的加法和减法逻辑。trac数字的转换。

步骤2） 创建主应用程序文件。让我们创建一个名为 ApplicationAddition.html 的文件并添加以下代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
    Addition :{{c}}

</div>
</body>
</html>

让我们注意一下上面代码中的关键点

```
<script src="/lib/Utilities.js"></script>
```
我们在主应用程序文件中引用了 Utilities.js 文件。这允许我们引用此文件中定义的任何 AngularJS 模块。

<div ng-app = "AdditionApp" ng-controller="DemoAddController">

我们使用 ng-app 指令和 ng-控制器。

```
{{c}}
```
由于我们引用了上述模块和控制器，因此我们可以通过表达式引用 $scope.c 变量。该表达式将是“DemoAddController”控制器中执行的 2 个范围变量 a 和 b 相加的结果

我们对子节点也会采用同样的方法。trac功能。

步骤3） 创建您的主应用程序文件。我们创建一个名为“ApplicationSub”的文件。traction.html”并添加以下代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "SubtractionApp" ng-controller="DemoSubtractController">
    Subtraction :{{d}}
  
</div>
</body>
</html>

让我们注意一下上面代码中的关键点

```
<script src="/lib/Utilities.js"></script>
```
我们在主应用程序文件中引用了 Utilities.js 文件。这允许我们引用此文件中定义的任何模块。
```
<div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">
```
我们正在访问“Sub”。tractionApp' 模块和 DemoSubtrac分别使用 ng-app 指令和 ng-controller 指令来调用 tController。
```
{{d}}
```
由于我们引用了上述模块和控制器，因此可以通过表达式引用 $scope.d 变量。该表达式将是子程序的执行结果。trac对两个作用域变量 a 和 b 进行操作，该操作在“DemoSub”中执行。tractController' 控制器

常见问题

提供数组会创建一个模块。省略数组则会检索已注册的模块，因此多个文件可以扩展同一个模块。注射命名空间。

不。AngularJS 只会启动找到的第一个 ng-app；其他模块需要在其元素上手动调用 angular.bootstrap。

config() 函数在提供程序注册期间运行，因此只有提供程序和常量会被注入到该函数中。run() 函数在注入器准备就绪后执行。

ng-app 的值与任何已注册的模块都不匹配。拼写错误、带引号的名称或在 AngularJS 之后加载模块文件都会导致此问题。

通过 angular.mock.module 加载它，然后使用 inject() 解析控制器。浏览器级别的覆盖率则驱动页面，历史上一直如此。专业版trac器.

@NgModule Angular 2 中采用了这种方式，独立组件现在是默认设置，它们通过自己的 imports 数组声明依赖项。

机器学习工具会读取每一个 angular.module 调用，构建依赖关系图，并根据迁移风险对模块进行排名。 Rev观众核实每一项指示地图ping.

GitHub 副驾驶类似的智能助手可以从一个提示符生成模块、控制器和文件框架。生成的代码需要审查。

AngularJS 模块

什么是 AngularJS 模块？

如何在 AngularJS 中创建模块

AngularJS 中的模块和控制器

常见问题

总结一下这篇文章：

注册简报

什么是 AngularJS 模块？

如何在 AngularJS 中创建模块

AngularJS 中的模块和控制器

相关文章

常见问题

总结一下这篇文章：

注册简报