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.

Answer 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.