CODEWITHSUNDEEP
angularjsangular-ui-router
Eduard Luca
Eduard Luca

Reputation: 6602

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

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?

Upvotes: 2

Views: 2127

Answers (1)

Krzysztof Sztompka
Krzysztof Sztompka

Reputation: 7204

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.

Upvotes: 4

Related Questions