AngularJS - Menu di navigazione

Ciao a tutti, futuri sviluppatori web! Oggi esploreremo il mondo emozionante di AngularJS e impareremo a creare un menu di navigazione. Come il vostro amico di quartiere insegnante di informatica, sono qui per guidarvi in questo viaggio passo per passo. Allora, prendetevi la vostra bevanda preferita, fatevi comodi e partiamo insieme in questa avventura di programmazione!

AngularJS - Nav Menu

Cos'è un menu di navigazione?

Prima di immergerci nel codice, prendiamo un momento per capire cos'è un menu di navigazione. Immaginate di essere in una grande biblioteca con milioni di libri. Come trovate il libro che desiderate? Probabilmente cercate cartelli o un elenco, vero? Beh, un menu di navigazione su un sito web è proprio come quella guida della biblioteca. Aiuta gli utenti a navigare facilmente sul vostro sito.

Perché usare AngularJS per i menu di navigazione?

Potreste chiedervi, "Perché dovrei usare AngularJS per il mio menu di navigazione?" Beh, il mio curioso amico, AngularJS rende la creazione di menu dinamici e interattivi un gioco da ragazzi. È come avere un coltellino svizzero potenziato per lo sviluppo web!

Iniziare con il menu di navigazione AngularJS

Passo 1: Configurare il progetto

Prima di tutto, configuriamo il nostro progetto. Dobbiamo includere AngularJS nel nostro file HTML. Ecco come facciamo:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Il mio menu di navigazione AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Il nostro contenuto andrà qui -->
<script src="app.js"></script>
</body>
</html>

In questo codice, stiamo dicendo al nostro HTML che stiamo usando AngularJS aggiungendo ng-app="myApp" al tag <html>. Stiamo anche includendo la libreria AngularJS e il nostro file JavaScript (app.js) dove scriveremo il nostro codice AngularJS.

Passo 2: Creare il modulo e il controller AngularJS

Ora, creiamo il nostro modulo e controller AngularJS. Nel vostro file app.js, aggiungete il seguente codice:

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

app.controller('NavController', function($scope) {
$scope.menuItems = [
{ name: 'Home', url: '#/' },
{ name: 'Chi siamo', url: '#/about' },
{ name: 'Contatti', url: '#/contact' }
];
});

Qui, stiamo creando un modulo AngularJS chiamato myApp e un controller chiamato NavController. Il controller ha un array di elementi del menu che useremo per generare il nostro menu di navigazione.

Passo 3: Creare l'HTML del menu di navigazione

Ora, aggiungiamo l'HTML per il nostro menu di navigazione. Aggiornate il vostro file HTML per includere questo:

<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 questo codice, stiamo usando la direttiva ng-controller per dire ad AngularJS di usare il nostro NavController. Stiamo anche usando la direttiva ng-repeat per ciclare attraverso i nostri elementi del menu e creare un'elemento della lista per ognuno.

Funzionalità avanzate

Aggiungere lo stato attivo agli elementi del menu

Facciamo il nostro menu un po' più elegante aggiungendo uno stato attivo alla pagina corrente. Aggiornate il vostro controller in app.js:

app.controller('NavController', function($scope, $location) {
$scope.menuItems = [
{ name: 'Home', url: '#/' },
{ name: 'Chi siamo', url: '#/about' },
{ name: 'Contatti', url: '#/contact' }
];

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

E aggiornate il vostro HTML:

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

Ora, l'elemento del menu della pagina corrente avrà la classe 'active'.

Creare un menu a discesa

Portiamo il livello di difficoltà un po' più in alto e aggiungiamo un menu a discesa. Aggiornate il vostro controller:

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

E aggiornate il vostro 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>

Conclusione

Ecco fatto, ragazzi! Avete appena creato un menu di navigazione dinamico e interattivo utilizzando AngularJS. Ricordate, la pratica rende perfetti, quindi non avete paura di sperimentare con diversi stili e funzionalità.

Ecco una tabella che riassume le principali direttive AngularJS che abbiamo utilizzato:

Direttiva	Scopo
ng-app	Definisce l'elemento radice di un'applicazione AngularJS
ng-controller	Specifica quale controller utilizzare per l'elemento HTML
ng-repeat	Ripete un set di HTML un numero dato di volte
ng-class	Lega dinamicamente una o più classi CSS a un elemento HTML
ng-if	Rende condizionalmente un elemento HTML

Continuate a programmare, continuate a imparare e, soprattutto, continuate a divertirvi! Fino alla prossima volta, questo è il vostro amico di quartiere insegnante di informatica che si saluta. Buon coding!

Credits: Image by storyset

Tutorial precedente:

AngularJS - Applicazione In-line

Prossimo tutorial:

AngularJS - Menu di Scelta