Routing frameworks for SPAs update the browser's URL as the user navigates through the app. Conversely, this allows changes to the browser's URL to drive navigation through the app, thus allowing the user to create a bookmark to a location deep within the SPA.
UI-Router applications are modeled as a hierarchical tree of states. UI-Router provides a state machine to manage the transitions between those application states in a transaction-like manner.
UI-Router Core provides the following features:
Get started using one of the existing UI-Router projects:
UI-Router core can be used implement a router for any web-based component framework. There are four basic things to build for a specific component framework:
A UIView is a component which acts as a viewport for another component, defined by a state. When the state is activated, the UIView should render the state's component.
UISref is a link (absolute, or relative) which activates a specific state and/or parameters.
UISref is clicked, it should initiate a transition to the linked state.
When combined with a
UISrefActive toggles a CSS class on/off when its
UISref is active/inactive.
Implement framework specific bootstrap requirements, if any.
For example, UI-Router for Angular 1 and Angular 2 integrates with the ng1/ng2 Dependency Injection lifecycles.
This example doesn't have UIView, UISref, or anything like that. It bootstrap the router and naively manipulates the DOM when states are activated.
Note: do not model your own router off this example, it is meant to show only the bare minimum.