No description or website provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Updating references to single-spa-angularjs Jun 28, 2018
.babelrc Exposing as a umd library. Also tabs -> spaces Feb 13, 2018
.gitignore
.npmignore Fixing publish configuration May 9, 2016
LICENSE
README.md
package.json v3.0.1 Jun 28, 2018
yarn.lock

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.