URL is the essence element of the web. Because of URL, website is sharable and that’s why web is very successful and popular. Any Single Page Application (SPA) framework must take URL very seriously.

With AngularJS, we offen hear about ngRoute in many ebooks and tutorial, but the true is ngRoute has very limit features and only suitable for very simple website. You can’t use it if your website has many nested view. It’s the reason why ngRoute has been removed from the core of AngularJS and Angular-UI team has developed a better solution, it’s ui-router

UI-router uses “state” concept to describe state of website, your website can have many nested state and each different state, ui-router will load different views. With different nested state, ui-router will have different nested view as well. Up-to-date, ui-router is the best solution for routing in AngularJS.

I’ve used UI-router in many projects and I am very please with it.

Here is the example we will use in this tutorial:

Angular UI router

You can grab source code at here:

davidtran/ui-router-tutorial

So our website consist very simple views.

From the index.html we can go to home.html and download.html
In home.html we can go to api.html and features.html
In features, we provide links to features details.

Notice that we use ui-view directive in index.html and home.html

Create state:

In order to create a state, we need to use $stateProvider.state() method.

$stateProvider.state('index', {
    url:'/',
    templateUrl: 'app/index/index.html'
});

First parameter is the state name, second parameter is a object which contain state url and templateUrl. If you want to use inline string template, you can replace templateUrl with template.

So from here, if use go to url: abc/  it matches with state “home” and our ui-view in home.html will load home.html
state “home” can be activated by click on the link:

<a ui-sref=“home’>Home</a>

Create nested state:
In our example, we have some nested view, like api, features, and feature detail. We will create our nested state like this:

$stateProvider.state('index.about', {
    url:'about',
    templateUrl: 'app/index/about.html'
});

In this case, if user go to abc/about, our website will load index.about state. The template will be loaded by ui-view directive in home.html

Create states with parameters:

We have features detail which has a featureId parameter. In order to do it, we need to modify our url when create state:

In our link, we append an object which store our parameter. And our link will look like this.

<a ui-sref=’home.features_detail({featureId: 2})’>Feature 2</a>

After ui-sref parses it’s value, it will create href attribute in the link.

<a ui-sref=”home.features_detail({featureId: 1})” href=”#/features/1″>Feature 1</a>

We can access our state parameters from $stateParams service.

Now, let’s look at the source codes which create our route and state:

var home = angular.module('home', [
    'ui.router'
]);
home.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/');
    $stateProvider.state('home', {
        url:'/',
        templateUrl: 'app/home/home.html'
    });
    $stateProvider.state('home.api', {
        url:'api',
        templateUrl: 'app/home/api.html'
    });
    $stateProvider.state('home.features', {
        url: 'features/',
        templateUrl: 'app/home/features.html'
    });
    $stateProvider.state('home.features_detail', {
        url: 'features/{featureId}',
        templateUrl: 'app/home/features_detail.html',
        controller: function($scope, $stateParams) {
            $scope.featureId = $stateParams.featureId
        }
    });
});

download.js

var download = angular.module('download', [
    'ui.router'
])
download.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('download', {
        url:'download',
        templateUrl: 'app/download/download.html'
    });
});

Summary

At the time of writing, ui router is still the most powerful routing solution for AngularJS. With ui router, we can easily create state, nested state and inject parameter in a state. For more information about ui router, you can read more on their website: UI router