Skip to content

ui-router/visualizer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

75823f0 · Dec 2, 2017
Dec 2, 2017
Jul 26, 2016
Dec 2, 2017
Oct 22, 2017
Jan 28, 2017
Dec 2, 2017
Feb 3, 2016
May 16, 2017
Dec 2, 2017
Jan 28, 2017
Oct 22, 2017
Dec 2, 2017
Dec 2, 2017

Repository files navigation

UI-Router State Visualizer and Transition Visualizer

Try the Demo plunker

Image of Visualizer

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)

    • Clicking a state will transition to that state.
    • If your app is large, state trees can be collapsed by double-clicking a state.
    • Supports different layouts and zoom.
  2. Transition Visualizer: A list of each transition (from one state to another)

    • Color coded Transition status (success/error/ignored/redirected)
    • Hover over a Transition to show which states were entered/exited, or retained during the transition.
    • Click the Transition to see details (parameter values and resolve data)

How

The Visualizer is a UI-Router plugin. Register the plugin with the UIRouter object.

Locate the Plugin

  • Using a <script> tag

    Add the script as a tag in your HTML.

    <script src="//unpkg.com/@uirouter/visualizer@4"></script>

    The visualizer Plugin can be found (as a global variable) on the window object.

    var Visualizer = window['@uirouter/visualizer'].Visualizer;
  • Using require or import (SystemJS, Webpack, etc)

    Add the npm package to your project

    npm install --save @uirouter/visualizer
    
    • Use require or ES6 import:
    var Visualizer = require('@uirouter/visualizer').Visualizer;
    import { Visualizer } from '@uirouter/visualizer';

Register the plugin

First get a reference to the UIRouter object instance. This differs by framework (AngularJS, Angular, React, etc. See below for details).

After getting a reference to the UIRouter object, register the Visualizer plugin

var pluginInstance = uiRouterInstance.plugin(Visualizer);

 


Getting a reference to the UIRouter object

Angular 1

Inject the $uiRouter router instance in a run block.

// inject the router instance into a `run` block by name
app.run(function($uiRouter) {
 var pluginInstance = $uiRouter.plugin(Visualizer);
});

Angular 2

Use a config function in your root module's UIRouterModule.forRoot(). The router instance is passed to the config function.

import { Visualizer } from "@uirouter/visualizer";

...

export function configRouter(router: UIRouter) {  
  var pluginInstance = router.plugin(Visualizer);
}

...

@NgModule({
  imports: [ UIRouterModule.forRoot({ config: configRouter }) ]
  ...

React (Imperative)

Create the UI-Router instance manually by calling new UIRouterReact();

var Visualizer = require('@uirouter/visualizer').Visualizer;
var router = new UIRouterReact();
var pluginInstance = router.plugin(Visualizer);

React (Declarative)

Add the plugin to your UIRouter component

var Visualizer = require('@uirouter/visualizer').Visualizer;

...
render() {
  return <UIRouter plugins=[Visualizer]></UIRouter>
}