how to get ui-router stateHelper working

Vote count:

0

I'm trying to create an abstract root state and resolve all data in it, before sub-states are activated - by using ui-router for asynchronous data loading (from a server) prior to activating any routes/states etc

For this I'm attempting to use ui-router.stateHelper - as suggested in this answer.

I had the ui-router $stateProvider working correctly prior to trying stateHelper:

My previous app.js file ui-router code looked something like this:

myApp.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('page1', {
        url : '/page1',
        templateUrl : 'templates/page1.html'
    })
    .state('page2', {
        url : '/page2',
        templateUrl : 'templates/page2.html'
    })
});

my index.html looked like:

<div>
    <a ui-sref="page1"><img src="images/page1_button.jpg></a>
    <a ui-sref="page2"><img src="images/page2_button.jpg></a>
</div>
<div id="template_contents" ui-view></div>

it worked fine without problems (except states and controllers would load prior to the main myApp.run completing - even though my .run functions had promises etc.)

Since 'updating' to stateHelper, my app.js looks like:

myApp.config(function($urlRouterProvider, stateHelperProvider) {
    stateHelperProvider
        .state({
                name: 'root',
                template: '<ui-view/>',
                abstract: true,
                resolve: {
                    // haven't got to this point yet :-/
                },
                children: [
                    {
                        name: 'page1',
                        url : '/page1',
                        templateUrl : 'templates/page1.html'
                    },
                    {
                        name: 'page2',
                        url : '/page2',
                        templateUrl : 'templates/page2.html'
                    },
                ]
        });
});

Now the app isn't changing states / loading templates and it's giving me the following console error:

Error: Could not resolve 'page1' from state ''

What could be causing this error ?

When using stateHelper does the html and ui-sref have to be updated / changed at all ? (Nothing mentioned in the rather scant documentation... lack of information indicates the html side should be the same as ui-router format)

asked 2 mins ago

goredwards

62

how to get ui-router stateHelper working