JavaScript è un linguaggio di scripting client-side, in grado di modificare e di rendere dinamica una pagina; il codice JS viene interpretato direttamente dal browser e, negli anni, sono nati un sacco di plugin per migliorare alcune parti del linguaggio: si pensi a JQuery, che permette di realizzare con poco codice sofisticati effetti grafici e offre un metodo per selezionare il contenuto del DOM assai più semplice (e più vicino al CSS).
Oggi però, non voglio parlarvi di JQuery, bensì di un altro plugin meno diffuso, che permette di operare sul DOM in modo molto versatile: AngularJS

Intanto, AngularJS ha un metodo tutto suo per inserire nuove espressioni, cioè fra 4 parentesi graffe:

Tanto per farvi capire le potenzialità, vi rimando ad alcuni esempi da me creati e che spiegherò passo per passo:

• Esempio 1


• Esempio 2


• Esempio 3


• Esempio 4

1^o Esempio
Aperta la pagina, noterete una banale scritta delle mie "La vuoi una Mela?"; sembrerà banale, ma questa scritta è stata generata da un'espressione AngularJS (sisi, provate pure a premere F12 per controllare, tanto non la troverete): vediamo insieme come.

In primis, creiamo un documento HTML ma facciamo una piccola modifica alla dichiarazione; subito dopo, includiamo lo script angularJS

"ng-app"?? Che significa?! Semplicemente, diciamo al core di AJS che potrà agire su tutto il documento HTML
Il tag "script", invece, include il sorgente di AJS (ovviamente :asd:)

Nel body inseriamo il seguente codice:

Eccoci! La nostra prima espressione AJS. In pratica, vi ho mostrato semplicemente come questo plugin tratti le stringhe e come si possano semplicemente concatenare. Inoltre, per usare AJS non c'è bisogno di usare alcun tag "script", ma basta soltanto utilizzare "{{" e "}}".

2^o Esempio
Posto tutto il codice e dopo ve lo spiego:

Intanto, notiamo come all'input sia stato inserito un nuovo attributo "ng-model" che definisce il nome del controllo su AJS. Subito dopo, senza inserirlo fra virgolette, mettiamo in un'espressione semplicemente il nome del controllo e, al variare del suo contenuto, cambierà anche il testo. Questo fa capire come AJS sia dinamico: cioè, aggiorna automaticamente il contenuto delle variabili (che in questo caso corrisponde ad un controllo).

Provate però ad inserire un codice html, esso non viene interpretato e qui le cose si complicano. Per far interpretare anche il codice html, bisogna levare l'espressione "{{ testo }}" ed aggiungere l'attributo ng-bind-html-unsafe a "p" con valore "testo" (cioè il nome del controllo):

In questo modo, anche l'HTML verrà interpretato.

3° Esempio
In questo esempio, vedremo qualcosa di più complesso, ovvero come elaborare dati JSON con AngularJS.
Intanto, ad un documento nuovo, dobbiamo aggiungere una funzione "Controller", che contiene i dati da utilizzare:

Noterete subito la funzione UserCtrl (il nome è arbitrario, ovviamente) alla quale viene passato per argomento "$scope", ovvero il controllo al quale andrà applicato il codice; nel nostro caso è "Body", dove viene dichiarato l'attributo ng-controller uguale a UserCtrl.
Nella funzione "UserCtrl", diciamo che nello $scope è presente una lista di nome user, alla quale vengono associati dei dati JSON.

Per visualizzarli, utilizziamo il codice seguente inserito nel body:

Sotto il listato "Ul", vi è un solo "li" da esempio, cioè che va ripetuto per ogni "user" nel "Users" dello $scope (un po' come il metodo foreach).
Vi sono poi varie espressioni che prendono i valori dal listato JSON.

Detto questo, ASJ è un potente plugin che vi consiglio di implementare nelle vostre pagine.