Using Route Location to Implement a Navigation Menu

Problem

You wish to implement a navigation menu, which shows the selected menu item to the user.

Solution

Use the $location service in a controller to compare the address bar URL to the navigation menu item the user selected.

The navigation menu is the classic ul/li menu using a class attribute to mark one of the li elements as active:

<body ng-controller="MainCtrl">
  <ul class="menu">
    <li ng-class="menuClass('persons')"><a href="#!persons">Home</a></li>
    <li ng-class="menuClass('help')"><a href="#!help">Help</a></li>
  </ul>
  ...
</body>

The controller implements the menuClass function:

app.controller("MainCtrl", function($scope, $location) {
  $scope.menuClass = function(page) {
    var current = $location.path().substring(1);
    return page === current ? "active" : "";
  };
});

You can find the complete example on github.

Discussion

When the user selects a menu item the client-side navigation will kick in as expected. The menuClass function is bound using the ngClass directive and updates the CSS class automatically for us depending on the current route.

Using $location.path() we get the current route. The substring operation removes the leading slash (/) and converts /persons to persons.