Angular JS Toggle Active Class on Path Change using Ui-Router

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

Getting Started

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

index.html

This is the main page of our app.

<!DOCTYPE html>
<html ng-app="app">
<head>
        <title>Angular JS Toggle Active on Path Change using Ui-Router</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="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.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('/home')"><a ui-sref="home">Home</a></li>
                        <li ng-class="active('/about')"><a ui-sref="about">About</a></li>
                        <li ng-class="active('/blog')"><a ui-sref="blog">Blog</a></li>
                </ul>
            </div>
        </div>
</nav>
<div class="container">
        <div ui-view></div>
</div>
<script src="app.js"></script>
</body>
</html>

We have use Bootstrap to create our navbar and we put ng-class which toggles our active function and we pass the path of the menu as a parameter.

app.js

This contains our angular js scripts. .config is where we set the routes of our app and in .controller, we have our active function which returns active whenever the passed parameter is the same as the current path.

var app = angular.module('app', ['ui.router']);
 
app.config(function($stateProvider, $urlRouterProvider) {
    
    $urlRouterProvider.otherwise('/home');
    
    $stateProvider
 
        .state('home', {
            url: '/home',
            templateUrl: 'home.html'
        })
              
        .state('about', {
            url: '/about',
                templateUrl: 'about.html', 
            
        })
 
        .state('blog', {
            url: '/blog',
            templateUrl: 'blog.html', 
        });
        
});
 
app.controller('mainCtrl', function($scope, $location){
        $scope.active = function(path){
                 return ($location.path() === path) ? 'active' : '';
        }
});

Creating our Paths

The ff are the templates for the paths in this tutorial. 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

26 views