remove hashes when dealing with routes in AngularJS

Question

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>

Have you tried to add / at the end of base href ? like: <base href="angular/" /> — MaKCbIMKo
– MaKCbIMKo, Commented Apr 27, 2016 at 21:20

Mike Feltman · Accepted Answer · 2016-04-27 20:49:01Z

1

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.

answered Apr 27, 2016 at 20:49

Mike Feltman

5,1721 gold badge19 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wild Widow Over a year ago

Thanks for the link, very useful..will try to set up my server settings

Jordan · Accepted Answer · 2016-04-27 21:22:46Z

0

I followed this article to remove the hashes from URLs: https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag Here is the quick code for what he does:

app.js or every angular page:

app.config(["$locationProvider",
    function($locationProvider) {
        $locationProvider.html5Mode(true);
    }
]);

Angular template or each angular page must include this in the head:

<base href="/">

I'm not at all sure of the inner workings so I can't explain what exactly this does. Everything I know about this is from that article so feel free to take a look.

Edit: Could be a problem with <a href="#"></a> try using an empty string like <a href=""></a> It prevents hashes from being added to the url when clicking dead links but still gives the anchor hover effect.

edited Apr 27, 2016 at 21:22

answered Apr 27, 2016 at 21:17

Jordan

9122 gold badges10 silver badges38 bronze badges

3 Comments

Wild Widow Over a year ago

- I did both of these as you can see in my snipper..it didn't work. I believe you need to modify hosting server settings as well like Mike mentioned.

Jordan Over a year ago

I'm not sure, but could it be that you are using <base href="angular">? Maybe try <base href="/angular">. Another possible problem, when using dead links I use <a href=""></a> instead of <a href="#"></a>. It doesn't add the # when clicking on dead links but still gives the link hover effect.

Jordan Over a year ago

Also, as I look at your code. If your base url is /angular shouldn't your anchors be <a href="angular/page1"></a>? This along with not using <a href="#"></a> for dead links and the $locationProvider HTML5 mode should eliminate hashes from your URLs. Let me know if you run into any problems.

Collectives™ on Stack Overflow

remove hashes when dealing with routes in AngularJS

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related