AngularJS mobile, ngTouch, tap e $swipe

AngularJS è un framework pensato per lo sviluppo di applicazioni Web e fornisce il supporto per definire una architettura anche abbastanza complessa. Nel corso di questa guida abbiamo avuto modo di osservare concretamente funzionalità e componenti di Angular utili a costruire le nostre applicazioni Web.

Dal momento però che il Web è sempre più visitato da dispositivi mobili e le stesse tecnologie Web sono in qualche misura utilizzate per costruire una particolare categoria di applicazioni mobile, le cosiddette app ibride, è naturale chiederci quale supporto offra AngularJS per il mondo mobile.

Se realizziamo un’applicazione Web vorremmo che fosse accessibile anche da dispositivi mobili. Al di là delle problematiche grafiche, di adattamento alle dimensioni dello schermo, ovvero della capacità di essere responsive, che in qualche misura esulano dalla responsabilità del framework, alcune tematiche tipiche del mondo mobile possono essere gestite tramite appositi moduli, anche di terze parti, e tenendo presenti alcuni accorgimenti in fase di sviluppo. Questi sono gli argomenti che andremo ad affrontare in questa sezione.

click != touch

In linea di massima, il tocco del dito dell’utente su un’area di una pagina Web viene assimilato al click del puntatore del mouse. Questo fa sì che spesso la gestione dell’evento click è ritenuta sufficiente per gestire l’interazione touch tipica dei dispositivi mobili. Tuttavia, l’equivalenza click=touch non sempre è valida o ottimale:

• Il modello di interazione touch è più variegato e prevede diverse modalità di tocco dello schermo come anche il multi-touch: l’utilizzo di più dita contemporaneamente.
• Inoltre alcune modalità di interazione tipiche del mouse non hanno una corrispondenza nell’interazione touch e, viceversa, col mouse non possiamo effettuare talune interazioni che ci siamo abituati a fare con le dita.
• Se a questo aggiungiamo il fatto che un browser mobile aggiunge un ritardo di circa 300 millisecondi al tocco sullo schermo per individuare un eventuale secondo tocco da interpretare come zoom della pagina, allora possiamo concludere che l’assimilazione tra clic e touch non è per nulla valida.

Il modulo ngTouch

AngularJS prevede un modulo aggiuntivo per la gestione ottimizzata dell’interazione touch: ngTouch. Il modulo va scaricato (ad esempio da code.angularjs.org) ed inserito nella pagina HTML e la sua dipendenza va dichiarata nella definizione del modulo della nostra applicazione, come mostrato nel seguente esempio:

<script src="angular-touch.js"></script> 
... 
angular.module('myApp', ['ngTouch', ...])

click e tap

ngTouch gestisce in maniera trasparente tap e click tramite la direttiva ng-click. In altre parole, il modulo si occupa di distinguere automaticamente l’evento click e l’evento tap offrendo allo sviluppatore un’unica interfaccia, quella già nota offerta dalla ng-click.

swipe (e drag)

Oltre al supporto unificato di clic e tap, ngTouch introduce le direttive ng-swipe-left e ng-swipe-right per l’intercettazione degli eventi di scorrimento (swiping) a destra ed a sinistra. Il seguente esempio mostra come gestire la navigazione in una galleria di immagini:

<div ng-swipe-left="showNextImage()" ng-swipe-right="showPreviousImage()"> 
  <img src="{{currentImage}}"/> 
</div>

Le direttive gestiscono in maniera trasparente sia lo swiping che il trascinamento con il mouse, unificando anche in questo caso l’approccio per il mondo desktop e mobile.

$swipe

Oltre a queste direttive, ngTouch mette a disposizione il servizio $swipe per la gestione personalizzata dello swiping.

Tramite il metodo bind() del servizio possiamo definire il comportamento per ciascuna fase della gesture, come schematizzato dal seguente codice:

$swipe.bind(element, {
	'start': function(coords) {
		startX = coords.x;
		pointX = coords.y;
	},
	'move': function(coords) {
		var delta = coords.x - pointX;
		// ...
	},
	'end': function(coords) { ...  },
	'cancel': function(coords) { ...  } 
});

Per ciascuno dei quattro eventi start, move, end e cancel possiamo definire il comportamento desiderato sfruttando le coordinate correnti passate come parametro.