L'utilizzo dei moduli ngTouch e angular-gestures è indicato sia per siti mobile che per applicazioni mobile ibride, come ad esempio quelle realizzate con
Apache Cordova e con Adobe PhoneGap. In quest'ultimo caso tuttavia occorre prestare attenzione ad un ulteriore aspetto quando decidiamo di usare AngularJS: la sincronizzazione della fase di bootstrap di Angular con il caricamento del framework mobile.
L'evento deviceready
Infatti, quando Cordova (o PhoneGap) è pronto per fornire i propri servizi di interfacciamento con le funzionalità del dispositivo, esso genera un evento intercettabile via JavaScript: l'evento deviceready. L'applicazione Angular, come sappiamo, ha un suo meccanismo di bootstrap automatico al caricamento della pagina HTML. È essenziale perché tutto funzioni correttamente che la fase di bootstrap di Angular avvenga solo dopo che Cordova ha caricato il suo framework, cioè solo dopo che si verifica l'evento deviceready.
Per assicurarci questa sincronizzazione abbiamo due possibili soluzioni.
Sincronizzazione senza ng-app
La prima soluzione consiste nel non utilizzare la direttiva ng-app all'interno del codice HTML della nostra pagina principale ed effettuare il bootstrap manuale, come mostrato dal seguente codice:
angular.module("myApp", []);
var onDeviceReady = function() {
angular.bootstrap( document, ["myApp"]);
};
document.addEventListener("deviceready", onDeviceReady);In pratica avviamo la nostra applicazione tramite il metodo bootstrap() in corrispondenza dell'evento deviceready di Cordova.
L'approccio appena mostrato funziona correttamente, ma può ritardare l'avvio dell'applicazione di alcuni secondi, soprattutto su dispositivi non recenti, dando l'impressione di scarsa responsività.
Sincronizzazione con cordovaReady
In realtà, sarebbe sufficiente assicurarsi che le funzionalità di Cordova siano state caricate prima di utilizzarle, lanciando quindi l'applicazione Angular prima possibile. In altre parole, se la mia app fa uso della fotocamera del dispositivo quando l'utente tocca un pulsante dell'interfaccia, è sufficiente assicurarsi che le funzionalità di Cordova per accedere alla fotocamera siano disponibili quando l'utente tocca quel pulsante, non prima.
Per applicare questa seconda soluzione possiamo far ricorso al modulo cordovaReady. Questo modulo mette a disposizione l'omonimo servizio cordovaReady che esegue la funzione passata come argomento solo quando essa è disponibile, cioè solo quando Cordova avrà segnalato la disponibilità dei propri servizi. In questo modo l'applicazione verrà eseguita prima possibile ed al limite si potrà avvertire un certo ritardo soltanto se e quando verranno invocate le API di Cordova.
Per fare un esempio, consideriamo il seguente codice:
angular.module("myApp"', ["cordovaReady"])
.controller("myController", function($scope, cordovaReady) {
cordovaReady(function() {
navigator.geolocation
.getCurrentPosition(
function () {...},
function () {...});
});
});Invece di utilizzare direttamente le API di geolocalizzazione di Cordova, le utilizziamo tramite il servizio cordovaReady.
Ionic framework
Una terza possibile soluzione per utilizzare al meglio AngularJS nello sviluppo di applicazioni mobile ibride consiste nell'uso di Ionic Framework. Si tratta di un framework basato su CSS e AngularJS per lo sviluppo di UI mobile. Oltre a mettere a disposizione direttive e servizi per creare interfacce utente, esso si occupa di tutte le problematiche relative all'interazione touch, al bootstrap ed applica i design pattern e le best practice raccomandati per il mondo mobile.
Link utili