Angular + UI Router breaks when using dot notation in state name

Question

I had my old code which worked just fine:

$urlRouterProvider.otherwise('/next');
$stateProvider
    .state('next', {
        url: '/next',
        templateUrl: 'partials/next.html',
        controller: function($scope, $state){

        }
    });

But then I got the brilliant idea to better organize my code, so I ended up with:

$urlRouterProvider.otherwise('/next');
$stateProvider
    .state('app', {
        abstract: true
    })
    .state('app.next', {
        url: '/next',
        templateUrl: 'partials/next.html',
        controller: function($scope, $state){

        }
    });

Which is basically the same thing, but uses a dot notation, and an abstract state (not that it matters; even if I remove the abstract state, it still won't work).

The app does take me to /next, however the page is blank (only the base template is shown, not the content of /partials/next.html. The request for it is made, but it's simply not shown.

The relevant HTML code is just:

<div class="container" ui-view>

</div>

I was (somewhat) following the tutorial from https://scotch.io/tutorials/angular-routing-using-ui-router if that helps anything.

What am I doing wrong?

because you have a parent/child relationship here, you need an html template for the parent app state, even if it is simply <div ui-view></div>. the child loads into that template, not the page template. — Claies
– Claies, Commented Oct 28, 2015 at 10:39
I see. Thanks for the explanation. I figured if it was an abstract state, it wouldn't need anything else. — Eduard Luca
– Eduard Luca, Commented Oct 28, 2015 at 10:49
the entire purpose of an abstract parent is to provide a template that multiple children can be embedded into, that can't be activated on it's own. In it's own way, even the page template is abstract. The value of abstract parents becomes really apparent when you put multiple named ui-view elements in a parent, and can target a particular child to load in a particular section of it's parent. — Claies
– Claies, Commented Oct 28, 2015 at 10:52

Krzysztof Sztompka · Accepted Answer · 2015-10-28 10:49:21Z

4

add in abstract state property:

template : '<div ui-view></div>'

It should looks like:

$urlRouterProvider.otherwise('/next');
$stateProvider
    .state('app', {
        abstract: true,
        template : '<div ui-view></div>'
    })
    .state('app.next', {
        url: '/next',
        templateUrl: 'partials/next.html',
        controller: function($scope, $state){

        }
    });

of course you can use templateUrl intead template. It is also very usefull to use layout templates in abstract state.

edit to answer comment:

Can I ask why this is necessary?

It is necessary, because angular run first abstract state, and its template. And then your actual state. But angular needs to know where put content of normal state template in parent abstract state template.

This template : '<div ui-view></div>' means that abstract state has simple template with only position of normal state template.

edited Oct 28, 2015 at 10:49

answered Oct 28, 2015 at 10:39

Krzysztof Sztompka

7,2144 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eduard Luca Over a year ago

Just found another answer that said this, and it worked. Can I ask why this is necessary? What is the logic behind this?

Collectives™ on Stack Overflow

Angular + UI Router breaks when using dot notation in state name

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related