如何在angular中创建可插拔应用程序？

Question

我想创建一个可以分为多个模块的应用程序，它们各自具有路由功能。用户可以从应用程序主模块打开和关闭这些模块。

1. 我是否必须加载所有模块并根据用户是否已订阅禁用该模块。我认为这会减慢应用程序的加载，因为加载了所有模块代码并在应用程序引导时注入。
2. 还有其他替代方法可以解决此问题吗？

Answer 1

应该为主要模块提供已启用模块的列表：

var enabledModules = [...];

angular.module('app', ['thirdParty', 'app.common'].concat(enabledModules));

显然，enabledModules无法正常加载array $http，因为此时应用程序尚未启动。XHR或服务器端模板可用于定义它。

或者，可以使用单独的应用程序加载先决条件。由于使用了DI，因此可以对其进行全面测试。

angular.module('app', ['thirdParty', 'app.common']);

angular.module('appInitializer', [])
.factory('loader', ($http) => {
  return $http.get('enabled-modules').then((result) => result.data);
})
.factory('initializer', (loader, $document) => {
  return loader.then((enabledModules) => {
    $document.ready(() => {
      angular.bootstrap($document.find('body'), ['app'].concat(enabledModules));
    });
  });
});

angular.injector(['ng', 'appInitializer'])
.get('initializer')
.catch((err) => console.error(err));