AngularJS模块教程示例
在本文中，我们将介绍AngularJS中最重要的功能之一，即模块。
我们在之前的文章中介绍了控制器，过滤器和指令等功能。
我们还讨论了如何在Angular应用程序中创建和包含控制器，但是不建议这样做，特别是在处理大型应用程序时。
我们可以使用AngularJS Module API来模块化Angular应用程序。
什么是模块？
可以将模块视为应用程序不同部分(如"控制器"，"过滤器"，"服务"，"指令"等的容器，它们指定应如何引导应用程序。
模块是AngularJS依赖注入系统的重要组成部分。
这是创建模块的常规语法：
- angular.module(" myModule"，[]);
myModule是模块的名称。
[]是注入依赖项的地方。
为什么选择模块？
帮助将我们的代码打包到可重用的模块中。
声明过程更容易理解。
可以以任何顺序加载模块。
易于测试和维护的组件。
帮助组织您的应用程序。
在模块中创建控制器
在本节中，我们将解释如何在模块中创建控制器。
这非常简单，我们使用以下步骤来完成该任务。
var myFirstModule = angular.module("myFirstModule ", []);
myFirstModule.controller("MyController", function);
其中我们创建了一个名为myFirstModule的模块，并其中定义了一个名为MyController的控制器。
您还可以使用Angular模块API创建服务，提供者和工厂。
下表简要介绍了API中一些最常用的方法。
| 方法 | 语法 |
|---|---|
| module.service | module.service( ‘serviceName’, function ); |
| module.factory | module.factory( ‘factoryName’, function ); |
| module.provider | module.provider( ‘providerName’, function ); |
在本文中，我们将不研究这些概念的细节。
我们将在接下来的文章中看到这些概念。
在模块示例中创建控制器
以下示例演示了如何在Angular模块中创建控制器。
在此示例中，我们将创建一个名为demoApp的模块，并其中定义控制器blogController。
Angular模块
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title> AngularJS - Module</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-controller="blogController">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
<br>
Blog Name : {{blogName }}
</div>
<script>
var app = angular.module("demoApp", []);
app.controller("blogController", function($scope) {
$scope.firstName = "Pankaj",
$scope.lastName = "Kumar",
$scope.blogName = "theitroad"
});
</script>
</body>
</html>
我们使用ng-app指令来指定应用程序中使用的模块的名称。
您将在浏览器中看到以下输出。
AngularJS应用程序文件
之前，我们研究了如何在外部文件中包含控制器。
当您处理大型应用程序时，这非常有帮助。
在任何Angular应用程序中，我们主要使用两种类型的文件，一种使用模块，另一种使用控制器。
让我们来看看它。
以下示例演示了此用法。
首先，我们在app.js文件中创建一个模块。
app.js
var app = angular.module("demoApp", []);
第二步是在controller.js文件中定义控制器。
controller.js
app.controller("blogController", function($scope) {
$scope.firstName = "Pankaj",
$scope.lastName = "Kumar",
$scope.blogName = "theitroad"
});
第三步是在我们的应用程序中包括这两个文件。
Angular模块
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title> AngularJS - Module</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-controller="blogController">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
<br>
Blog Name : {{blogName }}
</div>
<script src="app.js"></script>
<script src="controller.js"></script>
</body>
</html>
