javascript - How to define multiple views with parent child state using UI router? -

is possible define multiple views in child state parent child state relationship using ui-router?

i have following code in config

$urlrouterprovider.otherwise("/child");  $stateprovider   .state('parent', {     abstract: true,     views: {       'parent': {         templateurl: "parent.html",         controller: "parentctrl parentctrl"       },     }   })   .state('parent.child', {     url: '/child',     views: {       'state1@parent.child': {         templateurl: "child.html",         controller: "childctrl childctrl"       },      }   }); 

i verify parent.html showing up, child.html not

if move child.html parent views object like

$stateprovider   .state('parent', {     abstract: true,     views: {       'parent': {         templateurl: "parent.html",         controller: "parentctrl parentctrl"       },       'state1@parent.child': {         templateurl: "child.html",         controller: "childctrl childctrl"       },     }   }) 

than child.html works.

i verify using console.log($state.$current.name); in parentctrl current state parent.child.

can give me hint?

thanks

there a working plunker

i adjusted states , child views : {} this

$stateprovider   .state('parent', {     abstract: true,     views: {       'parent': {         templateurl: "parent.html",         controller: "parentctrl parentctrl"       },     }   })   .state('parent.child', {     url: '/child',     views: {       //'state1@parent.child': {       'view1@parent': {         templateurl: "child.html",         controller: "childctrl childctrl"       },       // same view2@parent       'view2': {         templateurl: "child.html",         controller: "childctrl childctrl"       },       'view3@': {         templateurl: "child.html",         controller: "childctrl childctrl"       },     } 

the construct '...@parent.child' wrong, because absolute naming... trying say, search ui-view="..." inside of 'parent.child' state. , not case.

so, let's place index:

// place parent <div ui-view="parent"></div> // place child view number 3 place in index  view 3    <div ui-view="view3"></div> 

and parent template this

<div ui-view="view1"></div> <div ui-view="view2"></div> 

then above state def target view1 absolute naming, same view3 - being in index.html; view2 go parent relative name

check here