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.