play-coin-code / visualizer

UI-Router state visualizer and transition visualizer

UI-Router State Visualizer and Transition Visualizer

Try the Demo plunker

What

Visualizes the state tree and transitions in UI-Router 1.0+.

This script augments your app with two components:

1. State Visualizer: Your UI-Router state tree, showing the active state and its active ancestors (green nodes)

2. Transition Visualizer: A list of each transition (from one state to another)

   • Color coded transition status (success/error/ignored/redirected)
   • Shows which states were retained during the transition, which were exited, and which were entered.
   • Shows parameter values
   • Shows resolve data

How

This script is distributed as a UMD module. There are two ways to add this to your application:

Using a script tag

• Add a script tag to your HTML. The visualizer will be added to the window as window['ui-router-visualizer'].

  <script src="//unpkg.com/ui-router-visualizer@2"></script>
  

• Create the visualizer:

  Angular 1

  Inject the $uiRouter router instance in a run block. Get the ui-router-visualizer off the window and pass it the router instance.

  Note: in ui-router 1.0.0-beta.2 and earlier, $uiRouter was named ng1UIRouter

  // inject the router instance by name
  app.run(function($uiRouter) {
   var vis = window['ui-router-visualizer'];
   vis.visualizer($uiRouter);
  });

  Angular 2

  Get the ui-router-visualizer off the window. Pass the router instance to the visualizer in the configure method of your UIRouterConfig.

  @Injectable()
  export class MyUIRouterConfig {
    constructor(router: UIRouter) {
      var vis = window['ui-router-visualizer'];
      vis.visualizer(router);
    }
  }
  
  ... 
  @NgModule({
    imports: [ UIRouterModule.forRoot({ configClass: MyUIRouterConfig }) ]
    ...

  React

  Bootstrap UI-Router by calling new UIRouterReact(); Pass the instance to the visualizer.

  var vis = window['ui-router-visualizer'];
  let router = new UIRouterReact();
  
  // register states here
  // ...
  
  vis.visualizer(router);
  router.start();

Using a module loader/bundler like webpack

• Configure your bundler to load ui-router-visualizer. The visualizer will be available 'ui-router-visualizer'.

• Create the visualizer:

  Angular 1

  Get the ui-router-visualizer using require or ES6 import. Inject the $uiRouter router instance in a run block. Provide the router instance to the visualizer.

  Note: in ui-router 1.0.0-beta.2 and earlier, $uiRouter was named ng1UIRouter

  import * as vis from 'ui-router-visualizer';
  // or: var vis = require('ui-router-visualizer');
  
  // inject the router instance by name
  app.run(function($uiRouter) {
   vis.visualizer($uiRouter);
  });

  Angular 2

  Get the ui-router-visualizer using require or ES6 import. Pass the router instance to the visualizer in the configure method of your UIRouterConfig.

  import * as vis from 'ui-router-visualizer';
  // or: var vis = require('ui-router-visualizer');
  
  @Injectable()
  export class MyUIRouterConfig {
    constructor(router: UIRouter) {
      vis.visualizer(router);
    }
  }
  
  ... 
  @NgModule({
    imports: [ UIRouterModule.forRoot({ configClass: MyUIRouterConfig }) ]
    ...

  React

  Get the ui-router-visualizer using require or ES6 import. Bootstrap UI-Router by calling new UIRouterReact(); Pass the instance to the visualizer.

  import * as vis from 'ui-router-visualizer';
  // or: var vis = require('ui-router-visualizer');
  
  let router = new UIRouterReact();
  
  // register states here
  // ...
  
  vis.visualizer(router);
  router.start();