/ javascript

Quick introduction to UI-router in Angular

Routing is a very important characteristics of single page applications. Although the current version of Angular provides a module, "ngRoute", to manage routing rules, that approach has some strong limits. In this blog post I introduce "ui-router", a community driven effort that allows for some very powerful applications.

Introduction to Ui-router

Ui-router (find it on github) claims to be the "The de-facto solution to flexible routing with nested views in AngularJS". Like many other (and others) before me, I'm inclined to agree. Ui-router offers many features that "ngRoute" doesn't provide, such as:

Put in a different way, Ui router is a powerful abstraction of the concept of states, whereas ngRoute simply allows you to assign templates and controllers to url paths.

Examples

To get a taste of their differences and capabilities, I think it's useful to compare the following code:

A typical route configuration with ngRoute:

MyApp.config(function($routeProvider) {
    $routeProvider

        // this is the route for the 'home' page
        .when('/', {
            templateUrl : 'home.html',
            controller  : 'mainController'
        })

        // route for the 'about' page
        .when('/about', {
            templateUrl : 'about.html',
            controller  : 'aboutController'
        })

        // route for the 'contact us' page
        .when('/contactus', {
            templateUrl : 'contactus.html',
            controller  : 'contactUsController'
        });
});

Here is a similar example with ui-router:

MyApp.config(function($stateProvider) {
    $stateProvider

        // this is an abstract parent state with its own controller
        .state('main', {
            abstract: true,
            url: '/',
            templateUrl : 'navigation.html',
            controller  : 'mainController'
        })

        // state for the 'home' page nested into and child of 'main'
        .state('main.home', {
            // note how the '/' will be inherited from the parent
            url: 'home',
            templateUrl : 'home.html',
            controller  : 'homeController'
        })

        // state for the 'about' page
        .state('main.about', {
            url: 'about',
            templateUrl : 'about.html',
            controller  : 'aboutController'
        })

        // state for the 'contact us' page with multiple views
        .state('main.contactus', {
            url: 'contactus',
            views: {
                {'column-left' : {
                    templateUrl : 'contactus-left.html',
                    controller  : 'contactUsLeftController'
                    },
                {'column-right' : {
                    templateUrl : 'contactus-right.html',
                    controller  : 'contactUsRightController'
                    } 
                }
            }
        });
});

I hope this gives you a taste of the power of Ui-router and I'll make sure to go deeper in more practical use-case examples with detailed code in a future blog post.

Marco Viappiani

Marco Viappiani

In this blog I like to talk about my experiences with software development, triathlon and more.

Read More