Per chi non nè fosse al corrente, AngularJS è un framework Javascript nato recentemente e di casa Google, qui https://angularjs.org/ il sito ufficiale ; un framework lo possiamo definire una struttura di dati che ci facilita lo sviluppo di un’applicazione e ci aiuta a mantenere un certo ordine; Angular è sviluppato per funzionare con il sistema pattern MVVM (ModelView ViewModel) e MVC (Model View Controller).
La peculiarità di un framework è che avendo una sua struttura permette a più persone di lavorarci conteporaneamente o anche a distanza di tempo, oppure anche di passare il codice di mano in mano senza dover fare quella sorta di “passaggio di consegna”, questo perchè è un pò come una lingua, i vocaboli sono conosciuti da tutti.
Altri framework diffusi possono essere per esempio Boostrap per il CSS oppure Pure, Zend o CodeIgniter per PHP, e via discorrendo.
In questo articolo vediamo una piccola applicazione realizzare con AngularJS, al lavoro!
Come sommare più campi con AngularJS
La prima cosa da fare è incorporare Angular nella nostra pagina web, possiamo utilizzare per esempio le CDN di Google, quindi
|
1 |
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> |
e successivamente aggiungere l’attributo ng-app ad un qualunque tag HTML.
N.B.
Per la compatibilità con versioni precedenti di Internet Explorer 9, consiglio di aggiungere la seguente stringa, subito dopo la dichiarazione del doctype.
|
1 |
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app> |
Quindi vediamo un semplice codice per fare la somma di più campi, prendendo come numeri le cifre che passerà l’utente all’interno di campi input text di un form, cioè variabili.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app> <input ng-model="primo" placeholder="Primo numero!" type="text" /></br> <input ng-model="secondo" placeholder="Secondo numero!" type="text" /></br> <input ng-model="terzo" placeholder="Terzo numero!" type="text" /></br> <input ng-model="quarto" placeholder="Quarto numero!" type="text" /></br> <h1> Risultato : {{primo--secondo--terzo--quarto}}! </h1> </div> </body> </html> |
Il risultato è simile a questo :
La sintassi {{nome variabile}} , ossia la view in sostanza stampa a video il risultato delle variabili passate attraverso l’attributo ng-model, ossia il model.
Alla prossima! Ciauz!
Programmatore WordPress Esperto WooCommerce
Sono l’autore di questo blog con tanti trucchi e guide su WordPress e WooCommerce.
