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)

Community
  • 1
  • 1
goredwards
  • 2,486
  • 2
  • 30
  • 40

1 Answers1

3

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>
iH8
  • 27,722
  • 4
  • 67
  • 76
  • thanks - i actually figured that (kinda hadn't tested it yet) - followed @Matt Way's advice and just wrote it using the default `$stateProvider` with child elements defined by dot notation (rather than with `stateHelper` - which I then had to use in the html also... the plunker isn't working currently but once it does i'll accept your answer ! – goredwards Jan 28 '15 at 07:38
  • I'm sorry don't know what went wrong with that Plunk but it should be working now. – iH8 Jan 28 '15 at 10:00
  • good stuff ! thanks for that. someone should do an update to the `stateHelper` documentation - especially since it's the 2nd option recommended in the official `ui-router` [wiki](https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views). – goredwards Jan 28 '15 at 16:58