Back button with nested states in Angular Router

Question

I have an AngularJS application that makes use of the new, state-based ui-router. I have three different views in my application, where one is a top-level views, and the other two are nested ones.

The structure basically is as follows:

/ => Top-level view
/foo => Abstract view, loads a view that contains a ui-view placeholder
/foo/bar => View for the placeholder
/foo/baz => View for the placeholder

The router is set up as following:

app.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
  'use strict';

  $urlRouterProvider
    .when('/bar', '/foo/bar')
    .otherwise('/');

  $stateProvider
    .state('home', {
      url: '/',
      views: {
        '': {
          controller: 'homeController',
          templateUrl: '/home/homeLayout.html',
        },
        'firstHomeView@home': {
          templateUrl: '/home/firstHomeView.html'
        },
        'secondHomeView@home': {
          templateUrl: '/homme/secondHomeView.html'
        }
      }
    })
    .state('foo', {
      abstract: true,
      templateUrl: '/foo/fooLayout.html',
      controller: 'fooController'
    })
    .state('foo.bar', {
      url: '/foo/bar',
      templateUrl: '/foo/barView.html',
      controller: 'barController'
    })
    .state('foo.baz', {
      url: '/foo/baz',
      templateUrl: '/foo/bazView.html',
      controller: 'bazController'
    });

The problem is, that basically everything works as expected when you click around or manually type in urls, but that it does not work when using the back / forward buttons of the browser.

E.g., is you go to /foo, you are taken to /foo/bar, as expected. When you then click on a link to go to /foo/baz, everything is fine. Then click a link that takes you to /, and everything is still fine.

If you now hit the back button, you are taken back to /foo/baz (which is correct), but only the /foo/fooLayout.html view is rendered, not its sub-view /foo/bazView.html. The strange thing is now that if you hit the back button again, you are taken to /foo/bar and it renders correctly, including its subview! It seems as if nested views weren't recognized when using the back button, at least, if you enter an abstract view at the same time.

$locationProvider.html5Mode is not enabled, but enabling it doesn't make any difference.

I am using AngularJS 1.0.5 and ui-router 0.0.1-2013-03-20.

Any ideas what might cause this issue, and how I might solve it?

Answer 1

I found the error: In the view fooLayout.html I was using ng-view instead of ui-view. Once I changed that, everything was fine :-)