You wish to implement a navigation menu, which shows the selected menu item to the user.
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.
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
.