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:
-
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.
-
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>
tagAdd the script as a tag in your HTML.
The visualizer Plugin can be found (as a global variable) on the window object.
var Visualizer = window'ui-router-visualizer'Visualizer; -
Using
require
orimport
(SystemJS, Webpack, etc)Add the npm package to your project
npm install --save ui-router-visualizer
- Use
require
or ES6import
:
var Visualizer = Visualizer;; - Use
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;
UIRouter
object
Getting a reference to the Angular 1
Inject the $uiRouter
router instance in a run block.
// inject the router instance into a `run` block by nameapp;
Angular 2
Use a config function in your root module's UIRouterModule.forRoot()
.
The router instance is passed to the config function.
; ... { var pluginInstance = router;} ... @
React (Imperative)
Create the UI-Router instance manually by calling new UIRouterReact();
var Visualizer = Visualizer;var router = ;var pluginInstance = router;
React (Declarative)
Add the plugin to your UIRouter
component
var Visualizer = Visualizer; ... { return <UIRouter plugins=Visualizer></UIRouter>}