5 AngularJS UI-Router Examples

Routes are awesome for SPA’s and HTML5 Push allows us to remove the annoying stupid hash in the URL. However, the deeper the URL goes the trickier it becomes to offer pretty URLs to our users for them to use as bookmarks or such. Step in UI-Router which offers flexible routing with nested views. A good place to start is on the UI-Router Wiki which covers the basics and Nested States. Below are some good examples of Angular UI-Router in action.

1. Angular UI Router Official

A routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine.
A routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine.
Website GitHub Demo

2. Angular UI Router Example

AngularJS Routing Using UI-Router
AngularJS Routing Using UI-Router
Tutorial Demo

3. Angular UI Router Breadcrumb Example

Auto-breadcrumbs with angular-ui-router.
Auto-breadcrumbs with angular-ui-router.
Blog Post Demo

4. Angular UI Tutorial by Egghead

An alternative to AngularJS's default routing module.
An alternative to AngularJS’s default routing module.
Tutorial

5. Angular UI-Router with Meteor Examples

This example is using the Meteor framework which can be used with AngularJS to build modern web applications.

A lightweight meteor-angular bridge, which only do angular bootstrap, nothing more.
A lightweight meteor-angular bridge, which only do angular bootstrap, nothing more.
Meteor Angularite Meteor Route Demo Meteor Route SEO

Further Reading:

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

2 thoughts on “5 AngularJS UI-Router Examples

Leave a Reply

Your email address will not be published. Required fields are marked *