Normal Angularjs links with html5Mode

Question

I work with angles in html 5 mode. It seems like it controls all the href on the page. But what if I want to have a link to something in the same application domain, but not really in the application. An example is pdf.

If I do <a href="/pdfurl"> angular, try using html5mode and use the route provider to determine which view should be loaded. But I really want the browser to go to this page in the usual way.

The only way to do this is to create a rule with the route provider and redirect it to the desired page using window.location?

Answer 1

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

• Links containing the target attribute. Example: <a href="/ext/link?a=b" target="_self">link</a>
• Absolute links pointing to another domain Example: <a href="http://angularjs.org/">link</a>
• Links starting with '/', which lead to a different base path when base defined Example: <a href="/not-my-base/link">link</a>

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

Answer 2

As with Angular v1.3.0, a new rewriteLinks option exists for the location rewriteLinks . This toggles the "capture" of all links on the page:

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

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

Answer 3

If you do not want Angular to take control of href. Put the target attribute in the link.

This way the PDF will pass html5mode and routeProvider, and the browser will just go to that URL.

Answer 4

Another solution. All links will work fine (reload the page). Links marked with ng-href="/path" will play on pushState. A small hack of JS will help with this.

 .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); }])