Angular JS Toggle Active Class on Path Change using ng-Route

Submitted by nurhodelta_17 on Tuesday, January 23, 2018 - 23:10.

Getting Started

I've used CDN for Bootstrap, Angular JS and Angular Route so you need internet connection for them to work.

index.html

This is the main view of our app.

<!DOCTYPE html>
<html ng-app="app">
<head>
        <title>Angular JS Toggle Active Class on Path Change using ng-Route</title>
        <meta charset="utf-8">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                <a class="navbar-brand" href="www.sourcecodester.com">SourceCodeSter</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                        <li ng-class="active('/')"><a href="#/">Home</a></li>
                        <li ng-class="active('/about')"><a href="#/about">About</a></li>
                        <li ng-class="active('/blog')"><a href="#/blog">Blog</a></li>
                </ul>
            </div>
        </div>
</nav>
<div class="container">
        <div ng-view></div>
</div>
<script src="app.js"></script>
</body>
</html>

In here, we used Bootstrap navbar to create our menu and we use ng-class to toggle active function that will send our defined parameter. The active function will then compared the sent parameter to the current path and will return active if matched.

app.js

This contains our angular js script. .config is where we setup the each of our path and .controller is where active function is found.

var app = angular.module('app', ['ngRoute']);
 
app.config(function($routeProvider){
    $routeProvider
    .when('/', {
        templateUrl: 'home.html'
    })
    .when('/about', {
        templateUrl: 'about.html'
    })
    .when('/blog', {
        templateUrl: 'blog.html'
    })
    .otherwise({
        redirectTo: '/'
    });
});
 
app.controller('mainCtrl', function($scope, $location){
        $scope.active = function(path){
                 return ($location.path() === path) ? 'active' : '';
        }
});

Creating our Path Templates

The ff. are the template for our route. home.html

<h4>This is the Home Page</h4>
<p>See that the <b>Home Tab</b> is active</p>

about.html

<h4>This is the AboutPage</h4>
<p>See that the <b>AboutTab</b> is active</p>

blog.html

<h4>This is the Blog Page</h4>
<p>See that the <b>Blog Tab</b> is active</p>

That ends this tutorial. Happy Coding :)

Add new comment

33 views