angular ui route nested

Question

Hi I'm trying to create a nested route inside an already nested route. In synthesis, I have a portal which contains my sidebar and some other fancy stuff and there I can navigate to clusters. From clusters I should be able to select one cluster and view its details.

My "grandparent" route is called "portal" and the parent "clusters". Here's the code for clusters-route

(function () {
  'use strict';

  angular.module('ap.clusters.RouteConfig', ['blocks.router','ncy-angular-breadcrumb', 'ap.clusters.ClusterDetailsCtrl'])
    .run(onRun);

  /* @ngInject */
  function onRun(routerHelper) {
    routerHelper.configureStates(getStates());
  }

  function getStates() {
    return [
          {
          state: 'portal.clusters',
          config: {
            url: '/clusters',
            templateUrl: '/views/clusters/clusters.html',
            controller: 'clustersCtrl',
            controllerAs: 'vm',
            title: 'Clusters',
            ncyBreadcrumb: {
              label: 'Clusters'
            },
           settings: {
              nav: 4,
              content: '<i class="fa fa-cubes nav-icon"></i>a<span>Clusters</span>'
      }
    }
  }
];
}

})();

Here's the nested route I'm trying to include:

(function () {
   'use strict';

   angular.module('ap.clusters.clusterDetailsRouteConfig', ['blocks.router', 'ncy-angular-breadcrumb', 'ap.clusters.ClusterDetailsCtrl'])
     .run(onRun);

  /* @ngInject */
  function onRun(routerHelper) {
    routerHelper.configureStates(getStates());
  }

  function getStates() {
    return [
           {
           state: 'portal.clusters.cluster-details',
           config: {
              url: '/cluster/:id',
              templateUrl: '/views/clusters-details/clusters-details.html',
              controller: 'clusterDetailsCtrl',
              controllerAs: 'vm',
              title: 'Cluster',
              ncyBreadcrumb: {
                 label: '{{vm.cluster.name}}'
              }
            }
         }
     ];
   }

 })();

The routing seems to be working fine, since the url is showing ....portal/clusters/cluster/0 or whatever index I select, but the html is not rendering. When I click the link just the url changes. Here's how i call the routing from clusters view (using jade)

a(ui-sref="portal.clusters.cluster-details({id: $index})")

Don't really know whats wrong with it, why isn't the html showing

Answer 1

I recently inherited this project that anram posted the question about. The issue he describes actually arose due to the nature of the site. The site actually has some fairly complex routing and breadcrumb needs (complex from a development standpoint, rather simple and strait forward from a usability standpoint). For more details on that, and a breadcrumb generation issue I am having with this same project, please read my question here.

In the specific case that anram was asking about, we have a portal layout with a banner bar, sidebar menu, table listing views, and detail views. Every one of the listing views can be navigated to directly from the sidebar menu. The detail views can all be navigated to via two means, either from the listing views reachable via the sidebar menu, or by child listing views from some virtual "parent" detail view. There are a number of different levels in this virtual hierarchy, so the navigation paths to get down to the lowest leaf level can be quite short, or quite long, depending on exactly how you navigate.

The problem that anram encountered was due to the fact that all detail views were originally configured to be child states of the listing states in ui-router, when in actuality they were not. They were siblings in the literal sense. A detail view was not a child view embedded in a <div ui-view /> somewhere on the listing views...they were entirely separate views. A such, the name portal.clusters.cluster-detail was incorrect. It implied that the clusters state should be loaded first, and that cluster-detail would be loaded into a ui-view somewhere in that view. There was no ui-view anywhere in the clusters view, so cluster-details did not load. The navigation via ui-router was working, and working as described...the problem wasn't ui-router, the problem was the simple fact that there was no second level of nested state.

I recently refactored the ui-router states, making all detail views direct children of the portal root view, so we now have portal.clusterDetails instead of portal.clusters.cluster-detail. That solved one problem, the detail views now load properly, and we can route to them from any other view (since pretty much every view is now a sibling, and all are children of portal.) This has given rise to another issue, however, regarding breadcrumb generation (see my linked question above if you have more interest in reading about that.)

Answer 2

I created working plunker here.

I would say, that your setting seems to be ok. The only (hidden here) place, which could be wrong is the content of the

 templateUrl: '/views/clusters/clusters.html',

Inside of the state: 'portal.clusters'. What could be wrong there?

This is in fact a parent view for state: 'portal.clusters.cluster-details'. And that means, that we need to insert an anchor (ui-view) there:

...
<div ui-view=""></div>

That allows our child to be rendered

Check it in action here