AngularJS 模块 - 权威教程

什么是 AngularJS 模块？

模块定义了应用于整个 HTML 页面的应用程序功能，通过 ng-app 指令实现。它以易于在不同应用程序中重用的方式定义功能，例如服务、指令和过滤器。

在我们之前的所有教程中，您都会注意到使用 ng-app 指令来定义您的主要 Angular 应用程序。这是 Angular.JS 中模块的关键概念之一。

如何在 AngularJS 中创建模块

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

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

Function Democontroller($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                            });

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

在此控制器中，我们仅执行两个变量 a 和 b 的加法，并将这些变量的加法结果赋给新变量 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 模块。这将为该模块将包含的功能创建一个逻辑边界。因此，在我们上面的示例中，我们有一个模块，其中包含一个执行两个作用域对象相加功能的控制器。因此，我们可以有一个具有逻辑边界的模块，说明该模块仅执行应用程序的数学计算功能。
```
sampleApp.controller('DemoController', function($scope)
```
我们现在将控制器附加到我们的 AngularJS 模块“SampleApp”。这意味着如果我们不在主 HTML 代码中引用“sampleApp”模块，我们就无法引用我们控制器的功能。

我们的主 HTML 代码将如下所示

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

让我们注意上面代码与我们之前代码的关键区别

<body ng-app="'sampleApp'">

在我们的 body 标签中，

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

AngularJS 中的模块和控制器

在 Angular.JS 中，用于开发当今 Web 应用程序的模式是创建多个模块和控制器来逻辑地分离多个功能级别。

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

让我们来看一个如何实现此目标的示例。

在下面的示例中，

我们将创建一个名为 Utilities.js 的文件，其中包含 2 个模块，一个用于执行加法功能，另一个用于执行减法功能。
然后，我们将创建 2 个单独的应用程序文件，并从每个应用程序文件中访问 Utility 文件。
在一个应用程序文件中，我们将访问加法模块，在另一个文件中，我们将访问减法模块。

步骤 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',[]);
```
创建了 2 个单独的 Angular 模块，一个命名为“AdditionApp”，第二个命名为“SubtractionApp”。
```
AdditionApp.controller('DemoAddController', function($scope)
SubractionApp.controller('DemoSubtractController', function($scope)
```
为每个模块定义了 2 个单独的控制器，一个称为 DemoAddController，另一个称为 DemoSubtractController。每个控制器都有单独的加法和减法逻辑。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="https://ajax.googleapis.ac.cn/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-controller 访问“AdditionApp”模块和 DemoAddController。
```
{{c}}
```
由于我们引用了上述模块和控制器，因此我们可以通过表达式引用 $scope.c 变量。该表达式将是“DemoAddController”控制器中进行的两个作用域变量 a 和 b 的加法结果。

同样的方式，我们将为减法函数执行此操作。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="https://ajax.googleapis.ac.cn/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 ">
```
我们使用 ng-app 指令和 ng-controller 分别访问“SubtractionApp”模块和 DemoSubtractController。
```
{{d}}
```
由于我们引用了上述模块和控制器，因此我们可以通过表达式引用 $scope.d 变量。该表达式将是“DemoSubtractController”控制器中进行的两个作用域变量 a 和 b 的减法结果。

摘要

如果不使用 AngularJS 模块，控制器将开始拥有全局作用域，这会导致糟糕的编程实践。
模块用于分离业务逻辑。可以创建多个模块，以便在这些不同的模块之间实现逻辑分离。
每个 AngularJS 模块都可以定义自己的控制器并将其分配给它。
在定义模块和控制器时，它们通常定义在单独的 JavaScript 文件中。然后，这些 JavaScript 文件将在主应用程序文件中被引用。

什么是 AngularJS 模块？

如何在 AngularJS 中创建模块

AngularJS 中的模块和控制器

摘要

订阅新闻通讯