HTML.it logo
Learn
  • Design
    • Grafica
    • User Interface Design
    • Adobe Creative Suite
    Guide
    Approfondimenti
    Faq
    Notizie
    Tutto in Design >
  • Development
    • .NET
    • ASP
    • CMS
    • Flash
    • Java
    • JavaScript
    • PHP
    • Essentials
    • Ruby
    • XML
    • Editor
    • CSS
    • HTML
    Guide
    Approfondimenti
    Script
    Faq
    Notizie
    Tutto in Development >
  • Mobile
    • Android Studio
    • Cordova
    • Eclipse
    • Objective C
    • Swift
    Guide
    Approfondimenti
    Script
    Faq
    Notizie
    Tutto in Mobile >
  • Server
    • Cloud
    • Database
    • OS
    • Sicurezza
    • Network
    Tutto in Server >
  • Digital Marketing
    • SEO
    • Affiliate Marketing
    • Social Media Marketing
    Tutto in Digital Marketing >
  • Makers
    • Arduino
    • RaspberryPi
    • Stampa 3D
    Guide
    Approfondimenti
    Notizie
    Tutto in Makers >
  • Game Design
    • Unity
    Guide
    Approfondimenti
    Notizie
    Tutto in Game Design >
Download
  • Audio e Video
    • Player Audio Video
    • Codec audio
    • Montaggio
    • Masterizzazione
    • Ripper e Convertitori
    • Speech
    • Creatività
    • Ripresa
    • Riproduzione
    Tutto in Audio e Video >
  • Educazione
    • Bambini
    • Cartoni in Streaming
    • Cucina
    • Salute e Benessere
    • Didattica
    • Istruzione
    • Giochi Didattici
    Tutto in Educazione >
  • Videogame
    • Arcade
    • Avventura
    • Azione
    • Board
    • Carte
    • Giochi di ruolo
    • Giochi Online
    • Puzzle e Enigmistica
    • Simulazione
    • Sparatutto
    • Sport
    • Strategia e Giochi di Guerra
    • Tempo Libero
    Tutto in Videogame >
  • Grafica
    • Accessori & Mappe
    • Animazione
    • CAD – 3D
    • Cattura schermo
    • Convertitori e ridimensionatori
    • Editor
    • Flash
    • Font
    • Ritocco
    • Gallerie e album
    • Icone e loghi
    • Visualizzatori
    Tutto in Grafica >
  • Internet
    • Browser
    • Chat e IM
    • eMail
    • Estensioni & Temi
    • FTP
    • Network
    • News e RSS
    • Peer to Peer
    • Webcam
    Tutto in Internet >
  • Programmazione
    • Accessori
    • CMS e E-Commerce
    • Editor e Compilatori
    • Editor e strumenti Web
    • Linguaggi
    Tutto in Programmazione >
  • Sicurezza
    • Antispam
    • Antispyware
    • Antivirus
    • Server
    Tutto in Sicurezza >
  • Produttività
    • Backup
    • Compressione
    • Connettività
    • Database
    • Fax e Telefonia
    • Gestione disco
    • Ottimizzazione
    • Ufficio
    • Utilità di Sistema
    Tutto in Produttività >
  • Auto
    • Accessori Auto
    • Gare
    • Utility
    Tutto in Produttività >
  • Casa
    • Home Design
    • Home Security
    • IoT
    • Progettazione
    • Smart Home
    Tutto in Produttività >
Notizie
Video
Forum
in  
Trend
GuideHTMLJavaLinguaggio CPythonJavaScriptPHPC++CSSAndroidApprofondimenti
INDICE DELLA GUIDA
  1. 1 AngularJS è un framework, non una libreria!

  2. 2 Hello Angular!

  3. 3 MV* in AngularJS

  4. 4 Scope e two-way data binding

  5. 5 Gerarchia di scope

Direttive predefinite
  1. 6 Direttive predefinite, bind, hide e show

  2. 7 ng-if e ng-switch, markup ...condizionale

  3. 8 ng-include

  4. 9 ng-class

  5. 10 ng-repeat

  6. 11 ng-options

  7. 12 Direttive di evento

Filtri
  1. 13 I filtri

  2. 14 Filtri nel controller

Servizi
  1. 15 Servizi

  2. 16 Servizi per condividere dati e funzionalità

  3. 17 Il servizio $http

Form
  1. 18 Form, il binding dei controlli

  2. 19 Validare i dati con AngularJS

  3. 20 Invio dei dati

Moduli e Applicazioni Angular JS
  1. 21 I moduli AngularJS

  2. 22 Applicazioni Angular JS, definizione e controllo

  3. 23 Moduli e file

  4. 24 Dependency injection in Angular

Single Page Application e routing
  1. 25 Single Page Application e routing in AngularJS

  2. 26 Configurazione del routing

