AngularJS模块详解及示例代码，模块如何定义与依赖注入？

AngularJS模块详解及示例代码

AngularJS作为前端开发的重要框架，其模块化设计是构建可维护、可扩展应用的核心，本文将深入解析AngularJS模块的概念、作用、创建方法及常用功能，并通过示例代码展示其实际应用。

模块的基本概念

在AngularJS中，模块是应用的主要容器，用于组织控制器、服务、指令、过滤器等组件，模块通过依赖注入机制实现组件间的解耦，确保代码结构清晰，每个AngularJS应用至少需要一个根模块，通常命名为app或main，模块的声明通过angular.module()方法完成，该方法接受两个参数：模块名称和依赖数组。

模块的创建与依赖管理

创建模块的基本语法如下：

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

第一个参数'myApp'是模块名称，第二个参数[]表示该模块不依赖其他模块，若需引入依赖，可在数组中列出其他模块名称，如：

var myApp = angular.module('myApp', ['ngRoute', 'ngResource']);  

此处ngRoute用于路由管理，ngResource用于与RESTful API交互，依赖注入机制确保模块间按需加载，避免全局污染。

模块的核心组件注册

模块作为容器，可注册多种核心组件：

控制器（Controller）

控制器负责处理业务逻辑和数据绑定，通过模块的controller()方法注册：

myApp.controller('MainController', function($scope) {  
    $scope.message = 'Hello, AngularJS!';  
});  

服务（Service）

服务用于封装可复用的业务逻辑，如数据请求或工具函数，常见的服务类型包括service、factory和provider：

myApp.factory('DataService', function() {  
    return {  
        getData: function() {  
            return 'Sample data';  
        }  
    };  
});  

指令（Directive）

指令用于扩展HTML功能，创建自定义DOM元素或属性，通过directive()方法定义：

myApp.directive('customDirective', function() {  
    return {  
        template: '<div>Custom Directive Content</div>'  
    };  
});  

过滤器（Filter）

过滤器用于格式化数据，如日期、货币等，通过filter()方法注册：

myApp.filter('reverse', function() {  
    return function(input) {  
        return input.split('').reverse().join('');  
    };  
});  

模块的生命周期与加载顺序

AngularJS模块的加载遵循依赖顺序，主模块（ng）会自动加载，其他模块按声明顺序依次初始化，模块的配置阶段（config）和运行阶段（run）分别用于配置服务和启动应用逻辑：

配置阶段（config）

在模块加载时执行，用于配置服务或路由：

myApp.config(function($routeProvider) {  
    $routeProvider  
        .when('/', {  
            templateUrl: 'home.html',  
            controller: 'HomeController'  
        })  
        .otherwise({redirectTo: '/'});  
});  

运行阶段（run）

在模块配置完成后执行，用于初始化全局逻辑：

myApp.run(function($rootScope) {  
    $rootScope.appName = 'My Angular App';  
});  

示例代码：完整模块应用

以下是一个简单的AngularJS模块示例，包含控制器、服务和指令：

// 1. 创建模块  
var app = angular.module('myApp', []);  
// 2. 注册服务  
app.service('UserService', function() {  
    this.users = ['Alice', 'Bob', 'Charlie'];  
    this.getUsers = function() {  
        return this.users;  
    };  
});  
// 3. 注册控制器  
app.controller('UserController', function($scope, UserService) {  
    $scope.users = UserService.getUsers();  
});  
// 4. 注册指令  
app.directive('userList', function() {  
    return {  
        restrict: 'E',  
        template: '<ul><li ng-repeat="user in users">{{user}}</li></ul>'  
    };  
});  

对应的HTML模板如下：

<div ng-app="myApp" ng-controller="UserController">  
    <user-list></user-list>  
</div>  

模块化开发的优势

1. 可维护性：组件独立封装，便于调试和修改。
2. 可复用性：服务和指令可在不同模块间复用。
3. 可测试性：依赖注入便于单元测试。
4. 团队协作：模块化分工明确，提升开发效率。

通过合理使用AngularJS模块，开发者可以构建结构清晰、功能强大的单页应用,为前端项目奠定坚实基础。