Try the Demo plunker
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)
The Visualizer is a UI-Router plugin.
Register the plugin with the UIRouter
object.
-
Using a
<script>
tagAdd 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
orimport
(SystemJS, Webpack, etc)Add the npm package to your project
npm install --save @uirouter/visualizer
- Use
require
or ES6import
:
var Visualizer = require('@uirouter/visualizer').Visualizer;
import { Visualizer } from '@uirouter/visualizer';
- Use
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);
Optionally you can pass configuration to how the visualizer displays the state tree and the transitions.
The state tree visualizer can be configured to style each node specifically.
Example below marks every node with angular.js view with is-ng1 class.
var options = {
stateVisualizer: {
node: {
classes(node) {
return Object.entries(node.views || {}).some(routeView => routeView[1] && routeView[1].$type === 'ng1')
? 'is-ng1'
: '';
},
},
},
};
var pluginInstance = uiRouterInstance.plugin(Visualizer, options);
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);
});
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 }) ]
...
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);
Add the plugin to your UIRouter
component
var Visualizer = require('@uirouter/visualizer').Visualizer;
...
render() {
return <UIRouter plugins=[Visualizer]></UIRouter>
}