Angular routes contain #! in the url instead of #

Question

Recently I have noticed that when using ngRoute module in an AngularJS app, the route contains #! in the URL, which was earlier just the #.

For example, www.webiste.com/#/login becomes www.website.com/#!/login

I have to enable the html5Mode and also disable the requireBase which removes the base as a whole using the code,

$locationProvider.html5Mode({
       enabled: true,
       requireBase: false
});

and the URL changes to www.website.com/login which works fine but is misleading and is not what Angular SPA URLs look like.

If I do not enable the html5Mode, the URL is encoded and I cannot get around it. So www.website.com/#/login becomes www.website.com/#!/#%2Flogin (Notice the later / is encoded as %2F).

Is this a change implemented by the developers for some specific purpose? What difference does it make? What changes do I need to make to my app to keep it working? Am I doing something wrong?

Github issue: https://github.com/angular/angular.js/issues/15547

Answer 1

It's called the hash bang.

For a while Twitter was using the same thing. It allows for AJAX calls and let search engines know your path without using a "real" path. It's considered obsolete though.

https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

There is another stackoverflow answer about that:

Doing links like Twitter, Hash-Bang #! URL's

---

Update:

One of the reasons for not having a need for the hash bang anymore is that we can push the history state without a page reload. Something so called "one page" websites, like React, do.