Corsi on-line

AngulaJS: un calcolatore avanzato

In un precedente articolo abbiamo descritto la procedura necessaria per la realizzazione di un calcolatore, basato sul framework JavaScript AngularJS, in grado di eseguire semplici operazioni aritmetiche; questa volta il progetto verrà implementato nuovamente introducendo alcune funzionalità più avanzate; se infatti il calcolatore già proposto permetteva di effettuare una sola operazione, questa volta l’utente avrà la possibilità di scegliere tra  ben sei operazioni differenti.

AngularJS-largeUna volta selezionati gli operandi da elaborare, questi potranno essere utilizzati per addizioni, sottrazioni, moltiplicazioni e divisioni grazie alla definizione dell’operatore da adottare, il calcolatore consentirà inoltre di elevare a potenza il primo operando sulla base del valore espresso tramite il secondo operando e di ottenere la radice quadrata del primo operando; a livello sintattico la vera novità risiede però nel fatto che questa volta non verrà utilizzata la direttiva ng-init, preferendo l’impiego dei controllers.

In sostanza il codice JavaScript dell’applicazione non farà altro che creare un application controller, denominato MathController, quest’ultimo avrà il compito di gestire i dati passati all’applicazione:

angular.module('MyCalculator', [])
    .controller('MathController', function($scope) {
        $scope.result = function() {
            if ($scope.operatore == '+') {
                return $scope.x + $scope.y;
            }
            if ($scope.operatore == '-') {
                return $scope.x - $scope.y;
            }
            if ($scope.operatore == '*') {
                return $scope.x * $scope.y;
            }
            if ($scope.operatore == '/') {
                return $scope.x / $scope.y;
            }
            if ($scope.operatore == '^') {
                return Math.pow($scope.x , $scope.y);
            }
            if ($scope.operatore == 'n^') {
                return Math.sqrt($scope.x);
            }
        };
    });

Operandi e operatori potranno essere definiti tramite un apposito modulo che sfrutterà l’input type number di HTML5 per i valori da elaborare, presenterà la direttiva ng-model con cui effettuare il binding dei valori trasmessi via input utente e ng-controller per l’indicazione dell’application controller:

<div ng-app="MyCalculator" ng-controller="MathController">
  <p><input type="number" ng-model="x"></p>
  <p><input type="number" ng-model="y"></p>
  <p><select ng-model="operatore">
        <option>+</option>
        <option>*</option>
        <option>-</option>
        <option>/</option>
        <option>^</option> 
        <option>n^</option> 
     </select></p>
  <p>Risultato: <strong>{{ result() }}</strong></p>
 </div>

Per comodità dell’utente riportiamo di seguito l’intero codice (markup HTML, CSS e JavaScript) della pagina Web contenente il calcolatore:

<!DOCTYPE html>
<html>
<head>
<title>Un calcolatore completo con AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<style>
body {background-color:green}
h1, p  {color:yellow}
#content {
width: 500px ;
margin-left: auto;
margin-right: auto;
padding: 5px;
border: dashed 1px white;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="content">
<h1>AngularJS Calculator</h1>
<div ng-app="MyCalculator" ng-controller="MathController">
  <p><input type="number" ng-model="x"></p>
  <p><input type="number" ng-model="y"></p>
  <p><select ng-model="operatore">
        <option>+</option>
        <option>*</option>
        <option>-</option>
        <option>/</option>
        <option>^</option> 
        <option>n^</option> 
     </select></p>
  <p>Risultato: <strong>{{ result() }}</strong></p>
 </div>
</div>
<script>
angular.module('MyCalculator', [])
    .controller('MathController', function($scope) {
        $scope.result = function() {
            if ($scope.operatore == '+') {
                return $scope.x + $scope.y;
            }
            if ($scope.operatore == '-') {
                return $scope.x - $scope.y;
            }
            if ($scope.operatore == '*') {
                return $scope.x * $scope.y;
            }
            if ($scope.operatore == '/') {
                return $scope.x / $scope.y;
            }
            if ($scope.operatore == '^') {
                return Math.pow($scope.x , $scope.y);
            }
            if ($scope.operatore == 'n^') {
                return Math.sqrt($scope.x);
            }
        };
    });</script>
</body>
</html>

Chiaramente nulla vieterà allo sviluppatore di implementare ulteriormente l’applicazione in modo da integrare funzionalità addizionali.

Post correlati
I più letti del mese
Tematiche