$location / switching between html5 and hashbang mode / link rewriting

by

The documentation is not very clear about AngularJS routing. It talks about Hashbang and HTML5 mode. In fact, AngularJS routing operates in three modes:

  • Hashbang Mode
  • HTML5 Mode
  • Hashbang in HTML5 Mode

For each mode there is a a respective LocationUrl class (LocationHashbangUrl, LocationUrl and LocationHashbangInHTML5Url).

In order to simulate URL rewriting you must actually set html5mode to true and decorate the $sniffer class as follows:

$provide.decorator('$sniffer', function($delegate) {
  $delegate.history = false;
  return $delegate;
});

I will now explain this in more detail:

Hashbang Mode

Configuration:

$routeProvider
  .when("https://stackoverflow.com/path", {
    templateUrl: 'path.html',
});
$locationProvider
  .html5Mode(false)
  .hashPrefix('!');

This is the case when you need to use URLs with hashes in your HTML files such as in

<a href="index.html#!/path">link</a>

In the Browser you must use the following Link: http://www.example.com/base/index.html#!/base/path

As you can see in pure Hashbang mode all links in the HTML files must begin with the base such as “index.html#!”.

HTML5 Mode

Configuration:

$routeProvider
  .when("https://stackoverflow.com/path", {
    templateUrl: 'path.html',
  });
$locationProvider
  .html5Mode(true);

You should set the base in HTML-file

<html>
  <head>
    <base href="https://stackoverflow.com/">
  </head>
</html>

In this mode you can use links without the # in HTML files

<a href="https://stackoverflow.com/path">link</a>

Link in Browser:

http://www.example.com/base/path

Hashbang in HTML5 Mode

This mode is activated when we actually use HTML5 mode but in an incompatible browser. We can simulate this mode in a compatible browser by decorating the $sniffer service and setting history to false.

Configuration:

$provide.decorator('$sniffer', function($delegate) {
  $delegate.history = false;
  return $delegate;
});
$routeProvider
  .when("https://stackoverflow.com/path", {
    templateUrl: 'path.html',
  });
$locationProvider
  .html5Mode(true)
  .hashPrefix('!');

Set the base in HTML-file:

<html>
  <head>
    <base href="https://stackoverflow.com/">
  </head>
</html>

In this case the links can also be written without the hash in the HTML file

<a href="https://stackoverflow.com/path">link</a>

Link in Browser:

http://www.example.com/index.html#!/base/path

More Related Contents:

  1. Reloading the page gives wrong GET request with AngularJS HTML5 mode
  2. angularjs 1.6.0 (latest now) routes not working
  3. Understanding what it takes to remove the hash # from angular routes
  4. ng-model for “ (with directive DEMO)
  5. angular ng-bind-html and directive within it
  6. npm / yeoman install generator-angular without sudo
  7. AngularJS – convert dates in controller
  8. AngularJS $location not changing the path
  9. Validate form field only on submit or user input
  10. Get value when selected ng-option changes
  11. How do I escape curly braces for display on page when using AngularJS?
  12. Ng-click doesn’t work inside ng-repeat
  13. Custom form validation directive to compare two fields
  14. When not to use ‘track by $index’ in an AngularJS ng-repeat?
  15. Loading a mock JSON file within Karma+AngularJS test
  16. exact filter in angular
  17. Can protractor be made to run slowly?
  18. Using $index with the AngularJS ‘ng-options’ directive?
  19. Making an angular filter conditional
  20. Enable/Disable Anchor Tags using AngularJS
  21. How do i use $on in a service in angular?
  22. Illegal use of ngTransclude directive in the template
  23. AngularJS $q. Deferred queue
  24. angularjs ui-router strange behaviour with additional segment in route
  25. How to use `replace` of directive definition?
  26. How to highlight a selected row in ngRepeat?
  27. How to implement an ng-change for a custom directive
  28. how to make synchronous http request in angular js
  29. how do I get ng-include directive to work with a Content Delivery Network?
  30. Inject module dynamically, only if required

Leave a Comment