javascript - AngularJs Ui-view can't show correctly -

i want use ui-view , ui-router in part of page.but reason can't show template "app_usermng_table.html". main code of part follows:

1.router config part

(i have add "ui.router" dependency in module "app" yet.)

.state('app.usermng', {               url: '/usermng',               templateurl: 'tpl/app_usermng.html',                resolve: {                   deps: ['uiload',                     function( uiload ){                       return uiload.load( ['js/controllers/usermng/usermng.js','css/usermng.css'] );                   }]               },               onenter: function(){                 console.log("enter usermng");               }           })           .state('app.usermng.table',{               url:'/table',               templateurl:'tpl/app_usermng_table.html',               resolve:{                 deps:[                     'uiload',                     function(uiload){                       return uiload.load(['js/controllers/usermng/usermngtable.js'])                     }                 ]               },               onenter: function(){                 console.log("enter usermng table");               }            }) 

2.app_usermng.html：

i want put template in

<div ui-view></div> 

tag.

<div class="hbox hbox-auto-xs hbox-auto-sm" ng-controller="usermngctrl">   <div ng-controller="usermngctrl">     <div class="bg-light lter b-b wrapper-md">       <h1 class="m-n font-thin h3">user management</h1>     </div>   <div ui-view></div>  </div> </div> 

3.usermng controller

i add code

$state.transitionto 

hoping when enter state "app.usermng", state "app.usermng.table" can shown in parent.

app.controller('usermngctrl',['$scope','$state',function($scope,$state){    $state.transitionto('app.usermng.table');    console.log("table") }]);  

4.navigation bar

i hope jumps state "app.usermng" when click 'usermanagement' on navigation bar.

<li ui-sref-active="active"> <a ui-sref="app.usermng"> <i class="glyphicon glyphicon-list-alt icon text-info-dker"></i> <span class="font-bold" translate="aside.nav.usermng">user management</span> </a> </li>

however,all i've done seems useless...the table part isn't shown.the console content follows:

enter usermng usermng.js:3 table usermng.js:3 table 

it seems child state "app.usermng.table" never enters.

could tell me what's problem.thanks lot! :)

you need add 'abstract':true property, here:

.state('app.usermng', {           url: '/usermng',           templateurl: 'tpl/app_usermng.html',           abstract: true,           resolve: {               deps: ['uiload',                 function( uiload ){                   return uiload.load( ['js/controllers/usermng/usermng.js','css/usermng.css'] );               }]           },           onenter: function(){             console.log("enter usermng");           }       })       .state('app.usermng.table',{           url:'/table',           templateurl:'tpl/app_usermng_table.html',           resolve:{             deps:[                 'uiload',                 function(uiload){                   return uiload.load(['js/controllers/usermng/usermngtable.js'])                 }             ]           },           onenter: function(){             console.log("enter usermng table");           }        })