How to define links to angular routes in hashbang mode?

Question

What is the right way to define links to angular routes in hashbang (non-HTML5) mode?

Suppose that I have the following nav. bar:

 <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#!/first">First</a></li> <li><a href="#!/second">Second</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#!/" ng-click="logout()">Logout</a></li> </ul> </div>

It works but I have the following questions in mind:

I saw a lot of articles where authors do the same thing via /first or #/first instead of #!/first but it doesn't work for me for some reason (I guess that's because I'm using #! as a hashstring but I don't know why there's so many examples with #/first instead of #!/first if the latter is the default one)

Is it ok to define logout action this way?

<li><a href="#!/" ng-click="logout()">Logout</a></li>

Because it seems a little bit ugly for me.

angular routes were changed in 1.6. see stackoverflow.com/questions/41211875/… — Claies
– Claies, Commented Feb 24, 2017 at 11:06

Community · Accepted Answer · 2017-05-23 12:31:56Z

1

The hash-bang synthax is new from Angular 1.6. This release is still new, it may explain why you don't see many articles with the hash-bang routing.

Anyway, from this line:

<li><a href="#!/" ng-click="logout()">Logout</a></li>

You can move the redirection to the logout() function:

$scope.logout = function() { ... $location.url('/home'); }

Don't forget to inject $location.

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Feb 24, 2017 at 11:04

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

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

4 Comments

FrozenHeart Over a year ago

Yeah, that's what I'm actually doing. So it's totally ok, right? And what about the other question?

Mistalis Over a year ago

@FrozenHeart In my opinion, it is the cleanest way. I've updated my answer about the #!/ synthax, hope it helps! :)

FrozenHeart Over a year ago

Are you sure that location.url argument should have a hashbang string? It works w/o it as well

Mistalis Over a year ago

@FrozenHeart My bad, you can use '/home' instead. Fixed!

Collectives™ on Stack Overflow

How to define links to angular routes in hashbang mode?

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related