browser add a slash in hash fragment

Question

I have this HTML :

<a href="#MyHash" class="menuItem dpt0">Option 1</a>

When I hover it, I can read http://localhost/#MyHash

And when I click on it, the url in the browser is http://localhost/#/MyHash

Why is this slash added ? Is there a workaround ?

I couldn't figure it out...

Extra :

It's a .NET MVC web solution with AngularJS, I don't know if this is relevant

I saw some topic about googlebot / SEO (URL fragments: a leading slash in your hash url - good or bad?) : I don't care about it, this is not for a public website.

Edit :

See it in JSFiddle : https://jsfiddle.net/y2nLaxh5/embedded/result/ Hover the green part an look on options proposed (as it is in an iframe you should open in a new tab)

Edit2 :

(function () {
  var app = angular.module("myApp", []);

  app.controller("MenuController", ['$scope', function($scope) {
    $scope.items = [
      {
        name: "Option 1",
        url: 'MyUrl'
      },
      {
        name: "Option 2",
        url: 'MyUrl',
        items: [
          {
            name: "SubOption 2-1"
          }
        ]
      }
    ];

    function preprocessItems(items, depth) {
      depth = typeof(depth) === "undefined" ? 0 : depth;
      for (var i in items) {
        items[i].depth = depth;
        preprocessItems(items[i].items, depth + 1);
      }
    }
    preprocessItems($scope.items);
  }]);
})();

body {
  font-size: .85em;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
  color: #CCC;
  background-color: #333;
}

#background
{
  position: fixed;
  top: 15%;
  bottom: 15%;
  left: 15%;
  right: 15%;
}


#LeftMenu
{
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
}

#LeftMenu > .MenuContent
{
  position: absolute;
  width: 0;
  height: 100%;
  z-index:1;
}


#LeftMenu > .MenuContent > .MenuSlider
{
  background-color: #000;
  left: -200px;
  position: relative;
  width: 200px;
  height: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  transition: left 0.3s ease-out;
}

#LeftMenu:hover > .MenuContent > .MenuSlider
{
  left: 0;
}

.MenuSlider h3
{
  margin: 0 0 10px 0;
  text-align: center;
}

.MainIcon
{
  display: block;
  text-decoration: none;
  padding: 10px;
  border-radius: 0 0 5px 0;
  background-color: #1fa67a;
  width: 200px;
  height: auto;
  box-sizing: border-box;
  font-family: 'Nixie One';
  font-size: 2em;
  font-weight: bold;
  color: #FFF;
}
.MainIcon > p
{
  margin: 0;
}

.Activator
{
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}

.ActivatorCirle
{
  position: absolute;
  height: 400px;
  top: -200px;
  width: 400px;
  left: -200px;
  border-radius: 100%;
}

.ActivatorColumn
{
  position: absolute;
  height: 100%;
  top: 0;
  width: 30px;
  left: 0;
}


.menuItem.dpt0 { font-size: 1.2em; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/ng-template" id="menuItem_renderer.html">
    <a href="#!{{item.url}}" class="menuItem dpt{{item.depth}}">{{item.name}}</a>
    <div ng-if="item.items">
        <div ng-repeat="item in item.items" ng-include="'menuItem_renderer.html'"></div>
  </div>
</script>
<body ng-app="myApp">
  <div id="background"></div>
  <div id="LeftMenu" ng-controller="MenuController as menu">
    <div class="Activator">
      <div class="ActivatorCirle"></div>
      <div class="ActivatorColumn"></div>
    </div>
    <div class="MenuContent">
      <a class="MainIcon" href="/">
        <p>Media<br />Content<br />Supervisor</p>
      </a>
      <div class="MenuSlider">
        <h3>MENU</h3>
        <div ng-repeat="item in items" ng-include="'menuItem_renderer.html'"></div>
      </div>
    </div>
  </div>
</body>

The code you've shared definitely should not be causing that slash to appear; are you sure there's nothing else going on in your page that could be causing this? — Hayden Schiff, Aug 06 '15 at 15:36
Here is the fiddle : https://jsfiddle.net/y2nLaxh5/embedded/result/ — Apolo, Aug 06 '15 at 15:44
Thanks for the jsfiddle @Apolo, but could you please also post your code in the question itself? It's a StackOverflow policy to always have all code included in the post so it will always be available to anyone looking at this post months or years in the future. — Hayden Schiff, Aug 06 '15 at 15:46
I can reproduce the bug with JSFiddle, but not with SO code snippet, strange. I put it here anyway — Apolo, Aug 06 '15 at 15:55
Do you think IIS or .NET are the problem ? (maybe a bad config) — Apolo, Aug 06 '15 at 15:56
No, this bug occurs running in a jsFiddle without a web server, so it is not caused by those. I am not terribly familiar with Angular, but I think Angular might be automatically adding the slash, perhaps because of the exclamation point. [Here's a related answer I found.](http://stackoverflow.com/questions/24591344/angularjs-is-putting-forward-slash-after-hash-tag) — Hayden Schiff, Aug 06 '15 at 15:57
It is still the same without the exclamation point. But if you inspect the link, angular has properly written the hash without slash, so I guess angular is not the problem here — Apolo, Aug 06 '15 at 16:01
Right, the slash isn't getting added when the HTML is generated; it's added when the link is clicked. It looks like Angular is listening when the link is clicked and sending the user to the slightly different URL with the slash. — Hayden Schiff, Aug 06 '15 at 16:04

browser add a slash in hash fragment

Extra :

Edit :

Edit2 :

0 Answers0