Url Hash-Bang (#!/) Prefix Instead of Simple Hash (#/) in Angular 1.6

URL hash-bang (#!/) prefix instead of simple hash (#/) in Angular 1.6

It is new from AngularJS 1.6, which added a new hash prefix.

Due to aa077e8, the default hash-prefix used for $location hash-bang
URLs has changed from the empty string ('') to the bang ('!'). If your
application does not use HTML5 mode or is being run on browsers that
do not support HTML5 mode, and you have not specified your own
hash-prefix then client side URLs will now contain a ! prefix. For
example, rather than mydomain.com/#/a/b/c the URL will become
mydomain.com/#!/a/b/c.

Source here for more information.

---

If you want to remove this prefix, add this code to your config:

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

Why we need bang mark in hash navigation URLs?

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.

Meaning of the symbol ! inside URL when using ui-route angular js

It is called Fragment_identifier

---

The $location service is designed to support hash prefixed URLs
for cases where the browser does not support HTML5 push-state navigation.

The Google Ajax Crawling Scheme expects that local paths within a SPA start
with a hash-bang (e.g. somedomain.com/base/path/#!/client/side/path).

The $locationProvide allows the application developer to configure the
hashPrefix, and it is normal to set this to a bang '!', but the default
has always been the empty string ''.

This has caused some confusion where a user is not aware of this feature
and wonders why adding a hash value to the location (e.g. $location.hash('xxx'))
results in a double hash: ##xxx.

This commit changes the default value of the prefix to '!', which is more
natural and expected.

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

Referred from

and please visit here : URL hash-bang (#!/) prefix instead of simple hash (#/) in Angular 1.6

angular-route1.6.1 does not work correctly

Tx! I have solve it!
The reason is in version 1.6.1 the route rule has been changed.
The correct way to write the url is:

href="#!/checkout"

Annother way to sovle this problem:

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

follow:
https://github.com/angular/angular.js/commit/aa077e81129c740041438688dff2e8d20c3d7b52

---

Related Topics