GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → ui-router → Core

ui-router / Core

Licence: mit
UI-Router Core: Framework agnostic, State-based routing for JavaScript Single Page Apps

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Labels

routerstate-machinetransitions

Projects that are alternatives of or similar to Core

Ui Router
The de-facto solution to flexible routing with nested views in AngularJS
Stars: ✭ 13,738 (+12166.07%)
Mutual labels:  state-machine, router
React Router Native Stack
A stack navigation component for react-router-native
Stars: ✭ 171 (+52.68%)
Mutual labels:  router, transitions
Stateful
Finite state machine for Go
Stars: ✭ 172 (+53.57%)
Mutual labels:  state-machine, transitions
kstatemachine
KStateMachine is a Kotlin DSL library for creating finite state machines (FSM) and hierarchical state machines (HSM).
Stars: ✭ 63 (-43.75%)
Mutual labels:  state-machine, transitions
highway
Highway - A Modern Javascript Transitions Manager
Stars: ✭ 1,349 (+1104.46%)
Mutual labels:  router, transitions
React
🔼 UI-Router for React
Stars: ✭ 386 (+244.64%)
Mutual labels:  state-machine, router
React Overdrive
Super easy magic-move transitions for React apps
Stars: ✭ 3,001 (+2579.46%)
Mutual labels:  router, transitions
Highway
Highway - A Modern Javascript Transitions Manager
Stars: ✭ 1,185 (+958.04%)
Mutual labels:  router, transitions
Cherrytree
A flexible nested router.
Stars: ✭ 105 (-6.25%)
Mutual labels:  router
Pilot
Pilot — multifunction JavaScript router.
Stars: ✭ 109 (-2.68%)
Mutual labels:  router
Cottage
Simple, fast HTTP router on koa.js.
Stars: ✭ 103 (-8.04%)
Mutual labels:  router
Hsm
Finite state machine library based on the boost hana meta programming library. It follows the principles of the boost msm and boost sml libraries, but tries to reduce own complex meta programming code to a minimum.
Stars: ✭ 106 (-5.36%)
Mutual labels:  state-machine
Jungle
An embedded key-value store library specialized for building state machine and log store
Stars: ✭ 110 (-1.79%)
Mutual labels:  state-machine
Slide Menu
A multilevel page menu with a smooth slide effect
Stars: ✭ 105 (-6.25%)
Mutual labels:  transitions
When Ts
When: recombinant design pattern for state machines based on gene expression with a temporal model
Stars: ✭ 112 (+0%)
Mutual labels:  state-machine
Router
A simple, compact and fast router package to process HTTP requests
Stars: ✭ 102 (-8.93%)
Mutual labels:  router
Routes
typed bidirectional routes for OCaml/ReasonML web applications
Stars: ✭ 102 (-8.93%)
Mutual labels:  router
Sme Router
A lightweight router lib that implement with express route style
Stars: ✭ 112 (+0%)
Mutual labels:  router
Php Router
simple and flexible Router class for PHP. with Controllers and Middlewares support.
Stars: ✭ 111 (-0.89%)
Mutual labels:  router
Gin
Gin is a HTTP web framework written in Go (Golang). It features a Martini-like API with much better performance -- up to 40 times faster. If you need smashing performance, get yourself some Gin.
Stars: ✭ 53,971 (+48088.39%)
Mutual labels:  router
View All Similar Projects ➔

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].