# angular-ui/ui-router

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/angular-ui-ui-router).**

13,435 stars · 2,939 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/angular-ui/ui-router
- Homepage: http://ui-router.github.io/
- awesome-repositories: https://awesome-repositories.com/repository/angular-ui-ui-router.md

## Topics

`angularjs` `javascript` `router` `routing` `state-machine` `state-tree` `typescript` `ui-router`

## Description

UI-Router is a routing framework for AngularJS applications that maps URLs to a hierarchical tree of states and nested views. It functions as a state-based navigation engine, managing view transitions and dependencies through defined states rather than simple linear URL paths.

The system acts as a nested view router, enabling the simultaneous rendering of multiple content areas by mapping application states to named views. It also serves as a client-side route controller, providing mechanisms to intercept transitions for authentication checks and resolve data dependencies before rendering views.

The framework covers a broad range of capabilities including client-side access control to restrict state access and asynchronous data resolution to prevent flickering content. It supports complex layout orchestration through hierarchical state nesting and manages dynamic navigation via route parameters and default child state redirection.

## Tags

### Software Engineering & Architecture

- [State-Based Route Mapping](https://awesome-repositories.com/f/software-engineering-architecture/tree-traversal-algorithms/tree-based-hierarchical-navigation/navigation-state-trees/state-based-route-mapping.md) — Maps application navigation to a hierarchical tree of named states rather than simple URL patterns.
- [Hierarchical View Nesting](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/centralized-state-containers/state-containers/hierarchical-state-composition/hierarchical-view-nesting.md) — Maintains parent-child relationships between states to allow partial page updates while preserving layout consistency.
- [Asynchronous Transition Guards](https://awesome-repositories.com/f/software-engineering-architecture/external-content-handlers/navigation-handlers/asynchronous-transition-guards.md) — Uses asynchronous transition guards to validate permissions or trigger redirects before a state activates.
- [Custom State Transition Hooks](https://awesome-repositories.com/f/software-engineering-architecture/state-transition-models/custom-state-transition-hooks.md) — Executes custom logic during state changes to perform authentication checks or data validation before allowing transitions. ([source](http://ui-router.github.io/resources/sampleapp/))
- [Navigation State Trees](https://awesome-repositories.com/f/software-engineering-architecture/tree-traversal-algorithms/tree-based-hierarchical-navigation/navigation-state-trees.md) — Maintains structural consistency by mapping navigation to a hierarchical tree of states. ([source](https://ui-router.github.io/docs/))
- [Hierarchical View Navigation](https://awesome-repositories.com/f/software-engineering-architecture/tree-traversal-algorithms/tree-based-hierarchical-navigation/navigation-state-trees/hierarchical-view-navigation.md) — Maps application states to a hierarchical tree to control how users move between different views. ([source](https://ui-router.github.io/guide/))

### User Interface & Experience

- [Named View Orchestration](https://awesome-repositories.com/f/user-interface-experience/named-view-orchestration.md) — A navigation tool that renders multiple content areas simultaneously by mapping application states to named views.
- [Dependency Resolvers](https://awesome-repositories.com/f/user-interface-experience/asynchronous-data-fetching/dependency-resolvers.md) — Resolves external data dependencies before rendering to ensure the view is fully populated upon activation. ([source](https://ui-router.github.io/ng2))
- [Route Resolvers](https://awesome-repositories.com/f/user-interface-experience/asynchronous-data-fetching/route-resolvers.md) — Provides asynchronous data resolution to ensure components have required data before views are rendered.

### Web Development

- [Routing Frameworks](https://awesome-repositories.com/f/web-development/routing-frameworks.md) — Provides a comprehensive routing framework for AngularJS applications based on hierarchical states and nested views.
- [State Activation Deferral](https://awesome-repositories.com/f/web-development/asynchronous-state-managers/promise-based-state-resolution/state-activation-deferral.md) — Prevents empty view flashes by deferring state activation until all required asynchronous data promises are resolved.
- [Client-side Routing](https://awesome-repositories.com/f/web-development/client-side-routing.md) — Implements a robust routing system for managing navigation and view transitions within AngularJS single-page applications.
- [Client-Side Routing Engines](https://awesome-repositories.com/f/web-development/client-side-routing-engines.md) — Ships a routing engine that intercepts transitions to perform authentication checks and resolve data dependencies.
- [Data Fetching](https://awesome-repositories.com/f/web-development/data-fetching-caching/data-fetching.md) — Retrieves required data before a state activates and delivers it to components once the process completes. ([source](http://ui-router.github.io/resources/sampleapp/))
- [Multi-View Rendering](https://awesome-repositories.com/f/web-development/dynamic-view-rendering/multi-view-rendering.md) — Displays different pieces of content simultaneously by mapping specific states to named views on a single page. ([source](https://ui-router.github.io/ng2))
- [Distributed State Definitions](https://awesome-repositories.com/f/web-development/distributed-state-definitions.md) — Enables state definitions to be registered across multiple modules and queues child states until parents are available. ([source](https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions))
- [Route Parameter Extraction](https://awesome-repositories.com/f/web-development/routing-systems/routing/parameter-handling-utilities/path-parameter-converters/route-parameter-extraction.md) — Extracts path, query, and hash parameters from a URL to send dynamic data to specific states. ([source](https://ui-router.github.io/ng2))
- [Named Route Redirects](https://awesome-repositories.com/f/web-development/routing-systems/routing/route-naming-systems/named-route-redirects.md) — Routes requests for top-level states to predefined child states to ensure a consistent landing view. ([source](http://ui-router.github.io/resources/sampleapp/))

### Mobile Development

- [State-Driven Navigation](https://awesome-repositories.com/f/mobile-development/navigation-routing/routing/state-driven-navigation.md) — Functions as a state-based navigation engine where transitions are driven by defined application states.

### Security & Cryptography

- [State Access Restrictions](https://awesome-repositories.com/f/security-cryptography/domain-access-restrictions/request-access-restrictions/resource-access-restrictions/action-based-access-restrictions/conditional-access-restrictions/state-access-restrictions.md) — Evaluates user permissions before a state transition begins to block access or redirect to a different view. ([source](https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions))
- [Navigation Access Controls](https://awesome-repositories.com/f/security-cryptography/identity-access-management/access-control/access-control-models/permission-based-security/access-control-policies/navigation-access-controls.md) — Includes hooks to restrict access to specific states based on user permissions or authentication status.

### Artificial Intelligence & ML

- [Default State Redirection](https://awesome-repositories.com/f/artificial-intelligence-ml/workflow-state-management/stateful-routing/default-state-redirection.md) — Redirects requests for a parent state to a specific child state using markers or URL routing. ([source](https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions))

### Data & Databases

- [Route Parameter Injection](https://awesome-repositories.com/f/data-databases/data-querying/query-parameter-filters/url-path-query-injections/route-parameter-injection.md) — Extracts dynamic values from the URL path and query string to configure state behavior and data fetching.