Nested Views


#1

I’ve looked around and don’t think my specific question has been answered. Im trying to have nested views that have page transitions between them and inherit from their parents url. The best I can get is two levels deep with transitions. I have been able to use new <ui-view> in the parent path but that only replaces the current content and I lose transitions.

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('menu', {
      url: "/menu",
      abstract: true,
      templateUrl: "menu.html"
    })
    .state('menu.list', {
      url: "/list",
      views: {
        'menuContent' :{
          templateUrl: "list.html"
        }
      }
    })
    .state('menu.list.item', {
      url: "/item",
      views: {
        'menuContent' :{
          templateUrl: "item.html"
        }
      }
    })
    .state('menu.list.item.detail', {
        url: "/detail",
        views: {
          'menuContent' :{
            templateUrl: "detail.html"
        }
      }
    })
  
  $urlRouterProvider.otherwise("/menu/list");});

So I would want to end up with:

http://whatever.com/#/menu/list
http://whatever.com/#/menu/list/item
http://whatever.com/#/menu/list/item/detail

and be able to transition between all of them. All of the examples I have seen only have two levels of navigation and have urls that end up like this:

http://whatever.com/#/menu/list
http://whatever.com/#/menu/item
http://whatever.com/#/menu/detail


#2

Do you mind putting together an example of what you have in codepen?