Repository files navigation

The initial use case for this functionality is to implement "tabs" for application modules.Using Sticky States, a single app can implement one state tree for each tab, and have them operate at the same time, in parallel to each other.Each tab is implemented as its own UI-Router state tree.While one tab is active, the other tab is inactivated, but can be reactivated without losing any work in progress.

For the tabs use case, Sticky States work best along withDeep State Redirect

A Sticky State is the root of a UI-Router state tree which can continue running even after it is "exited".The sticky state (and its children) have a different lifecycle than normal states.The views of a Sticky State (and all activated substates) are retained until one of two things happen:

• The parent of the sticky state is exited
• The parent of the sticky state is directly activated

If a sibling of the sticky state (or a child of a sibling) is activated, the sticky state tree will "inactivate".A transition back to the inactivate state will reactivate it.

Sticky states works requiresui-router-core 2.0.0 or above.Runnpm ls to check the version ofui-router-core included with the UI-Router distribution for your framework

In Angular 1, register a plugin by injecting$uiRouterProvider in aconfig() block.

import{StickyStatesPlugin}from"@uirouter/sticky-states";angular.module('myapp',['ui.router']).config(function($uiRouterProvider){$uiRouterProvider.plugin(StickyStatesPlugin);});

In Angular 2, register a plugin in yourUIRouterConfig class

import{StickyStatesPlugin}from"@uirouter/sticky-states";exportclassMyConfig{configure(uiRouter:UIRouter){uiRouter.plugin(StickyStatesPlugin);}}

In React, register a plugin after creating yourUIRouterReact instance.

import{StickyStatesPlugin}from"@uirouter/sticky-states";letrouter=newUIRouterReact();router.plugin(StickyStatesPlugin);

Or, if using component bootstrapping, add the plugin in your routerConfig function.

letrouterConfig=(router)=>router.plugin(StickyStatesPlugin);return<UIRouterReactconfig={routerConfig}/>;

The sticky state's viewmust target a namedui-view.The namedui-viewmust not be shared with other states.

Create and target a named ui-view.

<ui-viewname="admin"></ui-view>

letadminModule={name:'admin',sticky:true,views:{admin:{component:AdminComponent}}}

The AdminComponent should remain active in theui-view namedadmin, even if a sibling state is activated.

When a sticky state is inactive, it's often desired to hide the contents from the UI.This can be achieved usingStateService.includes.

In some cases,ui-sref-active may also be used to toggle a class on the namedui-view.

These minimal examples show how to get started with sticky states in:

• AngularJS
• Angular
• React

This project was ported from theUI-Router Extras project for legacy UI-Router.For more information, see the ui-router extras documentation:http://christopherthielen.github.io/ui-router-extras/#/sticky

TODO: Rewrite docs