AngularJS HTML5 mode does a full page reload on manual url change
Asked Answered
C

1

5



I am using AngularJS with ui.router. I have seen a behaviour difference in Hashbang and HTML5 mode and I wonder if it can be changed/prevented. When using

$locationProvider.html5Mode(true);

a full page reload happens when I manually change the url in the address bar. For example, if I am currently on the url

http://example.com/post/5467777

And manually change it to

http://example.com/post/5464777

a pull page reload happens, and then the correct state is loaded.

If I don't use HTML5 mode, a full page reload doesn't happen, instead the state is directly loaded (which is much faster of course) when changing the url from

http://example.com/#/post/5467777

to a different one. My server-side configuration for HTML5 mode looks as follows:

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.php [L]

I thought AngularJS could intercept those URL changes as well. If possible, how can I make my page not reload when manually changing the url in HTML5 mode?

Thanks

Causal answered 24/1, 2015 at 22:2 Comment(0)
K
8

Nothing wrong here. It is the expected behavior of a browser. When using hashes, the fact that prevents reloading is that you are requesting a section (an element with id equal to the hash) inside the same page (hence no need to reload). If the URL changes, the browser cannot do otherwise than consider that it is a new page.

When you click on a page, angular will intercept the click and change the URL in the address bar correspondingly.

Kirtle answered 25/1, 2015 at 1:33 Comment(3)
Would give +1 for the clarification. I just wondered if this could be changed. Probably changing the url manually to one on the same page wouldn't happen in real life that often anyway.Causal
Well, it can be intercepted by window.onbeforeunload = function (e) {} but this only expects a confirmation message to be returned, and cannot be used to cancel the page unload. The reason is that if the browser alllowed that, some people may stop you from navigating away from their page.Kirtle
Ok, I unterstand that. And, as I said, the situation I described wouldn't happen in a real use scenario anyway.Causal

© 2022 - 2024 — McMap. All rights reserved.