How do I apply active class to navbar using angular-ui-utils?

I am a rank beginner with angularJS and I’m developing the ui for a single-page app in angularJS using node/bower/grunt and I have installed angular-ui-bootstrap and the route and event utils from angular-ui-utils.
I’ve used ng-class={active:$uiRoute} on the menu items but when a menu item is selected the active class is not applied…does $uiRoute handle this or do I need to code it separately?

Apologies for asking a dumb question…
Here is the code:

  • Programmatically bring focus on first row in ng-grid
  • angular ui modal after close event
  • AngularJS: $decorator binding new variables to directive
  • Configure Angular UI Button
  • Bootstrap datepicker format not working on initialization
  • Angular UI-Router - using “resolve” directly on template url
  • `<div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li ui-route="/" ng-class="{active:$uiRoute}"><a href="#/">Home</a></li>
        <li ui-route="/about" ng-class="{active:$uiRoute}"><a href="#/about">About</a></li>
        <li ui-route="/other" ng-class="{active:$uiRoute}"><a href="#/other">Other</a></li>
      </ul>
    </div>
    ...
    <script src="bower_components/angular-ui-utils/modules/route/route.js"></script>
    <script src="bower_components/angular-ui-utils/modules/event/event.js"></script>`
    

    And

    angular.module('myApp', ['ngRoute','ngResource','ui.bootstrap'])
    .config(function ($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
          templateUrl: 'views/about.html',
          controller: 'AboutCtrl'
      })
      .when('/other', {
        templateUrl: 'views/other.html',
        controller: 'OtherCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
    })
    

  • Module 'ui.bootstrap' is not available - Angularjs
  • how to show html on pop over using angular ui bootstrap?
  • Form Validation with Dependent Fields in AngularJS
  • Do you have to us ng-Controller in the view or can you just declare it in the $routeProvider?
  • How to pass parameter when I redirect the page in angularjs using ui router?
  • Is there any way to close Angular UI tooltip by clicking outside it?
  • 3 Solutions collect form web for “How do I apply active class to navbar using angular-ui-utils?”

    Looking through the ui-utils docs, it appears you have not injected the module dependency. Change your myApp to inject ui.utils

    angular.module('myApp', [
        'ngRoute',
        'ngResource',
        'ui.bootstrap',
        'ui.utils'
    ])
    .config(function ($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
          templateUrl: 'views/about.html',
          controller: 'AboutCtrl'
      })
      .when('/other', {
        templateUrl: 'views/other.html',
        controller: 'OtherCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
    });
    
    add ng-class="{'active':isActive('/about')}"
    
    .run([ '$rootScope', '$location', function($rootScope, $location, ) {
        $rootScope.isActive = function(path) {
             if ($location.path() && $location.path().substring(0, path.length) == path) {
                return true;
             }
             return false;
        }
    }
    

    I advise you tu use UI router with named states.

    Your router will looks like :

    angular
      .module('myApp', ['ui.router'])
      .config(($stateProvider, urlRouterProvider) => {
        $stateProvider
          .state('index', {
            url: '/',
            templateUrl: 'views/main.html',
            controller: 'MainCtrl',
          })
          .state('index.about', {
            url: 'about/'
            templateUrl: 'views/about.html',
            controller: 'AboutCtrl'
          });
        $urlRouterProvider.otherwise('/');
      });
    

    and you will be able to user ui-sref-active directive in your template like :

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li ui-sref-active="{ 'active': 'index' }">
          <a href="" ui-sref="index">Home</a>
        </li>
        <li ui-sref-active="{ 'active': 'index.about' }">
          <a href="" ui-sref="index.about">About</a>
        </li>
      </ul>
    </div>