gitmyhub

ui-router

TypeScript ★ 13k updated 5mo ago

The de-facto solution to flexible routing with nested views in AngularJS

UI-Router is a state-machine-based routing library for AngularJS 1.x that maps URLs to named states and enables nested views within single-page applications.

TypeScriptAngularJSsetup: moderatecomplexity 3/5

UI-Router is a routing framework for AngularJS, which is the older 1.x version of Google's Angular web framework. Routing here refers to the machinery that keeps the URL in a browser bar in sync with what the user is looking at in a single-page application. A single-page app is a website that loads once and then swaps content in and out as you navigate, without reloading the whole page. The routing layer has to update the URL as the user moves around, and also do the reverse: when the URL changes, drive the app to show the right content. That two-way relationship is what the README describes.

What distinguishes UI-Router from simpler routing tools is how it organizes the application. Rather than just mapping URLs to templates, it models the whole app as a hierarchical tree of named states. A state machine, a standard computer science concept for tracking which mode something is in, manages the transitions between those states in a structured way. This approach supports nested views, where one area of a page can contain its own independently swappable sub-section, which flat URL-based routing handles awkwardly.

The README is short and acts mostly as a links hub. It notes that this repository contains the Angular 1.x source, and points to separate projects for Angular 2 and React that carry the same state-based routing ideas into those other frameworks. From there it links to tutorials, API documentation, a downloadable build, a guide, a sample app, and a frequently asked questions page.

Extra resources listed include an in-depth wiki, slides comparing UI-Router to AngularJS's built-in routing, and several introductory videos. There are no installation steps or code samples in the README itself; those live in the linked documentation. Anyone reporting an issue or contributing code is directed to read the contributor guidelines first.

Where it fits