How to achieve nested states(using named views) without using abstract in parent

Question

I am really new to angular I am trying to build a navigation page. The defined structure is: There is a button on the main page which navigates to the main-page1.html main-page1.html contains menu-bar which has 4 tabs. The main-page1.js has a module and a state(parent state). All the 4 tabs are in tabs.js file and has a module and 4 states(each for different states). Tab1 is the default tab and is linked with the parent url

Issue : I am not suppose to use the abstract: true in the parent state. Because of which when I get to main-page.html The content of Tab1 doesnt renders. However it renders only when I click on the tab once or twice. This works find with abstract:true but unfortunately I cannot use the abstract in the parent state for some reason. Is there any workaround for this?

Answer 1

Put your parent state with abstract:true:

.state('parentState', {
  url: '/yoururl/:yourparam',
  abstract: true,
  views: {
    '@': { templateUrl: 'views/main-page1.html', controller: 'YourCtrl' }
  }
})

On your child states (tab1, tab2, tab3, tab4), put url:'' on your tab1 since that's supposed to be the default:

.state('parentState.tab1', {
  url: '',
  views: {
    'tabContent' : { templateUrl: 'views/tab1.html' }
  }
})
.state('parentState.tab2', {
  views: {
    'tabContent' : { templateUrl: 'views/tab2.html' }
  }
})
.state('parentState.tab3', {
  views: {
    'tabContent' : { templateUrl: 'views/tab3.html' }
  }
})
.state('parentState.tab4', {
  views: {
    'tabContent' : { templateUrl: 'views/tab4.html' }
  }
})

On your main-page1.html file, create a named view called tabContent:

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