Download
UI-Router provides state based routing. Each feature of an application is defined as a state. One state is active at any time, and UI-Router manages the transitions between the states. Each state describes the URL, the UI (a view or views), data prerequisites, and other logical prerequisites (such as authentication) for a feature. Before activating a state, UI-Router first fetches any prerequisites (asynchronously), and then activates the view(s) and updates the URL. UI-Router states are hierarchical; states can be nested inside other states, forming a tree. Child states may inherit data and behavior (such as authentication) from their parent states. A client-side router updates the browser URL as the user nagivates through the single page app. Conversely, changes to the browser’s URL can drive navigation of the app, enabling a user to create deep-links (i.e., bookmarks) to areas deep within the application.
Features
- A state defines a feature’s UI (and UI behavior) using a view (or multiple views)
- A state can define a URL, but it isn’t required. If a state has defined a URL, the browser’s location is updated to that URL when the state is active
- A state can be parameterized. When a state needs specific data, such as which contact to edit, a parameter such as contactId may be defined
- Typed parameters are encoded as strings in the URL, but are converted to a native type when retrieved in javascript code
- A feature often requires that some data be fetched from a server-side API. Often, that data is represented as an ID in a url parameter
- Navigating between parts of the application occurs by transitioning from one state to another. Transitions between states are transaction-like, i.e., they either completely succeed or completely fail
Project Samples
