Refreshing the browser doesn't refresh the ui-router's state when doing nested states.

[CMCDragonkai]

In a situation like:

                .state(
                    'blog',
                    {
                        abstract: true, //this state is abstract, it provides an abstract base for children (only abstract states can have a default child state)
                        url: '/blog',
                        templateUrl: 'blog.html',
                        controller: 'BlogCtrl'
                    }
                )
                .state(
                    'blog.posts',
                    {
                        url: '', //empty url demonstrates that it is the default childstate of the ui-view
                        templateUrl: 'blog_posts.html',
                        controller: 'BlogPostsCtrl'
                    }
                )
                .state(
                    'blog.post',
                    {
                        url: '/:blogPostId',
                        views: {
                            '': {
                                templateUrl: 'blog_post.html',
                                controller: 'BlogPostCtrl'
                            },
                            'comments': {
                                templateUrl: 'blog_post_comments.html',
                                controller: 'BlogPostCommentsCtrl'
                            }
                        }
                    }
                );

When you go into e.com/blog/123 and go back to e.com/blog by refreshing the browser or a location refresh, it doesn't change the state back to blog.posts. It does do it when I use the back button or hit on a link that changes the url, but a direct location refresh doesn't.

[ksperling]

Can you provide this as a plnker or other working example? Navigating to http://angular-ui.github.io/ui-router/sample/#/contacts/1 and then manually changing the url to http://angular-ui.github.io/ui-router/sample/#/contacts works as expected in the sample app

[CMCDragonkai]

It'd be difficult to do in plunker do it's navigation. I'm using HTML5 urls if that might help.

[laurelnaiad]

@CMCDragonkai -- if HTML5 mode is working for you would you please help me figure out how? I might be dense but I can't see them working... #116

[ksperling]

@CMCDragonkai hard to say what's going on without seeing it in action...

[timkindberg]

I bet this was the devil bug.

[jonathanadler]

Hi @CMCDragonkai,
I'm having the same problem.
The only difference is that I'm not using html5 mode.
Did you find a solution?

[CMCDragonkai]

No I didn't. So it's left that way.

[jonathanadler]

I found this thread:
angular/angular.js#2431
which seems to be connected, since I've noticed that when I refresh, an $http.get request within my state resolve function, isn't being performed.
It didn't help me, but it could help you.

EDIT:
this is how my state code looks like:

state('settings', {
    abstract: true,
    templateUrl: '/app/view/settings.html',
    controller: 'SettingsController',
    resolve: {
        settings: settingsController.loadSetting
    }
}).state('settings.general', {
    url: '/settings/general',
    templateUrl: '/app/view/general_set.html'
}).state('settings.notification', {
    url: '/settings/notification',
    templateUrl: '/app/view/mail_set.html'
})

If you also have a resolve function that might be making all the trouble, you could try wrapping it's contents in a timeout. That's what finally helped me. I used a timeout since I've noticed that the state resolve function was called before my app.run was called.
I know it's kind of a hack, but it's the only thing fixing my problems at the moment.
I guess I'll get back to it in the future, and try to make it work better.
I'll probably have to change my state architecture a bit.

I hope this helps you, or someone else that will see this thread.

[jonathanadler]

Hey @eggers,

I think my problem was that some of the data I needed for the state's
resolve function hasn't been resolved itself.
To elaborate: On my app.run function, I get some data from the server and
save it in an object on the $rootScope.
Now, In my resolve function for this state, I needed access to this data,
but since I just refreshed the page, it hadn't been resolved yet.
So a timeout helped me on this one.
I think I could've added a service with a function returning a promise, and
that would've probably fixed it, but for the time being I left it with a
timeout.

If you want to investigate some more, I suggest you use ui-router's state
events to see where the flow is stopping.
You can find them here:
https://github.com/angular-ui/ui-router/wiki#wiki-state-change-events

You can add some console logs on the stateChangeStart and the
stateChangeSuccess to see where it stops, and also use the stateChangeError
to see if any errors have occurred on the resolve function (Notice that the
say that: "It's important to note that if you have any errors in your
resolve functions (javascript errors, non-existent services, etc) they will
not throw traditionally. You must listen for this $stateChangeError event
to catch ALL errors.").

Good luck!

I'll be glad to hear if you have any conclusions.

On Tue, Feb 4, 2014 at 10:15 PM, eggers notifications@github.com wrote:

@jonathanadler https://github.com/jonathanadler did you learn anything
more about this problem? I'm having the same issues right now.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/105#issuecomment-34101853
.

[eggers]

@jonathanadler I had a different issue. I hadn't put the leading / on the urls for my states which didn't cause a problem when linking via ui-sref, but didn't work when I refreshed the page. Adding the leading / to the children states fixed the problem.

[keithharvey]

I had what looked like a similar problem. My service (called within a nested state's resolve) was resolving a promise immediately with a null value, resulting in a blank screen.

[bikashsharmabks]

angular.module('app').run(['$state', '$stateParams',
    function($state, $stateParams) {
        //this solves page refresh and getting back to state
}]);

This will solve the issue

[tthew]

+1 @bikash1999's tip worked for me.

[talhamaniar]

while implementing "$locationProvider.html5Mode(true).hashPrefix('!');". When i refresh the page eg: url: localhost:8000 /project.
i am getting issue in page " NOT FOUND ". Any one can help me where i am wrong..