AngularJS, il supereroe dei framework JavaScript …di Google

4 dicembre 2012

AngularJS è un framework JavaScript, patrocinato da Google, utile a semplificare la realizzazione di applicazioni Web single page: favorisce un approccio dichiarativo allo sviluppo client-side, migliore per la creazione di interfacce utente, laddove l’approccio imperativo è ideale per realizzare la logica applicativa.

AngularJS si ispira al pattern MVC, come altri framework analoghi quali Knockout o Ember.js. Ma rispetto ai diretti concorrenti, questo framework è in grado di ridurre in maniera considerevole il codice necessario a realizzare applicazioni HTML/JavaScript.

>>Leggi come creare applicazioni JavaScript MVC con Ember.js

In questo articolo esploreremo le caratteristiche principali di AngularJS implementando un semplice catalogo fotografico online. Scopriremo ciò che rende questo framework molto più che un semplice supporto al pattern MVC.

Creare un progetto AngularJS

Per creare un progetto basato su AngularJS dobbiamo innanzitutto scaricare il pacchetto dalla home page del progetto o da GitHub. Se decidiamo invece di appoggiarci al CDN di Google è sufficiente inserire nella pagina HTML un riferimento alla libreria come mostrato di seguito:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>

È prevista anche la possibilità di creare un progetto partendo da un ambiente già predisposto secondo delle particolari linee guida: Angular-seed. Tuttavia, per lo sviluppo dell’applicazione che porteremo avanti nel corso dell’articolo non faremo ricorso ad esso per evitare di introdurre elementi che al momento possono apparire poco chiari. Ritorneremo invece su Angular-seed alla fine dell’articolo dopo avere acquisito i concetti fondamentali del framework.

Concetti di base

Prima di iniziare la creazione del nostro catalogo online, introduciamo alcuni concetti di base di AngularJS. Innanzitutto diremo che la struttura minima di una pagina è analoga alla seguente:

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Prima pagina con AngularJS</title>
<script src="js/angular.min.js"></script>
</head>

<body>
<p>
  La somma di 12 e 13 &egrave; uguale a {{12+13}}
</p>
</body>

</html>

Questa pagina, pur nella sua estrema semplicità, è un esempio di applicazione AngularJS. Pur non avendo utilizzato una sola riga di codice JavaScript, il risultato visualizzato all’interno di un browser sarà la scritta: “La somma di 12 e 13 è uguale a 25”.

Analizziamo gli elementi rilevanti presenti nel codice HTML della pagina per capire cosa sono e come funzionano. Il primo elemento nuovo che incontriamo è l’attributo ng-app in <html ng-app>. Questo attributo rappresenta una direttiva AngularJS e indica al sistema quale elemento della pagina deve essere considerato come elemento radice della nostra applicazione. In altre parole, AngularJS prenderà il controllo della porzione di DOM la cui radice viene marcata con la direttiva ng-app.

Nel nostro semplice esempio abbiamo marcato l’intera pagina, ma è possibile marcare anche soltanto una porzione della pagina, come ad esempio il <body> o un <div>.

Il riferimento alla libreria è naturalmente necessario perché AngularJS sia attivo. Quello che avviene in corrispondenza del caricamento del codice della libreria è il cosiddetto processo di bootstrap di AngularJS. In sintesi, dopo il caricamento del documento HTML da parte del browser vengono creati alcuni oggetti di sistema e viene effettuata la compilazione del DOM a partire dall’elemento marcato con ng-app, elaborando ogni direttiva, binding ed espressione incontrati. Al termine della fase di bootstrap, AngularJS si mette in attesa del verificarsi di eventi sul browser.

L’ultimo elemento chiave della nostra pagina è la stringa {{12 + 13}}. Questa rappresenta un’espressione AngularJS e viene valutata ed inserita nel DOM dal framework. Un’espressione tuttavia non viene valutata soltanto in fase di bootstrap, ma viene generato un binding che aggiorna il risultato dell’espressione ogni qualvolta cambia il suo valore. Ciò è maggiormente evidente nel seguente esempio:

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Prima pagina con AngularJS</title>
<script src="js/angular.min.js"></script>
</head>

<body>
<div>
  La somma di
  <input type="number" ng-model="addendo1" />
  e
  <input type="number" ng-model="addendo2" />
  &egrave;
  {{addendo1 + addendo2}}
</div>
</body>
</html>

In questo caso abbiamo previsto due caselle di testo in cui l’utente può inserire dei valori numerici e visualizzare dinamicamente il risultato, come mostrato nella seguente figura:

Figura 1.

Da evidenziare l’uso della direttiva ng-model che implementa un binding bidirezionale tra ciascuna casella di testo ed il modello dei dati interno. L’espressione che calcola la somma dei valori immessi dall’utente viene valutata automaticamente senza necessità di codice JavaScript.

Se vuoi aggiornamenti su AngularJS, il supereroe dei framework JavaScript ...di Google inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su AngularJS, il supereroe dei framework JavaScript ...di Google

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy