Angularjs url remove hash not using html5

Question

I know one possible way to remove '#' from AngularJs route url is to enable html5 mode. like:

$locationProvider.html5Mode(true) if window.history && window.history.pushState

This is work, but the problem is after I click menu and switch to the correct page and refresh it, it shows template is missing!! I pretty sure this is because after refresh page, the view will automatically load rails view with the url instead of AngularJs route url. Could someone help me?

Check that you've set the base href (i.e. <base href=".">) appropriately on your main index page. The official documentation on Using $location provides further information on this. — miqh
– miqh, Commented Jul 14, 2014 at 8:57
@miqid I know I should do add base href. From other posts, everyone said it needs <base href="/"> rather than a '.'. But it is worthy to have a try. And the url become myworld.dev/#%2Fmy_favorites%2Fnovels that means it not works. And <base href="/"> didn't work either. — Perpherior
– Perpherior, Commented Jul 15, 2014 at 0:57
Sure, the "." was just a suggestion, prefer / if ends up working for you. It's strange how routing is causing your URL to have encoded values though (i.e. the %2F, which should be forward slashes). — miqh
– miqh, Commented Jul 15, 2014 at 1:03
@miqid The point is even if I add <base href='/'> and enable html5Mode, it still displays with an error -- missing template. I can only use nav bar to redirect page. Once refresh it, the error occurs again. — Perpherior
– Perpherior, Commented Jul 16, 2014 at 5:21

Community · Accepted Answer · 2017-05-23 10:25:20Z

2

From the angular docs

Server side
Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html)

The reason for this is that when you first visit the page (/about), e.g. after a refresh, the browser has no way of knowing that this isn't a real url, so it goes ahead and loads it. However if you have loaded up the root page first, and all the javascript code, then when you navigate to /about angular can get in there before the browser tries to hit the server and handle it accordingly

Thanks to Reloading the page gives wrong GET request with AngularJS HTML5 mode

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Dec 5, 2014 at 10:26

Kunal Shewale

6966 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs url remove hash not using html5

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related