Menu a scomparsa con AngularJS
Il framework JavaScript AngularJS può essere utilizzato per realizzare dei menu a comparsa/scomparsa da integrare nelle nostre Web application o nelle pagine dei nostri siti Web; in questo articolo verrà proposta una semplice procedura finalizzata ad ottenere tale risultato, nello specifico verrà creata una piccola applicazione basata sulla direttiva ng-click che fa parte dei costrutti di Angular con i quali sarà possibile definire degli event listeners, cioè componenti in grado di intercettare un evento, come per esempio un’azione effettuata da un utente.
Per la precisione ng-click è una direttiva concepita per rilevare i click del mouse su un determinato elemento HTML, come per esempio un pulsante. Il codice proposto di seguito mostrerà come sia possibile associare tale event listener ad un button che, se clickato una prima volta, renderà visibile un menu di navigazione prima nascosto e, se clickato una seconda volta, nasconderà nuovamente il menu riportandolo allo stato iniziale.
La parte relativa a JavaScript servirà per la definizione di un controller, cioè di un oggetto che utilizzeremo per gestire il flusso dei dati nelle operazioni di comparsa e scomparsa della componente coinvolta.
<script>
var menu = angular.module('menuApp', []);
menu.controller('menuCtrl', function($scope) {
$scope.mostraMenu = false;
$scope.funcMenu = function() {
$scope.mostraMenu = !$scope.mostraMenu;
}
});
</script>
Fatto questo definiremo una divbox nella quale la direttiva ng-app introdurrà il nome dell’applicazione Angular e ng-controller quello del controller:
<div ng-app="menuApp" ng-controller="menuCtrl">
Il button sarà associato alla funzione tramite la già citata direttiva ng-click e rappresenterà lo strumento attraverso il quale l’utente potrà interagire con l’applicazione:
<button ng-click="funcMenu()">Accedi al menu</button>
Ora non resterà che inserire il menu, si noti l’impiego della direttiva ng-show che si occupa appunto di rendere visibile o di nascondere l’elemento delimitato dalla divbox associata ad essa:
<div ng-show="mostraMenu"> <h1>Il nostro menu:</h1> <ul> <li><a href="http://www.mrwebmaster.it/html/guide/guida-html5/" title="Guida HTML5">HTML5</a></li> <li><a href="http://www.mrwebmaster.it/php/guide/guida-php/" title="Guida PHP">PHP</a></li> <li><a href="http://www.mrwebmaster.it/programmazione/guide/guida-python/" title="Guida Python">Python</a></li> <li><a href="http://www.mrwebmaster.it/javascript/" title="Guida JavaScript">JavaScript</a></li> <li><a href="http://www.mrwebmaster.it/css/guide/guida-css3/" title="Guida CSS3">CSS3</a></li> </ul> </div>
Per comodità del lettore verrà proposto di seguito il codice della pagina Web per intero:
<!DOCTYPE html>
<html>
<head>
<title>Menu a scomparsa con AngularJS</title>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="menuApp" ng-controller="menuCtrl">
<button ng-click="funcMenu()">Accedi al menu</button>
<div ng-show="mostraMenu">
<h1>Il nostro menu:</h1>
<ul>
<li><a href="http://www.mrwebmaster.it/html/guide/guida-html5/" title="Guida HTML5">HTML5</a></li>
<li><a href="http://www.mrwebmaster.it/php/guide/guida-php/" title="Guida PHP">PHP</a></li>
<li><a href="http://www.mrwebmaster.it/programmazione/guide/guida-python/" title="Guida Python">Python</a></li>
<li><a href="http://www.mrwebmaster.it/javascript/" title="Guida JavaScript">JavaScript</a></li>
<li><a href="http://www.mrwebmaster.it/css/guide/guida-css3/" title="Guida CSS3">CSS3</a></li>
</ul>
</div>
<script>
var menu = angular.module('menuApp', []);
menu.controller('menuCtrl', function($scope) {
$scope.mostraMenu = false;
$scope.funcMenu = function() {
$scope.mostraMenu = !$scope.mostraMenu;
}
});
</script>
Accedi, poi nascondi nuovamente il menu clickando sul pulsante.
</body>
</html>
Chiaramente, quello del menù rappresenta soltanto un possibile esempio dell’utilizzo di tali direttive che potranno essere impiegate per visualizzare o nascondere qualsiasi altra tipologia di contenuto.
