AngularJS 模块

什么是 AngularJS 模块?

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

在我们之前的所有教程中,您可能已经注意到用于定义主 Angular 应用程序的 ng-app 指令。这是 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;
                         });

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

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

    我们专门创建了一个名为“sampleApp”的 AngularJS 模块。这将为该模块将包含的功能形成一个逻辑边界。因此,在上面的示例中,我们有一个模块,其中包含一个控制器,该控制器执行 2 个范围对象的加法。因此,我们可以有一个具有逻辑边界的模块,该边界表示该模块将仅执行应用程序的数学计算功能。

  2. 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”和演示控制器中存在的功能。

AngularJS 中的模块和控制器

In 角度.JS,开发现代 Web 应用程序所采用的模式是创建多个模块和控制器,以在逻辑上分离多个级别的功能。

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

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

在下面的示例中,

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

步骤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;
});

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

  1.  var AdditionApp = angular.module('AdditionApp',[]);
     var SubractionApp = angular.module('SubtractionApp',[]);

    创建了 2 个单独的 Angular 模块,一个名为“AdditionApp”,第二个名为“SubtractionApp”。

  2. 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="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>

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

  1. <script src="/lib/Utilities.js"></script>

    我们在主应用程序文件中引用了 Utilities.js 文件。这允许我们引用此文件中定义的任何 AngularJS 模块。

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

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

  3. {{c}}

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

    我们用同样的方法执行减法函数。

步骤3) 创建主要应用程序文件。让我们创建一个名为“ApplicationSubtraction.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>

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

  1. <script src="/lib/Utilities.js"></script>

    我们在主应用程序文件中引用了 Utilities.js 文件。这允许我们引用此文件中定义的任何模块。

  2. <div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">

    我们分别使用 ng-app 指令和 ng-controller 访问“SubtractionApp 模块和 DemoSubtractController”。

  3. {{d}}

    由于我们引用了上述模块和控制器,因此我们可以通过表达式引用 $scope.d 变量。该表达式将是 2 个范围变量 a 和 b 相减的结果,该结果在 ‘演示减法控制器’ 控制器

总结

  • 如果不使用 AngularJS 模块,控制器就会开始具有全局范围,这会导致不良的编程实践。
  • 模块用于分离业务逻辑。可以创建多个模块,以在不同的模块内进行逻辑分离。
  • 每个 AngularJS 模块都可以定义并分配一组自己的控制器。
  • 定义模块和控制器时,它们通常在单独的 JavaScript 文件。 这些 Java然后在主应用程序文件中引用脚本文件。