remove hashes when dealing with routes in AngularJS

I have made a sample SPA using angular. I used Angular routing feature, to have a single layout page, and then inject and swap out different views depending on the URL the end user has requested. Everything works perfectly fine with the hashes in the href routes on the index page

<a href="#/page1">page1</a> but by doing so, my URL of the webpage will be like http://localhost/angular/#/page1

So I wanted to remove the hashes in the URL and make it like http://localhost/angular/page1

To remove the hashes, you will have to enable the html5Mode routing and also set the base href on the index page

https://docs.angularjs.org/error/$location/nobase

I did exactly the same (please see my code snippet below), however it does not work. I'm running this on local host Apache server.

var app = angular.module("myModule", ["ngRoute"])
  .config(function($routeProvider, $locationProvider) {
    $routeProvider
      .when("/page1", {
        templateUrl: "partials/page1.html",
        controller: "page1Controller"
      })
      .when("/page2", {
        templateUrl: "partials/page2.html",
        controller: "page2Controller"
      })
    $locationProvider.html5Mode(true);
  })
  .controller("page1Controller", function($scope) {
    $scope.message = "Page1";
  })
  .controller("page2Controller", function($scope) {
    $scope.message = "Page2";
  })

<html ng-app="myModule">

<head>
  <title>Angular Routing</title>
  <script type="text/javascript" src="angular.js"></script>
  <script type="text/javascript" src="angular-route.js"></script>
  <script type="text/javascript" src="js.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">

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

<body>
  <table>
    <h3>Sammple Routing in AngularJS</h3>
    <tr>
      <td class="leftMenu">
        <a href="page1">page1</a>
        <a href="page2">page2</a>
      </td>
      <td class="mainContent">
        <ng-view></ng-view>
        <!--partials will be filled here-->
      </td>
    </tr>
  </table>
</body>

Solution

I'm struggling with this on IIS right now and in my struggles, stumbled across an excellent guide for Apache: https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/

I hope it helps.