ui.compat does not override ng-view correctly(?)

[goloroden]

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?

[0x-r4bbit]

There's already a pending issue right here #52

[goloroden]

Well, that's not exactly the same issue. As @ksperling wrote:

Well, back button support is already working in the sense that going back and fowards through history causes the correct state transition.

And as it seems to me this does not work perfectly when using nested states.

[ksperling]

@goloroden at first sight I can't see anything wrong with what you're doing... However the sample app should exhibit essentially the same problem, e.g. if you go to http://angular-ui.github.com/ui-router/sample/#/contacts/42/item/a then click 'about' in the nav bar and then back.

Do you have your example accessible online somewhere, or are you able to reproduce the problem in the ui-router sample somehow?

[goloroden]

@ksperling Thanks for taking your time to answer my issue :-)

The sample app works perfectly, so obviously the problem should be in my code. Unfortunately, I can not make it public, but I will create a minimal working sample to (hopefully) show off the problem.

[goloroden]

Okay, update: I've created a minimum working sample, and - of course - it works as expected ;-)

This means that it is most probably an error within my application, and now I need to figure out where the difference is … hence I am going to close this issue for now.

[ksperling]

Feel free to reopen this if your investigation turns up anything that can be improved in ui-router, even if its just catching errors earlier or something like that.

[goloroden]

Thanks a lot for your nice offer :-)!

[goloroden]

Ha, I found the error :-)!

In the file fooLayout.html I had used an ng-view instead of an ui-view. Once I replace that element with an ui-view, everything works as expected.

So, as you had asked for an idea on better error catching: It would be great if the renderer (or whoever is responsible for drawing) would detect ng-view and suggest that you should use ui-view instead.

[timkindberg]

I could definitely see ppl accidentally using ng-view quite often.

[ksperling]

If you depend on the 'ui.compat' module it will redefine ng-view to be ui-view, even though that may not be what you want here; after all you'd be just hiding the problem rather than fixing it.

[goloroden]

But obviously something did not work with redefining, otherwise my change should not have had any effect, right?

[ksperling]

Did you explicitly depend on the 'ui.compat' module?

On Tue, Apr 2, 2013 at 11:24 AM, Golo Roden notifications@github.comwrote:

But obviously something did not work with redefining, otherwise my change
should not have had any effect, right?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/66#issuecomment-15741147
.

[goloroden]

Yes, I did (at least I guess so). I have the following line in my code to define the application:

var app = angular.module('app', [ 'ui.bootstrap', 'ui.compat' ]);

[Drane]

Occurred to me too, but I did also expect that an "ui-view" would work inside an "ng-view".... would be a nice feature, being able to compose both elements. Might be practically hard to implement of course. Grts

[nateabele]

Is there a resolution here, or are we still waiting on something? I don't think mixing ui-view and ng-view is something worth the effort of supporting (feel free to correct me with a simple patch), but we could at least put this in the FAQ. /cc @timkindberg

[timkindberg]

added https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-problems-when-using-ng-view-alongside-ui-view

[timkindberg]

no longer supporting ui.compat module