AngularJS 模块

一、概述

• 模块（Module）定义了一个 AngularJS 应用程序
• 模块是应用程序中不同部分的容器
• 模块是控制器、指令、服务、过滤器等组件的容器
• 控制器通常属于一个模块

---

二、创建模块

通过 AngularJS 的 angular.module() 函数来创建模块：

<div ng-app="myApp">...</div>

<script>
    var app = angular.module("myApp", []);
</script>Code language: HTML, XML (xml)

ng-app="myApp" 指定该模块为应用的根模块。

第二个参数 [] 是依赖数组，用于注入其他模块（无依赖时传空数组）。

---

三、添加控制器

使用 ng-controller 指令将控制器绑定到模块上：

<div ng-app="myApp" ng-controller="myCtrl">
    {{ firstName + " " + lastName }}
</div>

<script>
    var app = angular.module("myApp", []);

    app.controller("myCtrl", function ($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });
</script>Code language: HTML, XML (xml)

说明

• angular.module("myApp", []) 创建模块
• app.controller("myCtrl", ...) 在模块上注册控制器
• 控制器通过 $scope 向视图暴露数据

---

四、添加自定义指令

模块还可以用来注册自定义指令：

<div ng-app="myApp" runoob-directive></div>

<script>
    var app = angular.module("myApp", []);

    app.directive("runoobDirective", function () {
        return {
            template: "我在指令构造器中创建!"
        };
    });
</script>Code language: HTML, XML (xml)

说明

• app.directive() 用于在模块上定义指令
• 指令返回一个对象，其中 template 指定指令的 HTML 模板
• 在 HTML 中以 属性形式​ 使用指令（如 <div runoob-directive>）

---

五、模块的作用总结

作用	说明
定义应用	通过 ng-app 指定根模块
容器	承载控制器、指令、服务、过滤器等
组织代码	将不同功能划分到不同模块，便于维护