Corsi on-line

Un semplice calcolatore con AngularJS

Il framework JavaScript AngularJS supporta tutti gli operatori aritmetici che consentono di effettuare calcoli matematici, in questo post verrà quindi proposta la procedura necessaria per la creazione di un semplice calcolatore in grado di restituire a video un risultato sulla base degli operandi selezionati dall’utilizzatore, per rendere l’applicazione maggiormente user friendly la scelta di questi ultimi potrà essere effettuata tramite l’input type number di HTML5.

AJSIl codice del calcolatore sarà il seguente, a titolo di esempio è possibile cominciare proponendo uno script che permetta di eseguire delle moltiplicazioni, il primo risultato restituito contestualmente al primo caricamento della pagina sarà basato su dei valori di default che fungeranno da parametri iniziali associati a moltiplicando e moltiplicatore:

<!DOCTYPE html>
<html>
<head>
<title>Un semplice calcolatore con AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<style>
body {background-color:lightgray}
h1   {color:blue}
p    {color:green}
#content {
width: 500px ;
margin-left: auto;
margin-right: auto;
padding: 10px;
border: dashed 1px red;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="content">
<h1>AngularJS Calculator</h1>

<div data-ng-app="" data-ng-init="moltiplicando=2;moltiplicatore=3">
Moltiplicando: <input type="number" ng-model="moltiplicando">
Moltiplicatore: <input type="number" ng-model="moltiplicatore">
<p><strong>Prodotto:</strong> {{moltiplicando * moltiplicatore}}</p>
</div>

</div>
</body>
</html>

Nel caso in cui invece di una moltiplicazione si desideri eseguire una divisione le modifiche da apportare al sorgente non saranno particolarmente impegnative, naturalmente verrà richiesta la modifica dell’operatore aritmetico da utilizzare:

<div data-ng-app="" data-ng-init="dividendo=4;divisore=2">
Dividendo: <input type="number" ng-model="dividendo">
Divisore: <input type="number" ng-model="divisore">
<p><strong>Quoziente:</strong> {{dividendo / divisore}}</p>
</div>

Analizzando i costrutti utilizzati, si sottolinea l’impiego delle direttive ng-app, ng-model e ng-init. La prima ha in pratica il compito di inizializzare in modo automatico (fase di auto-boostrap) un’applicazione basata su AngularJS quando viene caricata la pagina Internet che la contiene; ng-model effettua invece il binding dei valori generati tramite input utente (come per esempio il contenuto della textarea di un form), in parole povere consente di associare un valore ad un elemento sintattico.

Un discorso a parte andrebbe invece dedicato alla direttiva ng-init che si occupa di inizializzare i dati che l’applicazione dovrà elaborare; l’esempio proposto in questo articolo è particolarmente semplice quindi l’impiego di tale costrutto non presenta particolari problemi, in progetti articolati però ng-init potrebbe rendere inutilmente complessa la logica applicativa, motivo per il quale sarebbe meglio utilizzare invece i controllers.

In un prossimo post la stessa applicazione verrà quindi riproposta attraverso un refactoring basato su questi ultimi.

Post correlati
I più letti del mese
Tematiche