如何以角度创建可插入的应用程序? [英] How to create a pluggable application in angular?

问题描述

我想创建一个应用程序，该应用程序可以分为多个模块，并具有自己的路由和所有模块.并且用户可以从应用主模块打开和关闭这些模块.

I want to create an application which can be divided in multiple module with their own routing and all. And user can turn on and off these modules from application main module.

1. 我是否必须加载所有模块并根据用户是否订阅它来禁用它.我认为这会减慢应用程序加载速度，因为加载所有模块代码并在应用程序引导时注入.
2. 这个问题还有其他替代方法吗?

推荐答案

应为主模块提供已启用模块列表:

The list of enabled modules should be provided for main module:

var enabledModules = [...];

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

显然，enabledModules 数组不能用 $http 正常加载，因为此时应用程序还没有被引导.可以使用 XHR 或服务器端模板来定义它.

Obviously, enabledModules array can't be normally loaded with $http, because the application isn't bootstrapped at this point. XHR or server-side templating may be be used to define it.

或者，可以使用单独的应用程序来加载先决条件.由于使用了DI，所以可以进行彻底的测试.

Alternatively, a separate application can be used to load prerequisites. Due to the use of DI, it can be thoroughly tested.

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));

这篇关于如何以角度创建可插入的应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！