Current Page Highlighting in an AngularJS Application

If you are building a web application using AngularJS, chances are one of the first things you will want to set up is the routing and navigation. In this tutorial, I’ll show you how to set up current page highlighting in an angular application. Let’s get started!

The Angular Includes

Place these in head the head of your document, or before the closing body tag.

<!-- include angular -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<!-- include the angular route module -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>

As usual you will need to include Angular itself. Since we are working with the $route and $routeProvider variables, we need to include a separate AngularJS module.

The HTML

<div class="page__wrap" ng-app="myApp">
    <nav class="site__navigation" ng-controller="navCtrl">
        <a href="#/home" ng-class="{'active-tab': $route.current.activePage == 'home'}">Home</a>
        <a href="#/about" ng-class="{'active-tab': $route.current.activePage == 'about'}">About</a>
    </nav><!-- .site__navigation -->
    <div class="site__container">
        <div ng-view></div>
    </div><!-- .site__container -->
</div><!-- .page__wrap -->

The HTML should look pretty standard. There are the declarations for ng-app and ng-controller, like you would have in any application using AngularJS. We also have a div with an attribute of ng-view. This is where the template that you specify in the Javascript will render out to. This will also inherit the scope of the controller that you specify. More details on this later. The way we accomplish the current page highlighting is by adding a class to the anchor tag that represents the current page. We do this using Angular’s ng-class attribute. Within the attribute, you create an object with the classname as the key, and the true/false evaluation as the value. If that value returns true, then it will apply the class. If it returns false, then the class will not be applied. For example, ng-class=”{className: true}” would add a class of className to the element it was on because you pass true as the evaluation. You can pass in a function, or basic if statements (like I do in the demo).

Ng-class not working with a dash (-) in the class name

If your class name contains a dash (-), then ng-class as described above will not work for you. You need to wrap your class name in quotes  in order for it to work.

<a href="#/about" ng-class="{'active-tab': $route.current.activePage == 'about'}">About</a>

The CSS

body {
    background: #eee;
}
.page__wrap {
    border: 1px solid #ccc;
    padding: 25px;
    width: 90%;
    margin: auto;
    background: white;
}
.site__navigation {
    margin-bottom: 20px;
}
.site__navigation a {
    text-decoration: none;
    display: inline-block;
    color: blue;
    padding: 10px 15px;
}
a.active-tab {
    background: blue;
    color: white;
}

Very standard CSS, just styles for the demo.

The Javascript

//declare the application and it's dependecies 
var myApp = angular.module('myApp', ['ngRoute']);

//set some config options- in this case the routes!
myApp.config(['$routeProvider', function ($routeProvider) {
    //handle each route
    $routeProvider.
    when('/home', {
        template: 'This is the home page.',
        controller: 'HomeCtrl',
        activePage: 'home'
    }).
    when('/about', {
        template: 'This is the about page.',
        controller: 'AboutCtrl',
        activePage: 'about'
    }).
    otherwise({
        redirectTo: '/home'
    });

//navCtrl definition
function navCtrl($scope, $route) {
    //we set $route to  we have access to it in the HTML
    $scope.$route = $route;
}

//empty controller we defined above
function HomeCtrl($scope) {}

//empty controller we defined above
function AboutCtrl($scope) {}

I have included comments in the JS code. It should be fairly easy to follow. Basically, you instantiate the angular module, then use that variable to access the config options for your application. In this example, we are setting up routes. When you use the .when() method, you can pass through either a template or a templateUrl that points to a file that will be rendered in place of your div with ng-view. For this simple example, I opted to use the template method, however in a real world application you will likely use the templateUrl method. The only unique thing we are doing in the route setup area is adding the property of activePage to the object and setting it to the page name that the route represents. It is because of this that we can specify which page should be highlighted. You can use any name- I chose activePage. Yours could be active, or maybe activeTab, or something else entirely. We have to inject $route into our navCtrl controller so that we have access to it’s properties. It is within this $route variable that the current page route information can be found. We set $scope.$route = $route; because we need access to that variable in our HTML file and the only way to do that is through the controller’s scope.

Demo

Leave a comment

Your email address will not be published. Required fields are marked *