Angularjs Normal Links with html5Mode

I am working with angularjs in html 5 mode. Which appears to take control of all href's on the page. But what if I want to have a link to something within the same domain of the app but not actually in the app. An example would be a pdf.

If i do <a href="/pdfurl"> angular will just try to use the html5mode and use the route provider to determine which view should be loaded. But I actually want the browser to go to that page the normal way.

Is the only way to do this is to make a rule with the route provider and have that redirect to the correct page with window.location?

in HTML5 mode, there are three situations in which the A tag is not rewritten: from the angular docs

• Links that contain a target attribute. Example: <a href="/ext/link?a=b" target="_self">link</a>
• Absolute links that point to a different domain Example: <a href="http://angularjs.org/">link</a>
• Links starting with '/' that lead to a different base path when base is defined Example: <a href="/not-my-base/link">link</a>

so your case would be 1. add target="_self"

As of Angular v1.3.0 there is a new rewriteLinks configuration option for the location provider. This switches "hijacking" all the links on the page off:

module.config(function ($locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        rewriteLinks: false
    });
});

While disablig this behavior for all links may not be your intention, I'm posting this for others who, like me, want to use $location in html5 mode only to change the URL without affecting all links.

If you don't want Angular to take control of the href. Place a target attribute on the link.

So PDF will by pass the html5mode and the routeProvider and the browser will just go to that url.

Other solution. All links will work normally (reload page). Links marked by ng-href="/path" will play on pushState. Small JS hack help with it.

.config(["$locationProvider", function($locationProvider) {
	// hack for html5Mode customization
	$('a').each(function(){
		$a = $(this);
		if ($a.is('[target]') || $a.is('[ng-href]')){
		} else {
			$a.attr('target', '_self');
		}
	});

	$locationProvider.html5Mode(true);
}])