Bootstrap Navigationstabs mit AngularJS als aktiv markieren

Wenn man eine neue Technologie wie AngularJS ausprobiert, sollte man mit einer möglichst einfachen Aufgabe beginnen. Yeoman erstellt bereits das notwendige Codegerüst für uns, aber es erstellt ein bootstrap-basiertes Menü, dass das Home-Element immer als aktiv markiert (zumindest in der aktuell verfügbaren Version 0.11.1). Dieses kleine Tutorial erklärt wie man den Code anpasst, um diese einfache Funktion zu implementieren.

Beginnen wir mit yeoman

Für dieses Tutorial ist es notwendig, dass du bereits Node.js und npm kennst und installiert hast. Wir starten also mit der Installation von yeoman:

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

Der nächste Schritt ist das entsprechende Codegerüst für eine AngularJS-basierte App zu erstellen

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

Anschließend kannst du dir die neu erstelle App mit folgendem Befehl ansehen:

grunt serve

Beim anklicken von „About“ wirst du die About-Seite unter /#/about sehen (das passiert dank angular-route), aber das CSS wird weiterhin den „Home“-Tab als aktiv markieren.

About menu tab not active

Das Menü reparieren

Zuerst müssen wir die problematische Stelle im Code finden. Wir öffnen also die Datei app/index.html und sehen uns die bootstrap Navigationsleiste an:

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

Wie leicht zu sehen ist, ist für das li-Element „Home“ der CSS-Stil „active“ fest eingetragen. Wir wollen diese Logik jetzt durch einigen AngularJS-basierten JavaScript-Code ersetzen. Da wir eine CSS-Klasse setzen wollen, werden wir das Attribut „ng-class“ verwenden.

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

Wir haben jetzt also folgendes geändert: Zum Einen haben wir einen ng-controller mit dem Namen „HeaderCtrl“ zum Menü hinzugefügt, zum Anderen haben wir eine ng-class zu den Menüelementen angegeben. (Hinweis: Wir lassen in diesem Tutorial „Contact“ absichtlich außen vor, da yeoman weder eine angular-route, noch einen Controller noch eine View für die „Contact“-Seite erstellt). Anschließen wollen wir natürlich den passenden Controller erstellen, um den Ausdruck in ng-class auswerten zu können. Wir fügen diesen neuen Controller in app/scripts/app.js ein (Es gibt einige Tutorials, die den Controller in der controller.js hinzufügen. Die ist aber nicht der Fall für eine App erstellt mit yeoman). Wir fügen also folgenden Code in das AngularJS-Modul am Ende der Datei ein:

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

Wenn du jetzt zurück in den Browser wechselst (und „grunt serve“ bereits die Änderung erkannt hat), wirst du sehen, dass das About-Tab als aktiv markiert ist.

About menu tab is active

Ergebnis

Jetzt hast du gesehen, wie einfach es ist, mit AngularJS die ersten Schritte zu gehen und wie leicht du neue Funktionen in deine Applikation einbauen kannst. Nutze dieses Wissen und erstelle deine eigene Webapplikation.

Copyright © christophbrill.de, 2002-2017.