Bootstrap Navigationstabs mit AngularJS als aktiv markieren

When you start playing around with AngularJS, you want to start with the most easy task. Yeoman does most of the hard word generating the necessary boilerplate code for you. But it generates a bootstrap menu that hardwires the “Home” tab as active (at least in the currently available version 0.11.1). This small tutorial will explain you how to adapt the code to add that simple feature.

Starting with yeoman

This tutorial assumes that you already have Node.js and npm up and running. First of all you need to install yeoman:

mkdir bootstrap-navigation-example
cd bootstrap-navigation-example
npm install generator-angular

The next step is to generate the boilerplate code for an angular based app

yo angular
? Would you like to use Sass (with Compass)? Yes
? Would you like to include Bootstrap? Yes
? Would you like to use the Sass version of Bootstrap? Yes
? Which modules would you like to include? (Press  to select)
❯◉ angular-animate.js
 ◯ angular-aria.js
 ◉ angular-cookies.js
 ◉ angular-resource.js
 ◯ angular-messages.js
 ◉ angular-route.js
 ◉ angular-sanitize.js
 ◉ angular-touch.js

After doing so you can start testing you newly bootstrapped app by running:

grunt serve

Once you click on “About” you will be sent to /#/about (by angular-route), but the CSS will still highlight “Home” as active.

Fehlende Hervorhebung

Fixing up the content

First of all we must find the problematic piece of code. You have to take a look at app/index.html and look at the bootstrap navigation bar:

<div id="js-navbar-collapse" class="collapse navbar-collapse">
 <ul class="nav navbar-nav">
  <li class="active"><a href="#/">Home </a></li>
  <li><a href="#/about">About </a></li>
  <li><a href="#/">Contact </a></li>
 </ul>
</div>

As you see the li-item of Home is hardcoded to have the CSS style active. Now we have to replace it by some JavaScript dynamic provided by AngularJS. As it is a CSS class being set, we want to use “ng-class” for the dynamic.

<div id="js-navbar-collapse" class="collapse navbar-collapse" ng-controller="HeaderCtrl">
 <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>
  <li><a href="#/">Contact</a></li>
 </ul>
</div>

What we did was adding an ng-controller named “HeaderCtrl” to the menu and also ng-class to the menu elements. (Note that we ignore Contact here, as the yeoman generated app does not generate a angular-route, controller and view for the Contact page). Now we need to create the according controller to evaluate the ng-class expression. This is done by adding a new controller in app/scripts/app.js (there are lots of tutorials telling you to change controller.js, but this does not match the boilerplate generated by yeoman). You need to add the following code to your angular module at the bottom of the file:

    .controller('HeaderCtrl', function ($scope, $location) { 
        $scope.isActive = function (viewLocation) { 
            return viewLocation === $location.path();
        };
    });

Now if you switch back to your browser (and grunt serve already picked up your changes) you will see that about is marked as active.

Korrekte Hervorhebung

Conclusion

Now that you’ve seen how easy it is to start of with AngularJS and how easy can features can be added, go ahead and create your own web application.

Copyright © christophbrill.de, 2002-2018.