AngularJS application links/routes in anchor tag with HTML5 mode

Question

How do I link to other AngularJS application locations within an anchor A tag? I am using HTML5 hashless mode and would like to avoid having the page actually reload.

For example, in non-HTML5 mode I would do this:

<a href='#/path'>Link</a>

In HTML5 mode I can do this:

<a href='/path'>Link</a>

But this actually causes the browser to reload the new URL. I've also tried using ng-href and also the /#/path syntax but none of them seem to work as I'd like.

How do I properly link from an anchor tag?

yoniLavi · Accepted Answer · 2016-12-12 14:27:45Z

17

Update:

It seems like this is possible without using $location, you just have to keep the same base link. From the docs:

When you use HTML5 history API mode, you will need different links in different browsers, but all you have to do is specify regular URL links, such as: <a href="/some?foo=bar">link</a>

When a user clicks on this link,

In a legacy browser, the URL changes to /index.html#!/some?foo=bar

In a modern browser, the URL changes to /some?foo=bar

In cases like the following, links are not rewritten; instead, the browser will perform a full page reload to the original link.

Links that contain target element. Example: <a href="/ext/link?a=b" target="_self">link</a>

Absolute links that go to a different domain. Example: <a href="http://angularjs.org/"></a>

Links starting with '/' that lead to a different base path when base is defined. Example: <a href="/not-my-base/link">link</a>

Old:

You should use the $location service. Inject it into the controller and put it on the $scope (or in a convenience method):

function MainCtrl($scope,$location){
  $scope.goto = function(path){
    $location.path(path);
  }
}

<a ng-click="goto('/path')">Link</a>

edited Dec 12, 2016 at 14:27

yoniLavi

2,7721 gold badge27 silver badges32 bronze badges

answered May 14, 2013 at 13:49

joakimbl

18.1k5 gold badges57 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

edA-qa mort-ora-y Over a year ago

This is what I've done now in a controller on the body element. It just seems a little odd that there is no standard way of doing this.

edA-qa mort-ora-y Over a year ago

I haven't had a chance to test that out yet. But I trust that'll it work so I'll accept now.

Konstantin Pelepelin Over a year ago

I prefer to create portable apps. Can I use href and/or ng-href without prior knowledge of base path and html5mode on/off? Or should I always use ng-click in such case?

Mohsin Syed · Accepted Answer · 2015-06-19 16:07:29Z

0

This worked for me in html5mode enabled.

<a ng-href='./path'>Link</a>

answered Jun 19, 2015 at 16:07

Mohsin Syed

1,5891 gold badge9 silver badges6 bronze badges

Comments

Anand Muley · Accepted Answer · 2018-04-12 12:14:27Z

0

Angular Js uses hash prefix followed by exclaimation. Hence if you want to use the anchor tag then have it this way.

Link

https://docs.angularjs.org/tutorial/step_09

answered Apr 12, 2018 at 12:14

Anand Muley

13 bronze badges

Collectives™ on Stack Overflow

AngularJS application links/routes in anchor tag with HTML5 mode

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related