AngularJS – scopriamo il framework di Google

Introduzione

Questa guida è per coloro a cui piace utilizzare javascript, per chi non ha mai utilizzato un framework ma solo librerie come jQuery,  per chi ha utilizzato altri framework ma potrebbe essere motivato a passare ad Angular. Inoltre la guida servirà a dare una conoscenza basilare delle funzionalità e delle possibilità del framework di Google.

Se non sapete cos’è un framework, vi basti sapere chè si può definire “una struttura che facilita lo sviluppo, sia in termini di velocità che in termini di ordine e mantenibilità del codice”.

Un framework è quindi uno strumento che aiuta chi scrive il codice e soprattutto aiuta i team di sviluppo ed eventuali terzi che riprenderanno in mano il codice.

Detto questo, spero di aver suscitato la tua curiosità per questi potentissimi strumenti nel caso in cui tu non li conosca, in caso contrario spero comunque di avere la tua approvazione, perciò cito alcuni dei più utilizzati/famosi framework a disposizione nel mondo web:

PHP:

  • Zend
  • Symfony
  • YII
  • CodeIgniter
  • CakePHP

JS:

  • chiaramente AngularJS
  • Backbone
  • Knockout
  • Emberjs

Perchè è importante conoscere un framework?

La conoscenza di un framework, non solo arricchirà il vostro bagaglio di conoscenze con una voce in più, ma porterà vantaggi come:

- risparmio di tempo

- riuscire a fare cose in più, prima impensabili o estremamente lunghe

- riuscire a creare cose nuove

- acquisire un metodo di scrittura ed organizzazione del codice riconosciuto da tutti

AngularJS

AngularJS è il framework javascript creato direttamente da Google: è scritto secondo pattern MVVM, ma permette un’implementazione del codice secondo il pattern MVC.

Se queste sigle vi sono nuove, MVVM sta per ModelView ViewModel ed MVC sta per ModelViewController. Si tratta di design pattern, che sono degli schemi logici con cui si definiscono le relazioni tra le classi, questo favorisce la progettazione dell’applicativo. MVC è molto utilizzato perchè favorisce la mantenibilità del codice, la riusabilità e la divisione logica.

Uno dei vantaggi più grandi e che caratterizano questo framework è la possibilità di integrare e utilizzare molte funzioni utilizzando quasi esclusivamente l’HTML grazie all’approccio dichiaritivo.

Questo rende molto facile l’interazione con il framework anche ai meno esperti; un altro punto a favore di Angular è il fatto che grazie a questa semplicità di utilizzo si ottengono già grandi risultati e si ha la possibilità, in pochissimo tempo, di rendere il contenuto dinamico via variabili definite in Javascript.

In questo primo articolo vorrei mostrarvi alcune di queste funzionalità semplici con qualche esempio, per poi approfondirne l’utilizzo e la personalizzazione più avanti. Utilizzerò sempre la versione più aggiornata di AngularJS nel momento in cui inizio a scrivere, che potete reperire qui; in questo caso ho utilizzato la 1.2.3.

La creazione di un applicazione Angular

Creare la nostra prima applicazione Angular è molto semplice, ecco le uniche cose che dobbiamo fare:

  • importare Angular, in questo caso dal CDN di Google
  • inserire l’attributo ng-app nel contenitore dell’applicazione(solitamente html, ma può essere qualunque tag, è bene ricordare che il dominio del DOM su cui può lavorare l’applicazione è definito da questo attributo, html risulta quindi comodo perchè l’applicazione funzionerà su tutta la pagina)
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app>
 	<head>
 		<title>Hello Angular</title>
 		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
 	</head>
 	<body>
		...
 	</body>
</html>

 

La sintassi xmlns:ng=”http://angularjs.org” id=”ng-app” aiuta Internet Explorer nelle versioni precedenti alla 9 ad interpretare gli attributi e i tag personalizzati di Angular. Altri accorgimenti in caso di problemi con Explorer possono essere trovati nella documentazione ufficiale.

 

Il data-binding bidirezionale

Il data-binding è un processo che sincronizza un elemento della User Interface con un elemento della logica applicativa.

In Angular questo processo è bidirezionale, in quanto la modifica può essere effettuata sia dalla logica applicativa ed essere sincronizzato nella view, sia essere modificato nella view ed essere sincronizzato nella logica applicativa.

