how to get ui-router stateHelper working

Question

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)

Answer 1

I've taken your code and created a Plunker: http://plnkr.co/edit/eOWpYKFRL3PTGHmU2txi?p=preview There is nothing wrong with the code you posted, so i'm guessing your problem lies in your HTML which you didn't post. My best guess is that you've overlooked this part in the (indeed scant) documentation:

By default, all state names are converted to use ui-router's dot notation (e.g. parentStateName.childStateName). This can be disabled by calling .state() with an optional second parameter of true.

While the following would normally work with ui-router:

<a ui-sref="page1">Page 1</a>
<a ui-sref="page2">Page 2</a>

It won't in combination with the statehelper, you'll need to use the full statename in dotnotation, that means, including the parent's name:

<a ui-sref="root.page1">Page 1</a>
<a ui-sref="root.page2">Page 2</a>