How can I get AngularJS ui-router to respond correctly to a browser page refresh?

Question

I have created an AngularJS application that uses ur-router. Here's a small sample of the config:

 $locationProvider.html5Mode(true);

 var admin = {
        name: 'admin',
        url: '/Admin',
        views: {
            'root': {
                templateUrl: '/app/admin/partials/home.html',
            },
            'content': {
                templateUrl: '/app/admin/partials/overview.html',
            }
        }
    };

    var adminContent = {
        name: 'admin.content',
        parent: 'admin',
        url: '/:content',
        views: {
            'root': {
                templateUrl: '/app/admin/partials/home.html',
            },
            'content': {
                templateUrl: function (stateParams) {
                    return '/app/admin/partials/' + stateParams.content + '.html';
                },
            }
        }
    };

Everything is working when I start up the application, then go to the /Admin with a link and next I go to the reference link and it brings up the page:

http://xx.com/Admin/reference

When I click the browser back button it goes back to the previous page as expected.

However if I do a refresh now everything goes wrong. It forgets about ui-router and tries to find the page: xx.com/Admin/Reference

For reference I am using: @version v0.2.13

My index file looks like this:

<head>
    <base href="/" />

Can someone give me some suggestions as to what I am doing wrong?

This may be caused by your server configuration. You should have everything redirect to the main page. You could also try using a `` tag — quw, Dec 30 '14 at 15:03
I updated the question to show the tag. Can you explain what you mean by "have everything redirect to the main page"? One thing I am a bit concerned about is that I am limited as to what I can do on the server side as it is using Amazone Cloudfront where every page is simply a file with the only default being that I can select index.html as a startup file if I just enter www.xx.com — Samantha J T Star, Dec 30 '14 at 15:09

quw · Accepted Answer · 2014-12-30T15:22:06.083

This is happening because you are using HTML5mode. You can either disable it or configure your server to handle it.

When you click a link on the page, the javascript changes the displayed url, but it does not actually navigate to the new url. When you refresh, the browser makes a request to the server for the new url. The server is treating it as a regular request, but it does not have any page at that url, so it returns a 404. You can configure the server to redirect any url to your main page so that this doesn't happen. When you refresh (with proper configuration), the server will send back index.html (or whatever your main page is) and the javascript can fetch the arguments out of the url.

This doc explains how to configure the server in ui-router. https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

You will also need a <base> tag so that angular can tell the difference between the url arguments and the rest of the url.

Example <base> tag:

If your site is http://www.example.com/ and you are on the Admin page (http://www.example.com/Admin), your base tag would look like <base href="http://www.example.com/">

For more info on the different routing modes in Angular see: https://docs.angularjs.org/guide/$location

Okay it looks like I had misunderstood how to do the base tag. I will try the way you suggested. Thanks — Samantha J T Star, Dec 30 '14 at 15:19

How can I get AngularJS ui-router to respond correctly to a browser page refresh?

1 Answers1