如何拆分AngularJS应用模块？多模块文件组织方案咨询

首先得说，你的思路完全没问题——把模块拆分成控制器、配置等多个文件来维护，比把所有代码堆在一个文件里清爽太多了。针对你的需求，我给你几个可行的方案，你可以根据项目情况选择：

方案1：用原生ES模块（现代浏览器首选） #

现在大部分现代浏览器都支持ES6的import/export语法，不用额外工具就能实现文件间的依赖引用，非常方便。

修改你的文件： #

1. login.controller.js：导出控制器

// login.controller.js
export const LoginController = function($scope){ 
    // 这里写你的控制器逻辑
};

2. login.module.js：导入控制器并定义模块

// login.module.js
import { LoginController } from './login.controller.js';

const login = angular.module("Login", ["ui.router"]);
login.config(function($stateProvider, $urlRouterProvider){
    var states = [
        {
            name: 'login',
            url: '/login',
            template: '<h1>Login Template</h1>',
            controller : LoginController
        }
    ];
    states.forEach((state) => $stateProvider.state(state));
    $urlRouterProvider.otherwise('/');
});

3. app.js：引入模块文件，AngularJS会自动识别已注册的Login模块

// app.js
import './login.module.js';

const app = angular.module("App", ["Login"]);

在HTML中引入： #

要记得给script标签加上type="module"，告诉浏览器这是ES模块：

<script type="module" src="app.js"></script>

方案2：用IIFE+全局变量（兼容旧浏览器） #

如果你的项目需要兼容不支持ES模块的老浏览器，可以用立即执行函数表达式（IIFE）来封装代码，通过全局变量传递依赖。

修改文件： #

1. login.controller.js：把控制器挂载到全局window对象

// login.controller.js
(function(window) {
    window.LoginController = function($scope){ 
        // 控制器逻辑
    };
})(window);

2. login.module.js：从全局获取控制器，定义模块

// login.module.js
(function(window) {
    const login = angular.module("Login", ["ui.router"]);
    login.config(function($stateProvider, $urlRouterProvider){
        var states = [
            {
                name: 'login',
                url: '/login',
                template: '<h1>Login Template</h1>',
                controller : window.LoginController
            }
        ];
        states.forEach((state) => $stateProvider.state(state));
        $urlRouterProvider.otherwise('/');
    });
})(window);

3. app.js：创建主应用模块

// app.js
(function(window) {
    const app = angular.module("App", ["Login"]);
})(window);

在HTML中引入： #

注意必须按依赖顺序引入，先加载控制器，再加载模块，最后加载主应用：

<script src="login.controller.js"></script>
<script src="login.module.js"></script>
<script src="app.js"></script>

方案3：用构建工具（Webpack/Browserify，大型项目首选） #

如果你的项目模块多、代码量大，用Webpack或Browserify这类构建工具会更省心——它能帮你管理依赖、打包代码，还能做压缩、优化等操作。

以Webpack为例： #

1. 先安装依赖：

npm install webpack webpack-cli --save-dev

2. 创建webpack.config.js配置文件：

module.exports = {
    entry: './app.js', // 入口文件
    output: {
        filename: 'bundle.js', // 打包后的文件名
        path: __dirname + '/dist' // 输出目录
    },
    mode: 'development' // 开发模式，方便调试
};

3. 修改你的JS文件，用CommonJS的require语法：

• login.controller.js

// login.controller.js
module.exports = function($scope){ 
    // 控制器逻辑
};

• login.module.js

// login.module.js
const LoginController = require('./login.controller.js');

const login = angular.module("Login", ["ui.router"]);
login.config(function($stateProvider, $urlRouterProvider){
    var states = [
        {
            name: 'login',
            url: '/login',
            template: '<h1>Login Template</h1>',
            controller : LoginController
        }
    ];
    states.forEach((state) => $stateProvider.state(state));
    $urlRouterProvider.otherwise('/');
});

• app.js

// app.js
require('./login.module.js');

const app = angular.module("App", ["Login"]);

4. 运行打包命令：

npx webpack

5. 在HTML中引入打包后的文件：

<script src="dist/bundle.js"></script>

小提示： #

• 如果你是新项目，优先选ES模块方案，简洁且符合现代JS规范
• 老项目可以用IIFE方案，不用改太多代码就能拆分文件
• 大型项目一定要用构建工具，能大幅提升开发效率和代码可维护性

内容的提问来源于stack exchange，提问作者Midhun