Skip to content
UI-Router Core: Framework agnostic, State-based routing for JavaScript Single Page Apps
Branch: master
Clone or download
christopherthielen chore(package): bump @types/jasmine@3.3.13, fork-ts-checker-webpack-p…
…lugin@1.3.7, husky@2.4.1, karma-webpack@4.0.2, prettier@1.18.2, pretty-quick@1.11.1, rollup@1.15.5, rollup-plugin-node-resolve@5.0.2, tslint@5.17.0, typescript@3.5.2

, webpack@4.34.0
Latest commit b41e693 Jun 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Merge pull request #312 from ui-router/base-href-regex Jan 28, 2019
test Merge pull request #312 from ui-router/base-href-regex Jan 28, 2019
.editorconfig chore(*): added .editorconfig file Aug 11, 2017
.gitignore chore(gitignore): ignore yarn-error.log Apr 20, 2018
.npmignore chore(test): Test downstream uirouter/angular project Dec 27, 2017
.prettierignore chore(package): Do not process changelog using prettier Apr 29, 2018
.prettierrc.json
.travis.yml chore(travis): normalize travis configs Apr 21, 2018
.yarnclean Add empty .yarnclean Jan 9, 2017
CHANGELOG.md 5.0.23 Jan 28, 2019
CONTRIBUTING.md docs(CONTRIBUTING): update contributing file with npm scripts info Aug 31, 2016
LICENSE style(License): update copyright year to range Jan 6, 2015
README.md Update README.md Aug 3, 2018
artifacts.json chore(package): Just Update Prettier™ Jan 10, 2019
downstream_projects.json test(typescript): Add tests for typescript 2.7-3.2 and use strict: tr… Jan 28, 2019
karma.conf.js Just Use Prettier™ Apr 9, 2018
package.json chore(package): bump @types/jasmine@3.3.13, fork-ts-checker-webpack-p… Jun 14, 2019
rollup.config.js update libs May 19, 2018
tsconfig.json
tslint.json chore(tslint): do not require trailing commas in function calls Jun 24, 2018
typedoc.json docs(url): Move docs from interface level to UrlService/UrlConfig/Url… Aug 11, 2018
yarn.lock chore(package): bump @types/jasmine@3.3.13, fork-ts-checker-webpack-p… Jun 14, 2019

README.md

UI-Router Core  Build Status

UI-Router core provides client-side Single Page Application routing for JavaScript. This core is framework agnostic. It is used to build UI-Router for Angular 1, UI-Router for Angular 2, and UI-Router React.

SPA Routing

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.

Features

UI-Router Core provides the following features:

  • State-machine based routing
    • Hierarchical states
    • Enter/Exit hooks
  • Name based hierarchical state addressing
    • Absolute, e.g., admin.users
    • Relative, e.g., .users
  • Flexible Views
    • Nested Views
    • Multiple Named Views
  • Flexible URLs and parameters
    • Path, Query, and non-URL parameters
    • Typed parameters
      • Built in: int, string, date, json
      • Custom: define your own encoding/decoding
    • Optional or required parameters
    • Default parameter values (optionally squashed from URL)
  • Transaction-like state transitions
    • Transition Lifecycle Hooks
    • First class async support

Get Started

Get started using one of the existing UI-Router projects:

Build your own

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:

UIView

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 (optional, but useful)

A UISref is a link (absolute, or relative) which activates a specific state and/or parameters. When the UISref is clicked, it should initiate a transition to the linked state.

UISrefActive (optional)

When combined with a UISref, a UISrefActive toggles a CSS class on/off when its UISref is active/inactive.

Integrate with your framework's bootstrap mechanism (optional)

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. On the other hand, UI-Router for React uses a simple JavaScript based bootstrap, i.e., new UIRouterReact().start();.

Minimal Example

This example doesn't have UIView, UISref, or anything like that. It bootstrap the router and naively manipulates the DOM when states are activated.

https://stackblitz.com/edit/ui-router-plain-javascript?file=index.js

Note: do not model your own router off this example, it is meant to show only the bare minimum.

Getting help

Create an issue or contact us on Gitter.

You can’t perform that action at this time.