Angularjs Routing Without the Hash '#'

AngularJS routing without the hash '#'

In fact you need the # (hashtag) for non HTML5 browsers.

Otherwise they will just do an HTTP call to the server at the mentioned href.
The # is an old browser shortcircuit which doesn't fire the request, which allows many js frameworks to build their own clientside rerouting on top of that.

You can use $locationProvider.html5Mode(true) to tell angular to use HTML5 strategy if available.

Here the list of browser that support HTML5 strategy: http://caniuse.com/#feat=history

AngularJS routing without the hash '#' - cannot get it work

You also need to add the <base href="/" /> in the <head> of your html page.

Example below.

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>My Website</title>
    <base href="/" />
</head>
<body>

</body>
</html>

EDIT

This will take you to a GitHub post with the answer. https://gist.github.com/cjus/b46a243ba610661a7efb

Use hash without #! in angularjs without router

Thats the hash bang you need to remove (#!). For that you need to add base tag in the index.html of yours

<base href="/">

and set @locationProvider html mode to true, for example:

angular.module('myApp').config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true); //activate HTML5 Mode
});

the last # i.e. (#page1) would be there as you are setting the id to traverse to that section

Redirect all URLs with hash to Angular Routes without hash

The answer posted by @Yanis almost worked, but required a few slight tweaks. His answer definitely deserves an upvote; however, below is the working solution I implemented:

export class AppComponent implements OnInit {
    constructor (private router: Router) { }

    ngOnInit() {
      this.router.events.subscribe(event => {
        if (event instanceof NavigationStart) {
          if (!!event.url && event.url.match(/^\/#/)) {
            this.router.navigate([event.url.replace('/#', '')]);
          }
        }
      });
    }
}

How to remove the hash # from the angularjs ng-route

you can use the $locationProvider like this -

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

Alternatively, you can use the base tag in your index.html (I suppose this is your landing page)

<head>
  <base href="/">
</head>

Removing base tag may cause some side effects in old IE browser like IE9