CODEWITHSUNDEEP
javascripthashsingle-page-applicationhashtag
Serj.by
Serj.by

Reputation: 604

Why we need bang mark in hash navigation URLs?

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!

Upvotes: 6

Views: 1657

Answers (2)

Toxantron
Toxantron

Reputation: 2398

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>

Upvotes: 6

ceving
ceving

Reputation: 23876

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.

Upvotes: 8

Related Questions