Sololearn: Learn to Code

+ 1

ng-view and ng-route will get the work done for you. Just define your views using the $routeProvider. Here is a sample code Main page <body> <header> <nav class="navbar navbar-default" ng-controller="HeaderController"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Sample App</a> </div> <ul class="nav navbar-nav"> <li ng-class="{ active: isActive('/')}"><a href="#/">Home</a></li> <li ng-class="{ active: isActive('/about')}"><a href="#/about">About</a></li> </ul> </div> </nav> </header> <ng-view></ng-view> </body> app.js (route config) (function () { var app = angular.module('sampleApp',['ngRoute']); app.config(function ($routeProvider){ $routeProvider .when('/',{ templateUrl:'home.html' }) .when('/about',{ templateUrl:'about.html' }) .otherwise({ redirectTo:'/'}); }); })(); and the HeaderController to highlight the active tabs (function () { var headerController = function ($scope, $location) { $scope.isActive = function (viewLocation) { return viewLocation === $location.path(); }; }; angular.module('sampleApp').controller('HeaderController',headerController); }()); Here is the plunker demo i think this would help you

11th Sep 2017, 5:11 PM

MsJ