Why does Angular rewrite the URL fragment #foo to #/foo and how to avoid that?

Question

I have an app that relies on the URL fragment being #moved. A piece of JS code picks that up and reminds the user to update her bookmark:

if (window.location.hash === '#moved') {
  window.location.hash = "";
  history.pushState('', document.title, window.location.pathname);
  show_notification();
}

Now a test fails because after introducing Angular (stable version, 1.0.8), #moved is being rewritten to #/moved. (I'm injecting $location into my controller, but I'm not sure if that's what's causing the behavior.)

I could just change the condition, but I was curious why Angular does that and how to avoid it?

A possible duplicate of http://stackoverflow.com/questions/18611214/turn-off-url-manipulation-in-angularjs — Vijay Pande, Nov 09 '13 at 14:27

Kato · Answer 1 · 2013-12-16T22:15:00.703

For my use case, I wanted to both use angular's routing and also have some bookmarks for scrolling to content. I ended up using a directive for my bookmarks and leaving routing alone.

<ul>
   <li><a href="#" app-bookmark="body">Home</a></li>
   <li><a href="#" app-bookmark="#usage">Getting Started</a></li>
   <li><a href="#" app-bookmark=".examples .first">Examples</a></li>
</ul>

I then employed the following directive. This uses jQuery to create a smooth scrolling effect, but could just as easily do document.body.scrollTop in place of the animate function.

app.directive('appBookmark', function() {
   return {
      restrict: 'A',
      compile: function(el, attr) {
         el.on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            $('body,html').animate({scrollTop: Math.max($(attr.appBookmark).offset().top-50, 0)});
        });
      }
   }
});

Why does Angular rewrite the URL fragment #foo to #/foo and how to avoid that?

1 Answers1