The ui-router from angular-ui gives power of nested states and multiple named views which is essential for angular apps with non-trivial layout and workflow.

The main problem with angular ui-router is getting the route configurations right in the first time. You start seeing blank pages for misconfigured views. The sad part is these errors are not logged to console. It gets quite frustrating in tracking down the cause.

This where I found this stackoverflow link which helps in solving this issue. If you find yourself in trouble with ui-router, just open the developer console on the browser and paste the below code.

Some of the common mistakes made while moving fron angular’s ng-route to ui-router are

• Dependency on ui-router is not added

1
2

//Make sure 'ui.router' module is added as dependency
var myApp = angular.module('myApp', ['ui.router']);

• The parent state doesn’t have template with ui-view

1
2
3
4
5
6
7
8
9
10

$stateProvider
.state('user', { //parent state
    url: '/user/:userId',
    // Important that parent has a template with ui-view which the child states can replace
    template: '<ui-view/>'
})
.state('user.projects', { //child state
    url: 'projects',
    templateUrl: 'projects.html',
})