Angular Internals
  1. 27 Watch e digest loop

  2. 28 $apply e il contesto Angular

  3. 29 Creare un watch in AngularJS

Direttive Custom
  1. 30 Direttive personalizzate

  2. 31 Template, scope e composizione di direttive

  3. 32 Scope isolato

  4. 33 Scope isolato e modalità di mappatura

  5. 34 Linking nelle direttive Angular

AngularJS e il mondo mobile
  1. lezione
    35 di 38

    AngularJS mobile, ngTouch, tap e $swipe

  2. 36 Angular- gestures

  3. 37 Angular e PhoneGap/Cordova

  4. 38 Tips and tricks per il mobile con AngularJS

  • Learn
  • Guida AngularJS
  • AngularJS mobile, ngTouch, tap e $swipe
lezione
35 di 38

AngularJS mobile, ngTouch, tap e $swipe

  • di Andrea Chiarelli
  • 3 Novembre 2015

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.

Se vuoi aggiornamenti su JavaScript inserisci la tua e-mail nel box qui sotto:

Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi:

36 / 38

Angular- gestures

Ultime notizie

Google Cloud Services Platform in beta

Cybersecurity: nelle aziende manca una cultura della sicurezza

Marzipan: App universali per iOS e MacOS?

Pagina 404: l’importanza del design

(In)sicurezza dei Password manager

I Video di HTML.it

I nostri video su tablet e smartphone grazie a Any Video Converter

Percorsi formativi correlati
Android Mobile Developer

Android Mobile Developer

5
guide
250 ore

Tutti i linguaggi per diventare uno sviluppatore di app per Android.

DB Administrator

DB Administrator

4
guide
80 ore

Come creare applicazioni per il Web con PHP e MySQL per il DBMS.

iOS Mobile Developer

iOS Mobile Developer

4
guide
180 ore

Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.

Java Developer

Java Developer

7
guide
300 ore

I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.

Java Security Expert

Java Security Expert

5
guide
120 ore

Diventare degli esperti in tema di sicurezza delle applicazioni Java.

Maker

Maker

2
guide
50 ore

Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.

NoSQL DB Expert

NoSQL DB Expert

5
guide
200 ore

Le principali guide di HTML.it per diventare un esperto dei database NoSQL.

PHP Cloud Developer

PHP Cloud Developer

7
guide
80 ore

Ecco come i professionisti creano applicazioni per il Cloud con PHP.

PHP Developer

PHP Developer

5
guide
100 ore

Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.

PHP e JavaScript Developer

PHP e JavaScript Developer

6
guide
100 ore

Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.

PHP Framework Expert

PHP Framework Expert

6
guide
120 ore

Realizzare applicazioni per il Web utilizzando i framework PHP.

PHP SysAdmin

PHP SysAdmin

6
guide
80 ore

Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.

Sviluppare un eCommerce con PHP

Sviluppare un eCommerce con PHP

5
guide
120 ore

Fare gli eCommerce developer con Magento, Prestashop e WooCommerce.

Web &amp; Mobile Designer

Web & Mobile Designer

5
guide
300 ore

Percorso base per avvicinarsi al web design con un occhio al mobile.

WordPress Developer

WordPress Developer

5
guide
150 ore

Realizzare siti Web e Web application con WordPress a livello professionale.

Ti consigliamo anche

Guida Angular 2

  • 25 Lezioni
  • Facile

Angular 2. Grazie a questa guida completa scopriamo tutte le principali caratteristiche di uno dei framework JavaScript Open Source più utilizzati da sviluppatori Web e mobile ormai alla sua seconda edizione! I punti di forza, le differenze con la 1.x e le semplificazioni introdotte per essere sempre più compliant con EcmaScript 2015.

  • Ionic 2, la guida
  • AngularJS: prestazioni più elevate disabilitando il debug

Angular, React, Vue: framework Javascript a confronto

Una panoramica completa dei tre principali framework Javascript, che utilizza diverse metriche per confrontare tutti i pro e contro di ognuno di essi.

  • Onsen UI: un modo semplice per sviluppare web app ibride
  • JavaScript: Angular è il framework più popolare tra gli sviluppatori

Cyclotron: creare dashboard con NodeJS e AngularJS

AngularConf 2016. Codice sconto per i lettori di Html.it

Vanilla Web development o framework?

  • Guide
  • Approfondimenti
  • Script
  • Q&A
  • Software
  • Tutorial
  • Videogiochi
  • Tag Software
  • News
  • Video
  • Forum
  • Chi siamo
  • Pubblicità
  • Contatti
  • Cookie policy
  • Privacy policy
  • Privacy Policy Newsletter
© HTML.it 1997-2019 | Triboo Media – P. IVA 06933670967 | HTML.it è un periodico telematico reg. Trib. Roma n. 309/2008 | 2.10.3