5

We are developing SPA with hash tag navigation. Saw on another SPA sites there is hash tag URLs like http://example.com/#!/users Our application currently implements hash tag URLS without ! (bang, exclamation mark) like http://example.com/#/users Is there some reason for using bang mark in URL? I've checked few SO questions, some documentation: URL hash-bang (#!/) prefix instead of simple hash (#/) in Angular 1.6 People want to get rid of exclamation mark in their SPAs.

However, Angular Changelog states it was significant change to add bang mark in URLs: https://github.com/angular/angular.js/blob/master/CHANGELOG.md#location-due-to

Google's documentation also shows an examples with exclamation marks: https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

My main question is - for what we need exclamation mark in hash URL? Does it makes any sense?

Thanks in advance for answers!

Serj.by
  • 534
  • 5
  • 17
  • This may help you https://stackoverflow.com/questions/46439079/is-there-a-way-using-angular-ui-router-not-show-login/46440162#46440162 – Raghav Sep 27 '17 at 07:36
  • 1
    Thanks, Raghav, for your prompt answer. But my main question is not "How to get rid of bang mark in Angular application", our SPA is not even Angular-driven, it using it's own JS framework, but "Why we need exclamation mark in hash part of SPA URL?" I am curious about do we really need to add exclamation mark in URL. And if so, why? – Serj.by Sep 27 '17 at 07:38
  • It provides deep linking capability to Angular apps.. please go through this https://stackoverflow.com/questions/40478676/i-am-using-angular-and-my-url-always-has-a-exclamation-mark/40478862.. – Raghav Sep 27 '17 at 07:45

2 Answers2

7

RFC 3986 specifies that a URL fragment starts with a hash. A fragment references typically a HTML anchor. And HTML 4 defines that the ID of a HTML anchor must not contain a bang.

If you want to be sure that your tags do not collide with HTML anchors, it might be useful to mark the tags with the bang.

Community
  • 1
  • 1
ceving
  • 21,900
  • 13
  • 104
  • 178
5

As @ceving already explained the reason is to avoid collisions with element ids. If you look at the example below and consider having for example an angular controller named "main" there would be a conflict as to how the URL should be interpreted.

If you click "Goto Main" you see the cursor jumping, otherwise it won't.

<a href="#main">Goto Main</a>

<a href="#!main">Open Main Controller</a>

<p id="main">I am main!</p>
Toxantron
  • 2,218
  • 12
  • 23
  • 1
    Thanks for clarification. Wish I could mark more than one correct answers. But alas... Green checkmark goes to @ceving as first correct answer. However your addition is very valuable as well! – Serj.by Sep 27 '17 at 11:22
  • He does deserve correct answer for this. I also consider mine only an addition, not an alternative. – Toxantron Sep 27 '17 at 11:44