15

I'm using AngularJS, and would like to process a given #hash-fragment in the address-bar. However, —and this is key— I'll not be using the hash-fragment to encode a path. But it seems AngularJS insists on interpreting it that way.

For example, when html5Mode is disabled:

  • A given URL: http://my.domain.com#my-hash
  • is turned into http://my.domain.com/#/my-hash, and
  • $location.hash() will be empty.

And when html5Mode is enabled:

  • A given URL: http://my.domain.com#my-hash
  • is turned into http://my.domain.com/my-hash, and
  • $location.hash() will still be empty.

AngularJS must be thinking: "oh, you have html5, let me remove that hash for you". How considerate…

The only way to get anything from $location.hash() is when the URL has a double hash:

  • For a given URL: http://my.domain.com##my-hash
  • $location.hash() is finally equal to "my-hash", and
  • if also $locationProvider.html5Mode(true) one of the hashes is stripped from the URL.

But I really need a simple single hash character to remain unprocessed. Is this possible?

mhelvens
  • 4,225
  • 4
  • 31
  • 55
  • what is use case? have you considered using `search` rather than hash? – charlietfl Nov 28 '13 at 14:19
  • 3
    It's the original use-case of the hash-fragment: I'm using it to focus attention on a specific part of the current document. `search` is too verbose and used for another purpose. – mhelvens Nov 28 '13 at 14:23
  • I don't think there are any easy ways to regain controls of #, but you have alternatives to focus on a part of a document, http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html , http://stackoverflow.com/questions/14712223/how-to-handle-anchor-hash-linking-in-angularjs , http://docs.angularjs.org/api/ng.$anchorScroll – SoluableNonagon Dec 24 '13 at 14:51
  • @EliteOctagon: I know there are Javascript ways to do this. In fact, I would use Javascript for this myself, because the particular kind of 'focus' I am talking about is not just scrolling over to some element. --- The purpose behind my question is to get nice, readable URLs. I have painstakingly designed a URL scheme for my app which requires the hash-fragment to be used for this purpose. --- (I may just have to hack into the AngularJS code.) – mhelvens Dec 24 '13 at 14:57
  • what happens when you grab window.location.hash? – SoluableNonagon Dec 24 '13 at 14:59
  • @EliteOctagon: AngularJS rewrites `window.location`, which is basically the problem. `window.location.hash` is based on what AngularJS has set. --- When `html5Mode` is enabled it returns the same as `$location.hash()` (with a `#` in front if nonempty). --- When `html5Mode` is disabled it returns everything starting at `#`, including what AngularJS considers to be the path. – mhelvens Dec 24 '13 at 16:42

1 Answers1

15

# seems to work well enough on the angular api docs page. So with a little snooping and testing I found that

app.config(function($locationProvider) {
    $locationProvider.html5Mode(true).hashPrefix('!');
});

makes the difference.

towr
  • 4,147
  • 3
  • 20
  • 30
  • Ah, the hashPrefix! Silly, in retrospect, that I never tried this. :-) It's not ideal, because that leaves one character that I can no longer use in the start of the hash fragment. But I'm sure I can find a character for which this doesn't matter. Thanks! – mhelvens Dec 26 '13 at 18:41
  • What if someone does not want to use html5Mode? – Andrea Reginato Jul 01 '14 at 12:44
  • `hashPrefix` also applies in non-html5mode (which it has to be able to fall back on anyway, for non-html5 browsers), see https://docs.angularjs.org/guide/$location for an example and further documentation – towr Jul 02 '14 at 08:50