Angular ui-router nested views - No content appears

Question

I'm trying to implement nested views for a page using angular ui-router and have configured the state definitions matching various tutorials, but can't get any content to show up for the child views, despite having no errors in the console.

I'm trying the following with parent.child dot notation for the state names:

.state('employees/employeeDetails', {
        url: '/employees/employeeDetails/:id',
        templateUrl: 'pages/employees/employeeDetails/employeeDetails.html',
        controller: 'employeeDetailsController',
        resolve: {
            lazyLoad: function($ocLazyLoad) {
                return $ocLazyLoad.load('js/controllers/employees/employeeDetails/employeeDetailsController.js');
            }
        }
    })

    .state('employees/employeeDetails.mainDetailsTab', {
        url: '/employees/employeeDetails/:id/mainDetails',
        templateUrl: 'pages/employees/employeeDetails/mainDetailsTab.html',
        controller: 'mainDetailsTabController',
        resolve: {
            lazyLoad: function($ocLazyLoad) {
                return $ocLazyLoad.load('js/controllers/employees/employeeDetails/mainDetailsTabController.js');
            }
        }
    })

-

HTML:

<div id="mainContent" data-simplebar>

  <div ui-view="mainDetailsTab" id="mainTab" class="tabContent carousel-item employeeDetailsTab"></div>

  <div ui-view="paymentsTab" id="paymentsTab" class="tabContent carousel-item employeeDetailsTab"></div>

  etc...

Answer 1

You don't need to redefine the entire path to the url property, just put the addition.

In this case: url:'/mainDetails'