AngularJS 模块

在 AngularJS 中，模块（Module）是应用的基本结构之一，它是一个容器，用于存放应用的不同部分，比如控制器、服务、指令、过滤器等。模块帮助我们组织和管理代码，使得应用更具可维护性和可扩展性。

模块是使用 angular.module() 方法来创建的。每个 AngularJS 应用只能有一个主模块，但可以有多个子模块，它们可以通过依赖注入互相引用。

1. 创建模块

使用 angular.module() 方法可以创建一个新的 AngularJS 模块。此方法有两个参数：

模块名：必须是唯一的字符串，通常与应用的名称相同。
依赖项：一个数组，包含当前模块所依赖的其他模块。如果当前模块不依赖其他模块，依赖项可以为空数组。

基本语法：

var app = angular.module('appName', ['dependencyModule1', 'dependencyModule2']);

appName：模块的名称。
['dependencyModule1', 'dependencyModule2']：该模块的依赖模块，如果没有依赖，可以使用空数组 []。

2. 示例：创建一个简单的 AngularJS 模块

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS 模块示例</title>
</head>
<body ng-controller="myController">
    <h1>{{ message }}</h1>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        // 创建一个名为 'myApp' 的 AngularJS 模块
        var app = angular.module('myApp', []);

        // 创建一个控制器 'myController'，该控制器依赖于 $scope 服务
        app.controller('myController', function($scope) {
            $scope.message = "Hello, AngularJS 模块！";
        });
    </script>
</body>
</html>

说明：

通过 angular.module('myApp', []) 创建了一个名为 myApp 的模块。
使用 app.controller() 创建了一个名为 myController 的控制器，控制器通过 $scope 将数据绑定到视图。

3. 模块的依赖

在 AngularJS 中，一个模块可以依赖于其他模块的功能。例如，如果一个模块依赖于另一个模块中的服务或控制器，它可以将该模块作为依赖项传递。

示例：模块依赖

<!DOCTYPE html>
<html ng-app="mainApp">
<head>
    <title>AngularJS 模块依赖</title>
</head>
<body ng-controller="mainController">
    <h1>{{ message }}</h1>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        // 创建一个子模块
        var userModule = angular.module('userModule', []);

        // 在子模块中创建一个控制器
        userModule.controller('userController', function($scope) {
            $scope.userName = "John Doe";
        });

        // 创建主模块，依赖于 userModule
        var mainApp = angular.module('mainApp', ['userModule']);

        // 创建主模块中的控制器
        mainApp.controller('mainController', function($scope) {
            $scope.message = "Hello, " + $scope.userName;
        });
    </script>
</body>
</html>

说明：

userModule 模块被 mainApp 模块依赖。
mainApp 可以访问 userModule 中的控制器和服务。

4. 模块的配置和运行

AngularJS 模块提供了两个方法来进行配置：config() 和 run()。

config()：用于配置应用程序，通常用来设置路由、提供服务等。
run()：在应用启动时执行，通常用于初始化应用程序。

示例：config 和 run

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS config 和 run 示例</title>
</head>
<body ng-controller="myController">
    <h1>{{ message }}</h1>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);

        // 使用 config 配置模块
        app.config(function() {
            console.log("模块配置完成");
        });

        // 使用 run 初始化应用
        app.run(function() {
            console.log("应用启动");
        });

        // 创建控制器
        app.controller('myController', function($scope) {
            $scope.message = "AngularJS 模块配置和初始化示例";
        });
    </script>
</body>
</html>

说明：

app.config() 配置了模块的初始化工作。
app.run() 在应用启动时执行，用于应用级别的初始化。

5. 模块与依赖注入

AngularJS 使用依赖注入（DI，Dependency Injection）来管理不同模块间的依赖。模块中的服务、控制器、过滤器等组件都可以通过注入的方式被其他模块使用。

示例：依赖注入

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS 依赖注入示例</title>
</head>
<body ng-controller="myController">
    <h1>{{ message }}</h1>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);

        // 创建服务
        app.service('greetingService', function() {
            this.getMessage = function() {
                return "Hello from service!";
            };
        });

        // 创建控制器，注入 greetingService 服务
        app.controller('myController', function($scope, greetingService) {
            $scope.message = greetingService.getMessage();
        });
    </script>
</body>
</html>

说明：

greetingService 是一个服务，通过 app.service() 定义。
myController 控制器通过依赖注入的方式接收 greetingService 服务，然后在视图中显示服务返回的消息。

6. 模块的扩展与组合

AngularJS 支持通过模块组合的方式扩展功能。当一个模块变得很大或功能复杂时，可以将其拆分为多个小模块，然后通过模块依赖将它们组合在一起。这样可以提高模块的可重用性和可维护性。

7. 总结

模块的创建：通过 angular.module() 创建模块，可以选择性地为模块添加依赖项。
模块的配置和运行：使用 config() 和 run() 方法配置和初始化模块。
模块的依赖：模块可以通过数组的方式依赖其他模块，支持模块间的功能共享。
模块与依赖注入：AngularJS 通过依赖注入来管理和共享服务、控制器、指令等。

模块在 AngularJS 中是构建应用的基础，合理地拆分和组织模块可以使得 AngularJS 应用更加清晰、可维护和可扩展。

AngularJS 模块