CODEWITHSUNDEEP
angularjsangular-ui-router
Samantha J T Star
Samantha J T Star

Reputation: 32838

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

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?

Upvotes: 3

Views: 3357

Answers (1)

quw
quw

Reputation: 2854

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

Upvotes: 8

Related Questions