id: ecosystem-angularjs title: single-spa-angularjs

sidebar_label: AngularJS

single-spa-angularjs 是一个类库，可以帮助实现与 AngularJS 一起使用 single-spa registered application lifecycle functions (bootstrap, mount and unmount)。 查看 single-spa-angularjs github.

安装

npm install --save single-spa-angularjs

请注意，你也可以使用 <script src="https://unpkg.com/single-spa-angularjs"></script> 的方式，通过全局变量 singleSpaAngularjs 引入库，如果那样对你来说更方便。

使用打包工具

如果你使用webpack等打包工具，则将以下内容添加到入口文件：

import singleSpaAngularJS from 'single-spa-angularjs';
import angular from 'angular';
const ngLifecycles = singleSpaAngularJS({
  angular: angular,
  mainAngularModule: 'app',
  uiRouter: true,
  preserveGlobal: false,
  template: '<my-component />',
});
export const bootstrap = ngLifecycles.bootstrap;
export const mount = ngLifecycles.mount;
export const unmount = ngLifecycles.unmount;

不使用打包工具

如果不使用打包工具，则需要将你的 angularjs 应用设置为 SystemJS module 或全局变量。 使用 SystemJS module更佳，你可以在 recommended single-spa setup 在中查看更多内容。

作为 SystemJS module

添加如下代码到你的 AngularJS 应用。如果你使用 gulp/grunt 打包文件，需要创建一个 single-spa-application.js 文件，并确保它在最终的构建文件中。

System.register([], function(_export) {
  return {
    execute: function() {
      _export(window.singleSpaAngularjs.default({
        angular: angular,
        mainAngularModule: 'app',
        uiRouter: true,
        preserveGlobal: false,
        template: '<my-component />',
      }))
    }
  }
})

完成此操作后，你就可以使用 System.import() 捆绑文件，而SystemJS + single-spa将知道如何处理您的模块。 你的 loading function 需要被 System.import('name-of-app'). 确保添加 name-of-app 到你的 import map.

作为全局变量

// note that "js" is not capitalized in the name of the global variable.
window.myAngularApp = singleSpaAngularjs({
  angular: angular,
  mainAngularModule: 'app',
  uiRouter: true,
  preserveGlobal: false,
  template: '<my-component />',
})

你的 loading function 必须是全局变量本身， 例如:

singleSpa.registerApplication({
  name: 'my-angular-app',
  app: myAngularApp,
  activeWhen: () => true
});

Options

当调用singleSpaAngularJS（opts）时，所有选项都通过opts参数传递给single-spa-angularjs。提供以下选项：

• angular: (必须) angular主对象, 通常暴露在window上，也可以通过’require（’angular’）’或’import from’angular’`获得。
• domElementGetter: （可选）不带任何参数并返回DOMElement的函数。这个dom元素就是angular应用被初始化，安装和卸载的位置。如果没有提供，默认是创建一个div并添加到 document.body 下。
• mainAngularModule: (必须) 一个字符串，它是由angular初始化的angular模块的名称。请参阅 angular docs 以了解 angular.bootstrap()。
• uiRouter: （可选）如果你使用了 angular-ui-router，请将此选项设置为true或字符串值。字符串的值将作为 ui-view html的属性值。例如， uiRouter: 'core' 将被解析成 <div ui-view="core" /> 而 uiRouter: true 则是 <div ui-view />.
• preserveGlobal: （可选）默认为false的布尔值。 设置是否要在卸载应用后仍保持全局 angular。
• elementId: （可选）一个字符串，将用于标识附加到DOM并由Angular引导的元素。
• strictDi: (可选 - 初始化程序的一部分 config object) 默认为false的布尔值，修改以启用StrictDi模式。
• template: （可选）在应用程序mounted时将插入DOM的html字符串。 该模板位于domElementGetter返回的元素内。 如果未提供，则不会插入模板。 使用angular-ui-router时，由于ui-router会为您将模板放到dom上，因此您通常不需要使用它。

ES5 示例

查看 示例

Custom Props

single-spa custom props are made available as $rootScope.singleSpaProps.

Examples

• polyglot microfrontends account settings: Gulp + angularjs@1.7 project integrated with Vue microfrontends.
• single-spa-es5-angularjs: No build process - just global variables.