Angular UI-Router $urlRouterProvider .when not working *anymore*

EDIT: version 0.2.13 – breaking change

The original post was working with the UI-Router 0.2.12-. A fix in 0.2.13 disables this solution. Please follow the workaround here:

Angular UI-Router $urlRouterProvider .when not working when I click <a ui-sref=”…”>

ORIGINAL:

There is one issue, I found, causing similar issue. There is a working example with full code

Firstly, let’s have two functions to configure

• $urlRouterProvider and
• $stateProvider

The snippet of these defintions:

// when config for $urlRouterProvider
var whenConfig = ['$urlRouterProvider', function($urlRouterProvider) {

    $urlRouterProvider
      .when('/app/list', ['$state', 'myService', function ($state, myService) {
            $state.go('app.list.detail', {id: myService.Params.id});
    }])
    .otherwise('/app');
}];

// state config for $stateProvider
var stateConfig = ['$stateProvider', function($stateProvider) {

  $stateProvider
    .state('app', {
        url: '/app',
        ...
}];

Having this, the reported behaviour will hapen if we will call them like this:

angular.module('MyApp', [
  'ui.router'
])
// I. firstly the states
.config(stateConfig)
// II. then the WHEN
.config(whenConfig) 

The above call will not work. When will not trigger the detail state when list is visited.

But this will work as expected:

angular.module('MyApp', [
  'ui.router'
])
// I. firstly WHEN
.config(whenConfig) 
// II. only then call state config
.config(stateConfig)

Check it here. See the app.js file…

SUMMARY: We simply have to firstly configure the $urlRouterProvider. Only then we can start to fill in our states via $stateProvider. This approach will lead to expected behaviour.