Routing on AngularTS

State-based routing in AngularTS applications

Mon, 01 Jan 0001 00:00:00 +0000

AngularTS ships a full-featured router ported from UI-Router. Unlike simple URL-based routers, it models your application as a state machine: each screen or workflow step is a named state, and navigation means transitioning from one state to another. URLs are one way to enter a state, but they are not the primary concept—states are.

Key concepts

The router is built from five interlocking primitives:

States — named nodes in the application state tree. Each state can have a URL, template, controller, and resolved data.
Views — the rendered output of a state, inserted into a ng-view element in the DOM.
Resolves — asynchronous data-fetching functions that run before a state is entered.
Transitions — the lifecycle of moving from one state (or set of states) to another, with hooks you can intercept.
URL matching — an optional layer that maps browser URLs onto states and keeps them in sync.

How routing integrates with the module system

The router exposes three injectable services that cover the full routing API:

States

Mon, 01 Jan 0001 00:00:00 +0000

A state represents a place in an AngularTS application: a page, a nested layout, a modal, or a step in a workflow. States are declared as plain objects and registered through $stateProvider during configuration or $stateRegistry at runtime.

Exact state and router contracts live in TypeDoc:

Register States

Register most states in a config block, or use module.state() for the same provider registration through the fluent module API. Calls to both $stateProvider.state() and module.state() are chainable.

Routing transitions and lifecycle hooks

Mon, 01 Jan 0001 00:00:00 +0000

Every navigation in AngularTS is a Transition—a structured object that describes moving from one state (or set of states) to another. Transitions carry the from-state, the to-state, all parameter values, the tree of entering/exiting/retained states, and the resolve context. You hook into their lifecycle to implement auth guards, loading indicators, analytics, scroll resets, and more.

What is a transition

When you call $state.go('contacts.detail', { contactId: 42 }), the router creates a Transition instance. Internally it computes a TreeChanges object with five paths:

URL matching and configuration in AngularTS router

Mon, 01 Jan 0001 00:00:00 +0000

The AngularTS router matches the browser’s URL against registered state declarations and activates the best matching state. URL matching is an optional layer on top of the state machine—states can be navigated to programmatically without any URL involvement—but most applications use URLs to make deep-linking and browser history work correctly.

How URL matching works

When the browser URL changes (or on initial load), the UrlService calls sync(). It iterates all registered URL rules in priority order and finds the best match using a weighted scoring system. The winning rule’s handler is called, which calls $state.go() with the matched state and extracted parameter values.