I have an AngularJS application that uses the new, ui-router . My application has three different views: one of them is top-level views, and the other two are nested.
The structure is basically 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 configured as follows:
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 or manually enter the URLs, but that it does not work when using the browser back / forward buttons.
For example, you go to /foo , you get to /foo/bar , as expected. When you then click on the link to go to /foo/baz , everything is fine. Then click on the link that will lead you to / and everything will still be fine.
If you clicked the back button now, you will return to /foo/baz (this is correct), but only the view /foo/fooLayout.html is /foo/fooLayout.html , and not its /foo/bazView.html . The strange thing is that if you press the back button again, you will be taken to /foo/bar and it will display correctly, including its preview! It seems that the subviews were not recognized when using the back button, at least if you are entering an abstract view at the same time.
$locationProvider.html5Mode not included, but including it does not make any difference.
I am using AngularJS 1.0.5 and ui-router 0.0.1-2013-03-20.
Any ideas that might cause this problem, and how can I solve it?