CODEWITHSUNDEEP
angularjs
mfrancis107
mfrancis107

Reputation: 1401

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?

Upvotes: 77

Views: 22049

Answers (4)

Eduard Gamonal
Eduard Gamonal

Reputation: 8031

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"

Upvotes: 150

Mouagip
Mouagip

Reputation: 5319

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.

Upvotes: 37

Sergey Makridenkov
Sergey Makridenkov

Reputation: 624

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

Upvotes: 4

mfrancis107
mfrancis107

Reputation: 1401

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.

Upvotes: 7

Related Questions