Se ancora non vi è chiara la distinzione, la View corrisponde al codice HTML, mentre la logica applicativa, meglio definita come Controller secondo il modello MVC, sarà scritta in codice javascript; il Model sarà quello che nell’esempio porta la variabile nome e sarà utilizzabile sia dalla view che dal controller grazie al data-binding.

Se avete per esempio utilizzato jQuery, sapete che per sincronizzare la view e il controller è necessario, una volta modificata una variabile in javascript, andare a modificare l’html per aggiornare la view, oppure se si vuole tenere sincronizzato un campo testo bisogna rimanere in ascolto sugli eventi della tastiera ed aggiornare ogni volta le variabili js.

Con Angular tutto ciò non è necessario!

Modificando la la base di prima (esempio):


<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app>
 	<head>
 		<title>Hello {{nome}}</title>
 		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
 	</head>
 	<body>
	      <label>Nome:</label>
	      <input type="text" ng-model="nome" value="Angular" placeholder="Inserisci il tuo nome">
	      <h1>Hello, {{nome}}!</h1>
 	</body>
</html>


Notiamo subito:

  • la sintassi {{ variabile }}: equivale a una stampa della variabile e permette di tenere la view sincronizzata

  • ng-model=”variabile”: è una direttiva e permette di sincronizzare il valore del tag input con una variabile javascript (nell’esempio la variabile si chiama nome), nel caso in cui sia già definita una variabile javascript con quel nome nello scope più vicino (vedremo poi come funzionano gli scope) verrà utilizzata quella, altrimenti ne verrà creata una (come in questo caso).

Notiamo perciò che quando scriviamo nella textbox, la sincronizzazione parte dalla view andando a modificare la variabile nome (view->model), di conseguenza parte anche la sincronizzazione model->view aggiornando rispettivamente il title e l’elemento h1.

Nota. Se si utilizza TWIG la sintassi  {{ variabile }} va in conflitto con quella di twig. Si può risolvere il problema utilizzando il servizio interpolateProvider.

Le direttive

Le direttive sono ciò che permette ad Angular di lavorare anche tramite un approccio dichiaritivo.

Si presentano tramite forma di attributi HTML o veri e propri custom tags, ma sono delle vere e proprie entità funzionali e strutturali.

Abbiamo già a disposizione molte direttive di default, alcune sono:

  • ng-app
  • ng-model
  • ng-bind
  • ng-if
  • ng-show
  • ng-hide
  • ng-repeat
  • ng-view
  • ng-scope
  • ng-switch
  • ng-click

Essendo queste direttive presenti nelle API di Angular presentano la particolarità di iniziare con il prefisso ng-. Il bello è che possiamo definire anche noi queste direttive, ed essendo un approccio dichiarativo, una volta creata una direttiva questa è estremamente riutilizzabile. Una nota particolare è che queste direttive sono estremamente legate all’elemento del DOM a cui sono associate.

Un assaggio di Angular

Se questo non è bastato a stupirvi, voglio darvi un altro piccolo assaggio di ciò che si può fare davvero in poco tempo con questo framework. Con questo secondo esempio vi voglio mostrare la potenza di una direttiva e dell’approccio dichiaritivo.

Trovate l’esempio qui

<!doctype html>
<html class="ng-app" id="ng-app" ng-app xmlns:ng="http://angularjs.org">
 	<head>
 		<title>Hello {{nome}}</title>
 		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
 	</head>
 	<body ng-init="nomi = ['Angular','Mondo','Antonio','Pasquale','Mario','Giulio']">
 		 <p ng-repeat="nome in nomi">Ciao {{ nome }}</p>
 	</body>
</html>

repeat

Alla prossima!

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »

L'autore

Diplomato in informatica, inizia la sua esperienza di web developer all’età di 17 anni con le prime collaborazioni. Attualmente Wordpress, Symfony, Bootstrap e AngularJS compongono le sue giornate insieme a vari caffè. Ama sviluppare e collaborare con i creativi; tolto il lavoro la sua passione sono le moto.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

17 commenti

  1. Andrew Sopen
  2. Saro
  3. Flavio
  4. vilson
  5. Luigi Sabbetti
  6. Damiano

Trackback e pingback

  1. AngularJS – MVC in azione | Your Inspiration Web
    […] scorso articolo abbiamo visto cos’è AngularJS, come funziona e quali sono le sue grandi […]

Lascia un Commento

Current day month ye@r *