No description or website provided.
Clone or download
Latest commit 3600feb Jun 29, 2018

README.md

single-spa-angularjs

Generic lifecycle hooks for AngularJS (Angular 1) applications that are registered as single-spa applications of single-spa.

Examples

In addition to this Readme, example usage of single-spa-angularjs can be found in the single-spa-examples project.

Quickstart

First, in the single-spa application, run npm install --save single-spa-angularjs. Note that you can alternatively <script src="https://unpkg.com/single-spa-angularjs"></script> and access the library via the singleSpaAngularjs global variable if that is easier for you.

Then, create an entry file for the application:

import singleSpaAngularJS from 'single-spa-angularjs';
import angular from 'angular';

const ngLifecycles = singleSpaAngularJS({
  angular: angular,
  domElementGetter: () => document.getElementById('main-content'),
  mainAngularModule: 'app',
  uiRouter: true,
  preserveGlobal: false,
  template: '<my-component />',
});

export const bootstrap = [
  ngLifecycles.bootstrap,
];

export const mount = [
  ngLifecycles.mount,
];

export const unmount = [
  ngLifecycles.unmount,
];

Looking for an ES5 version?

Check out this example repo

Options

All options are passed to single-spa-angularjs via the opts parameter when calling singleSpaAngularJS(opts). The following options are available:

  • angular: (required) The main angular object, which is generally either exposed onto the window or is available via require('angular') or import angular from 'angular'.
  • domElementGetter: (required) A function that takes in no arguments and returns a DOMElement. This dom element is where the angular application will be bootstrapped, mounted, and unmounted.
  • mainAngularModule: (required) A string that is the name of the angular module that will be bootstrapped by angular. See angular docs for angular.bootstrap().
  • uiRouter: (optional) If you are using angular-ui-router, set this option to either true or to a string value. The string value will be the value of the ui-view html attribute. For example, uiRouter: 'core' will be <div ui-view="core" /> whereas uiRouter: true turns into <div ui-view />.
  • preserveGlobal: (optional) A boolean that defaults to false. Set if you want to keep angular on the global even after an app unmounts.
  • elementId: (optional) A string which will be used to identify the element appended to the DOM and bootstrapped by Angular.
  • strictDi: (optional - part of the bootstrap config object) A boolean that defaults to false. Set if you want to enable StrictDi mode
  • template: (optional) An html string that will be inserted into the DOM when the app is mounted. The template goes inside of the element returned by domElementGetter. If not provided, no template will be inserted. When using angular-ui-router, you often do not need to use this since ui-router will be putting a template onto the dom for you.