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.

安装

  1. npm install --save single-spa-angularjs

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

使用打包工具

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

  1. import singleSpaAngularJS from 'single-spa-angularjs';
  2. import angular from 'angular';
  3. const ngLifecycles = singleSpaAngularJS({
  4. angular: angular,
  5. mainAngularModule: 'app',
  6. uiRouter: true,
  7. preserveGlobal: false,
  8. template: '<my-component />',
  9. });
  10. export const bootstrap = ngLifecycles.bootstrap;
  11. export const mount = ngLifecycles.mount;
  12. export const unmount = ngLifecycles.unmount;

不使用打包工具

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

作为 SystemJS module

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

  1. System.register([], function(_export) {
  2. return {
  3. execute: function() {
  4. _export(window.singleSpaAngularjs.default({
  5. angular: angular,
  6. mainAngularModule: 'app',
  7. uiRouter: true,
  8. preserveGlobal: false,
  9. template: '<my-component />',
  10. }))
  11. }
  12. }
  13. })

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

作为全局变量

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

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

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

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