explaingit

angular-ui/ui-router

★ 13,440TypeScriptAudience · developerComplexity · 3/5Setup · moderate

TLDR

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.

Mindmap

mindmap
  root((ui-router))
    What it does
      URL to state mapping
      Nested view support
      State machine routing
    Tech stack
      TypeScript
      AngularJS 1.x
      State machine
    Use cases
      Nested dashboards
      Parallel views
      SPA navigation
    Audience
      AngularJS developers
      Legacy app maintainers
    Related projects
      Angular 2 version
      React version
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Replace AngularJS's built-in ngRoute with UI-Router to gain support for nested and parallel views.

USE CASE 2

Define your AngularJS app's navigation as a hierarchy of named states instead of raw URL patterns.

USE CASE 3

Build a dashboard where a sidebar and main content area update independently based on the current state.

USE CASE 4

Port a UI-Router AngularJS app's routing concepts to the React or Angular 2+ version of UI-Router.

Tech stack

TypeScriptAngularJS

Getting it running

Difficulty · moderate Time to first run · 1h+

Designed for AngularJS 1.x (a legacy framework), separate packages exist for Angular 2+ and React.

In plain English

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.

Copy-paste prompts

Prompt 1
Show me how to define a parent state and two nested child states in AngularJS UI-Router with separate views for each.
Prompt 2
My AngularJS app has a dashboard with a sidebar and main content panel. How do I set up UI-Router named views to update them independently?
Prompt 3
I'm switching from AngularJS ngRoute to UI-Router. What changes do I need to make to my config block and templates?
Prompt 4
How do I pass parameters between states in UI-Router AngularJS and read them in the destination controller?
Open on GitHub → Explain another repo

← angular-ui on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.