CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerstate
Etienne Noël
Etienne Noël

Reputation: 6166

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

I don't know what I'm doing wrong, but here's what I want.

To begin with, here's my body:

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

  </body>

Now, inside the ui-view, I want some content depending on the URL. First, there will be the home state which will contain other states.

 - Home
     - Recent Studies
     - Studies
 - Map
     - Study

To do so, I'm trying to create a hierarchy of routes. This would be my home template (home.html), an abstract one, that would go in the 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), that I want to put inside the ui-view of home.html:

<p>Recent studies</p>

Here are the 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 is that when I load the application, everything is blank and I don't seem to understand the problem.

It doesn't seem like I can't use templateUrl in plnkr so I transferred the code into template directly:

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

Upvotes: 4

Views: 1107

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

The point is combination of parent and child url. Easily this would work

$urlRouterProvider.otherwise('//recentStudies');

Check it here

Why? Because url of a child state, is build from its ancestors. So 'home' state has url url: '/', and the child 'home.recentStudies' has url: '/recentStudies',

That all together means - the complete url is contact of these === '//recentStudies'

But that is not the best way to go. We can use reset on a child:

.state('home.recentStudies', {
        url: '^/recentStudies',

...
$urlRouterProvider.otherwise('/recentStudies');

and then even original default stuff will work. Check it here

Check the doc:

Absolute Routes (^)

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

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

Upvotes: 6

Related Questions