AngularJS - Nav Menu

Hallo ihr zukünftigen Web-Entwickler! Heute tauchen wir in die aufregende Welt von AngularJS ein und lernen, wie man ein Navigationsmenü erstellt. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich auf diesem Weg Schritt für Schritt zu führen. Also hole dir dein lieblingsGetränk, setze dich bequem hin und lassen wir gemeinsam dieses Coding-Abenteuer beginnen!

Was ist ein Nav Menu?

Bevor wir uns dem Code widmen, lassen wir uns einen Moment Zeit, um zu verstehen, was ein Nav Menu ist. Stell dir vor, du befindest dich in einer riesigen Bibliothek mit Millionen von Büchern. Wie würdest du das Buch finden, das du suchst? Du würdest wahrscheinlich nach Schildern oder einem Verzeichnis suchen, oder? Ein Navigationsmenü auf einer Webseite ist genau wie dieses Bibliotheksverzeichnis. Es hilft den Benutzern, sich auf deiner Webseite leicht zurechtzufinden.

Warum AngularJS für Nav Menus verwenden?

Du fragst dich vielleicht, "Warum sollte ich AngularJS für mein Nav Menu verwenden?" Na, mein neugieriger Freund, AngularJS macht das Erstellen dynamischer und interaktiver Menüs zum Kinderspiel. Es ist wie ein superstarkes Schweizer Taschenmesser für Webentwicklung!

Erste Schritte mit AngularJS Nav Menu

Schritt 1: Projekt einrichten

Zuerst einmal, lassen wir uns unser Projekt einrichten. Wir müssen AngularJS in unsere HTML-Datei einbinden. Hier ist, wie wir das machen:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Mein AngularJS Nav Menu</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Unser Inhalt kommt hier hin -->
<script src="app.js"></script>
</body>
</html>

In diesem Code teilen wir unserer HTML mit, dass wir AngularJS verwenden, indem wir ng-app="myApp" zum <html>-Tag hinzufügen. Wir binden auch die AngularJS-Bibliothek und unsere eigene JavaScript-Datei (app.js), in der wir unseren AngularJS-Code schreiben werden, ein.

Schritt 2: AngularJS-Modul und Controller erstellen

Nun erstellen wir unser AngularJS-Modul und Controller. In deiner app.js-Datei füge den folgenden Code hinzu:

var app = angular.module('myApp', []);

app.controller('NavController', function($scope) {
$scope.menuItems = [
{ name: 'Startseite', url: '#/' },
{ name: 'Über uns', url: '#/about' },
{ name: 'Kontakt', url: '#/contact' }
];
});

Hier erstellen wir ein AngularJS-Modul namens myApp und einen Controller namens NavController. Der Controller hat ein Array von Menüpunkten, das wir zur Generierung unseres Nav Menus verwenden werden.

Schritt 3: HTML für das Nav Menu erstellen

Nun fügen wir das HTML für unser Nav Menu hinzu. Aktualisiere deine HTML-Datei, um folgendes zu enthalten:

<body ng-controller="NavController">
<nav>
<ul>
<li ng-repeat="item in menuItems">
<a href="{{item.url}}">{{item.name}}</a>
</li>
</ul>
</nav>

<script src="app.js"></script>
</body>

In diesem Code verwenden wir die ng-controller-Direktive, um AngularJS mitzuteilen, dass wir unseren NavController verwenden sollen. Wir verwenden auch die ng-repeat-Direktive, um durch unsere Menüpunkte zu iterieren und für jeden einen Listeneintrag zu erstellen.

Erweiterte Funktionen

Aktiven Zustand zu Menüpunkten hinzufügen

Lassen wir unser Menü ein bisschen schicker machen, indem wir einen aktiven Zustand zur aktuellen Seite hinzufügen. Aktualisiere deinen Controller in app.js:

app.controller('NavController', function($scope, $location) {
$scope.menuItems = [
{ name: 'Startseite', url: '#/' },
{ name: 'Über uns', url: '#/about' },
{ name: 'Kontakt', url: '#/contact' }
];

$scope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
});

Und aktualisiere dein HTML:

<li ng-repeat="item in menuItems" ng-class="{ active: isActive(item.url) }">
<a href="{{item.url}}">{{item.name}}</a>
</li>

Nun hat der Menüpunkt der aktuellen Seite eine 'active'-Klasse.

Ein Dropdown-Menü erstellen

Lassen wir uns steigern und ein Dropdown-Menü hinzufügen. Aktualisiere deinen Controller:

$scope.menuItems = [
{ name: 'Startseite', url: '#/' },
{
name: 'Dienstleistungen',
url: '#/services',
subItems: [
{ name: 'Web Design', url: '#/services/web-design' },
{ name: 'SEO', url: '#/services/seo' }
]
},
{ name: 'Kontakt', url: '#/contact' }
];

Und aktualisiere dein HTML:

<nav>
<ul>
<li ng-repeat="item in menuItems" ng-class="{ active: isActive(item.url) }">
<a href="{{item.url}}">{{item.name}}</a>
<ul ng-if="item.subItems">
<li ng-repeat="subItem in item.subItems">
<a href="{{subItem.url}}">{{subItem.name}}</a>
</li>
</ul>
</li>
</ul>
</nav>

Fazit

Und voilà, Leute! Ihr habt gerade ein dynamisches, interaktives Nav Menu mit AngularJS erstellt. Denkt daran, Übung macht den Meister, also habt keine Angst, verschiedene Stile und Funktionen auszuprobieren.

Hier ist eine Tabelle, die die wichtigsten AngularJS-Direktiven zusammenfasst, die wir verwendet haben:

Direktive	Zweck
ng-app	Definiert das Wurzelelement einer AngularJS-Anwendung
ng-controller	Gibt an, welchen Controller für das HTML-Element zu verwenden
ng-repeat	again ein bestimmtes HTML-Element eine bestimmte Anzahl von Malen
ng-class	Binding von einer oder mehreren CSS-Klassen zu einem HTML-Element dynamisch
ng-if	Bedingte Anzeige eines HTML-Elements

Weiter codieren, weiter lernen und vor allem, weiter Spaß haben! Bis zum nächsten Mal, das ist dein freundlicher Nachbarschafts-Computerlehrer, der sich verabschiedet. Frohes Coden!

Credits: Image by storyset

Vorheriges Tutorial:

AngularJS - In-line-Anwendung

Nächstes Tutorial:

AngularJS - Wechsel-Menü