UI-Router Sample App

Welcome to the sample app!

This is a demonstration app intended to highlight some patterns that can be used within UI-Router. These patterns should help you to to build cohesive, robust apps. Additionally, this app uses state-vis to show the tree of states, and a transition log visualizer.

App Overview

First, start exploring the application's functionality at a high level by activating one of the three submodules: Messages, Contacts, or Preferences. If you are not already logged in, you will be taken to an authentication screen (the authentication is fake; the password is "password")

Patterns and Recipes

  • Require Authentication
  • Previous State
  • Redirect Hook
  • Default Param Values
  • Click a node to activate that state.
  • Select a state from the dropdown to activate that state.
  • Double click a node to auto-collapse that section of the tree when inactive. Collapsed nodes are displayed with a dotted outline and the count of collapsed children.
  • Lazy loaded states (including future states) are displayed with a dashed outline.
Layout:
Node size:1x
Minimize
Minimize
Close
app welcome active home login contacts.** prefs.** mymessages.**