javascript - AngularJS UI-Router - Cannot get a nested state to show the template -


i don't know i'm doing wrong, here's want.

to begin with, here's body:

 <body>     <div ng-app="testapp" ng-controller="maincontroller" class="container-fluid">         <div ui-view class="row"></div>     </div>    </body> 

now, inside ui-view, want content depending on url. first, there home state contain other states.

 - home      - recent studies      - studies  - map      - study 

to so, i'm trying create hierarchy of routes. home template (home.html), abstract one, go in ui-view above:

<div ng-controller="homecontroller">     <header>         <div class="row">             <div class="col-xs-6">test web application</div>             <div class="col-xs-6">                 <p class="pull-right">bonjour                    <strong>{{currentaccount.name}}</strong> !                    <a href="#">déconnexion</a></p>             </div>         </div>     </header>      <article class="row">         <div ui-view></div>     </article>  </div> 

here's recent studies (home.recentstudies.html.twig), want put inside ui-view of home.html:

<p>recent studies</p> 

here routes definition:

angular.module('testapp').config(['$stateprovider', '$urlrouterprovider',  function($stateprovider, $urlrouterprovider) {     $urlrouterprovider.otherwise('/recentstudies');     $stateprovider         .state('home', {             url: '/',             abstract: true,             templateurl: 'partials/home.html'         })         .state('home.recentstudies', {             url: '/recentstudies',             templateurl: 'partials/home.recentstudies.html'         })         .state('home.studies', {             url: '/studies',             templateurl: 'partials/studies.html'         })     ;  }]); 

my problem when load application, blank , don't seem understand problem.

it doesn't seem can't use templateurl in plnkr transferred code template directly:

http://plnkr.co/edit/kgixpsnxgy2mllhxfxva?p=preview

the point combination of parent , child url. work

$urlrouterprovider.otherwise('//recentstudies'); 

check here

why? because url of child state, build ancestors. 'home' state has url url: '/', , child 'home.recentstudies' has url: '/recentstudies',

that means - complete url contact of these === '//recentstudies'

but not best way go. can use reset on child:

.state('home.recentstudies', {         url: '^/recentstudies',  ... $urlrouterprovider.otherwise('/recentstudies'); 

and original default stuff work. check here

check doc:

absolute routes (^)

if want have absolute url matching, need prefix url string special symbol '^'.

$stateprovider   .state('contacts', {      url: '/contacts',      ...   })   .state('contacts.list', {      url: '^/list',      ...   }); 

Comments