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; });
让我们注意一下上面代码中的关键区别
-
var sampleApp = angular.module('sampleApp',[]);
我们专门创建了一个名为“sampleApp”的 AngularJS 模块。这将为该模块将包含的功能形成一个逻辑边界。因此,在上面的示例中,我们有一个模块,其中包含一个控制器,该控制器执行 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; });
让我们注意一下上面代码中的关键点
-
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="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 相加的结果
我们用同样的方法执行减法函数。
步骤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>
让我们注意一下上面代码中的关键点
-
<script src="/lib/Utilities.js"></script>
我们在主应用程序文件中引用了 Utilities.js 文件。这允许我们引用此文件中定义的任何模块。
-
<div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">
我们分别使用 ng-app 指令和 ng-controller 访问“SubtractionApp 模块和 DemoSubtractController”。
-
{{d}}
由于我们引用了上述模块和控制器,因此我们可以通过表达式引用 $scope.d 变量。该表达式将是 2 个范围变量 a 和 b 相减的结果,该结果在 ‘演示减法控制器’ 控制器
总结
- 如果不使用 AngularJS 模块,控制器就会开始具有全局范围,这会导致不良的编程实践。
- 模块用于分离业务逻辑。可以创建多个模块,以在不同的模块内进行逻辑分离。
- 每个 AngularJS 模块都可以定义并分配一组自己的控制器。
- 定义模块和控制器时,它们通常在单独的 JavaScript 文件。 这些 Java然后在主应用程序文件中引用脚本文件。