5

Can I disable these fellas? I am using angular.js in asp.net mvc app, and I don't need angular to control anything related to address bar or the links...

Right now in html5 mode disabled ($locationProvider.html5Mode(false)) it adds hash and action method's name to the address-bar, for example: you go to \Home\index, it navigates and then address bar text changes into Home\index#\index. ain't that's annoying?

if I enable html5 mode it stops loading pages at all (except the initial). I try going from initialy loaded page to another - it changes the address-bar's text (without adding hashtag thing this time) but won't load the page itself. ain't that frustrating?

iLemming
  • 34,477
  • 60
  • 195
  • 309
  • You disable them by not including either dependency in your `.config()` call. Sounds like you have something misconfigured though if html5Mode isn't working for you. – Langdon Jun 13 '13 at 00:26
  • its html5 mode disabled by default, right? But I want complete non-interference to the address-bar from angular services – iLemming Jun 13 '13 at 04:38
  • 1
    Hi Agzam, have you had any luck on finding a sollution for this issue ? – Dries Marien Aug 22 '13 at 08:47
  • Agreed; any luck on this? I'm have the same issue(s) – couzzi Sep 20 '13 at 19:43

1 Answers1

5

A makeshift solution exists here AngularJS 1.1.5 - automatically adding hash tag to URLs

The answer explains the first step (as explained above, with the addition of the new hash-prefix)

yourApp.config(['$locationProvider', function($locationProvider){
    $locationProvider.html5Mode(true).hashPrefix('!');
}]);

The first bit handles Angular interfering with your address-bar visually, but now clicking on any links doesn't function properly as (read: history.pushState)

So, the workaround, as pointed out by user @Kevin Beal is some variation of setting the target of the <a> to _self

$('a[href]').attr({'target':'_self'})

or on a case-by-case basis:

<a href="foo" target="_self">Foo</a>
<a href="http://some.external/bar" target="_blank">Bar</a>

Although, for the sake of convenience and sanity, I think it's combination of these.

Markup sans target

<a href="foo">Foo</a>
<a href="http://some.external/bar">Bar</a>

JS

// If `http` protocol present, assume external link
$('a[href^="http://"]').attr({'target':'_blank'});

// Otherwise, assume internal link
$('a:not([href^="http://"])').attr({'target':'_self'});

Worth noting that the above selectors do required jQuery proper.

Community
  • 1
  • 1
couzzi
  • 6,316
  • 3
  • 24
  • 40