AngularJS UI-Router – Introduction

Antonio MoralesDecember 2nd, 2014Last Updated: December 19th, 2017

0 60 3 minutes read

This is the first post of a series of 3, presenting AngularJS UI-Router library:

Introduction

AngularJS is a well-known Javascript framework nowadays. It provides a great support to create SPA (Single Page Applications), easing some of the tedious stuff needed when writing client-side Javascript applications (boilerplate code, DOM bindings, URL routing, etc).

AngularJS is shipped with all the necessary things to build expressive applications without depending on third-party libraries. Nevertheless, in very short time, AngularJS has created a great and very active community around it, creating different AngularJS components over well-known Javascript libraries, like Bootstrap, jQuery UI, etc. These new components are very useful to improve and maximize the potential of our applications.

One of the key points when creating single page applications is the routing mechanism used. The main objective of routing mechanism is to achieve that the user navigates the application like a normal site, but also avoiding or reducing the annoying waiting time due to a page change (page transition).

AngularJS already provides support for routing through the ngRoute module. ngRoute is a basic routing library where we can specify just one view and controller for any route (URL).

But there are situations when we need more control over routes or we need composite or nested views and we can’t achieve it easily with ngRoute.

The AngularJS community has created the AngularUI library. It provides different components which can be used in our AngularJS applications. This library has been broken down into several modules, so that, we can choose only the components we are interested in, instead of including the whole library.

AngularJS UI-Router

The UI-Router is a routing framework for AngularJS built by the AngularUI team, providing a different approach than ngRoute. Unlike ngRoute, it allows us to change the application views based on the state of the application and not just the URL route. In other words, it converts the parts of the application interface into a state machine.

As stated before, UI-Router is organised around states, which may optionally have routes, as well as other kind of behaviours attached. States are bound to named, nested and parallel views, allowing powerfully managing the application’s interface. With this approach, views and routes aren’t tied to the site URL, so we can change the parts of the site using the routing even if the URL does not change.

The library provides a lot of extra control in views: nested views, multiple views on the same page, etc. In order to have a finer grain control over the application routing, UI-Router is a great library to take advantage of.

States VS URL Routes

One of the drawbacks of routes is that we have to tie a route with an URL, having to use ngInclude or other method to change different parts of the page managed by this route. Using states, we are not tied to the URLs to modify parts of the application. States allows us to change parts of the pages using its routing process even when we don’t need to change the URL. Like ngRoute, uiRoute allows to configure the states, routing, controllers and views using the .config() command of AngularJS but there are some reasons because uiRoute has some advantages over the features provided by ngRoute:

UI-Router allows nested views and multiple views in each state. States are bound to named, nested and parallel views. It allows to manage the application’s interface in a more powerful way
With states you can access different information about the states and pass information between them
You can determine in which state you are on each moment, so you can act over the UI accordingly, for example, putting an active class to the navigation element for that state
States can be bound to URLs or not but states bound to URLs will be updated every time the URL changed using the custom uiRouter element ui-sref. Very handy for URLs based applications
State decorators can be used to modify dynamically the states configuration. It can be used to add custom functionality to ui-router, for example inferring template URLs based on the state name instead of configure them on each state beforehand

Conclusions

AngularJS routing through ngRoute is a great feature to create URL-based client side applications. But there are situations where we need more control over the components used on each URL.

For these use cases, AngularJS UI-Router library comes to the rescue because it allows us to break down our application into states where the states can have children states or multiple components. UI-Route library gives a lot of extra control in our views providing a finer grain control when creating more complex applications.

In a glance, UI-Router can be seen like ngRoute with more features but under the hood it is quite different. All the additional features presented above are very useful in the development of larger applications.