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

Question

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

BeS BeS · Accepted Answer · 2015-01-25T01:33:34

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.

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

1 Answers