如何同时向Angular应用app2注入模块app1及其源文件？

好问题！AngularJS 1.x本身并没有内置的模块自动加载机制，所以没办法直接让app2在注入app1模块的同时自动加载它的源文件——你目前手动在index.html引入app1.js再加app2.requires.push('app1')的方式，其实是AngularJS 1.x里依赖其他模块的标准常规操作。

不过如果想要实现「注入模块的同时自动加载对应源文件」的效果，我们可以借助第三方模块加载工具来实现，下面给你两种常用的方案：

方案一：使用RequireJS（通用模块加载器） #

RequireJS可以帮我们管理模块的依赖关系，自动加载所需的脚本文件，步骤如下：

1. 配置RequireJS
   创建一个main.js作为配置入口：

require.config({
  paths: {
    'angular': 'path/to/angular', // 你的angular.js路径
    'app1': '../app1', // app1.js的相对路径
    'app2': './app2'
  },
  shim: {
    // 处理非AMD规范的库，比如AngularJS
    'angular': { exports: 'angular' },
    'app1': { deps: ['angular'] }, // app1依赖Angular
    'app2': { deps: ['angular', 'app1'] } // app2依赖Angular和app1
  }
});

// 启动app2
require(['app2'], function(angular) {
  angular.bootstrap(document.body, ['app2']);
});

2. 修改app1.js和app2.js适配AMD规范
   app1.js改成：

define(['angular'], function(angular) {
  return angular.module("app1", []);
});

app2.js改成：

define(['angular', 'app1'], function(angular) {
  // 直接把app1作为依赖传入模块定义，不需要再用requires.push
  var app2 = angular.module("app2", ['app1']);
  return app2;
});

3. 修改index.html
   只需要引入RequireJS和配置文件即可，RequireJS会自动加载所有依赖的脚本：

<script src="path/to/require.js" data-main="main.js"></script>

方案二：使用ocLazyLoad（AngularJS专用懒加载工具） #

如果你只是想在Angular应用里动态加载模块和对应的脚本，ocLazyLoad是更贴合Angular生态的选择：

1. 引入ocLazyLoad脚本
   在index.html里先加载Angular和ocLazyLoad：

<script src="angular.js"></script>
<script src="ocLazyLoad.min.js"></script>

2. 修改app2的定义并加载app1
   把ocLazyLoad作为app2的依赖，然后在运行块或控制器里动态加载app1：

// 把oc.lazyLoad加入app2的依赖
var app2 = angular.module("app2", ['oc.lazyLoad']);

// 在运行块里加载app1（也可以在需要的时候，比如某个路由触发时加载）
app2.run(function($ocLazyLoad) {
  $ocLazyLoad.load({
    name: 'app1', // 要注入的模块名
    files: ['../app1.js'] // app1.js的路径
  }).then(function() {
    // 这里可以写app1加载完成后的逻辑，比如使用app1的服务、指令等
    console.log('app1已加载并注入app2');
  });
});

总结 #

• 如果你是同步加载所有模块，你当前手动引入脚本+requires.push的方式是AngularJS 1.x的标准做法，没有问题；
• 如果你想要自动加载依赖的源文件，就需要借助RequireJS或ocLazyLoad这类工具来实现。

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