Cordova + Angularjs + Dispositivo listo

Estoy desarrollando una aplicación móvil usando Cordova y AngularJS. ¿Cómo restrinjo el bootstrapping de AngluarJS antes de que el dispositivo de Cordova esté listo? Básicamente, no quiero usar ninguno de los controladores AngularJS antes de que el dispositivo esté listo.

Arrastre manualmente la aplicación angular:

Elimine su atributo ng-app de su código HTML, por lo que Angular no se iniciará solo.

Agregue algo como esto a su código JavaScript:

 document.addEventListener("deviceready", function() { // retrieve the DOM element that had the ng-app attribute var domElement = document.getElementById(...) / document.querySelector(...); angular.bootstrap(domElement, ["angularAppName"]); }, false); 

Documentación angular para aplicaciones de arranque .

Estoy usando la siguiente solución, que permite que AngularJS se arranque cuando se ejecuta con Cordova y cuando se ejecuta directamente en un navegador , que es donde se desarrolla gran parte de mi desarrollo. Debe eliminar la directiva ng-app de su página index.html principal, ya que eso es lo que está reemplazando el bootstrapping manual.

ACTUALIZACIÓN: Desde entonces he cambiado al siguiente método, que creo que es más limpio. Funciona tanto para Ionic como para vanilla Cordova / PhoneGap. Debería ser el último bit de JavaScript que se ejecute, tal vez dentro de una etiqueta de script antes de / body tag.

  angular.element(document).ready(function () { if (window.cordova) { console.log("Running in Cordova, will bootstrap AngularJS once 'deviceready' event fires."); document.addEventListener('deviceready', function () { console.log("Deviceready event has fired, bootstrapping AngularJS."); angular.bootstrap(document.body, ['app']); }, false); } else { console.log("Running in browser, bootstrapping AngularJS now."); angular.bootstrap(document.body, ['app']); } }); 

Esta es la solución anterior que utilicé:

 // This is a function that bootstraps AngularJS, which is called from later code function bootstrapAngular() { console.log("Bootstrapping AngularJS"); // This assumes your app is named "app" and is on the body tag:  // Change the selector from "body" to whatever you need var domElement = document.querySelector('body'); // Change the application name from "app" if needed angular.bootstrap(domElement, ['app']); } // This is my preferred Cordova detection method, as it doesn't require updating. if (document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1) { console.log("URL: Running in Cordova/PhoneGap"); document.addEventListener("deviceready", bootstrapAngular, false); } else { console.log("URL: Running in browser"); bootstrapAngular(); } 

Si tiene problemas con el método de detección http / https, debido quizás a cargar una aplicación Cordova en el teléfono desde la web, puede usar el siguiente método:

 function bootstrapAngular() { console.log("Bootstrapping AngularJS"); // This assumes your app is named "app" and is on the body tag:  // Change the selector from "body" to whatever you need var domElement = document.querySelector('body'); // Change the application name from "app" if needed angular.bootstrap(domElement, ['app']); } // This method of user agent detection also works, though it means you might have to maintain this UA list if (navigator.userAgent.match(/(iOS|iPhone|iPod|iPad|Android|BlackBerry)/)) { console.log("UA: Running in Cordova/PhoneGap"); document.addEventListener("deviceready", bootstrapAngular, false); } else { console.log("UA: Running in browser"); bootstrapAngular(); } 

Tenga en cuenta que todavía necesita la misma función BootstrapAngular del primer ejemplo.

¿Por qué arrancar manualmente AngularJS con Cordova / PhoneGap / Ionic?

Algunas personas que llegan aquí podrían no saber por qué querrían hacer esto en primer lugar. El problema es que podrías tener el código AngularJS que se basa en los complementos Cordova / PhoneGap / Ionic, y esos complementos no estarán listos hasta después de que AngularJS haya comenzado porque Cordova tarda más tiempo en iniciarse y ejecutarse en un dispositivo que el antiguo código JavaScript para AngularJS lo hace.

Entonces, en esos casos, tenemos que esperar hasta que Cordova / PhoneGap / Ionic esté listo antes de iniciar (cargar) AngularJS para que Angular tenga todo lo que necesita para funcionar.

Por ejemplo, supongamos que está utilizando el módulo NG-Persist Angular, que utiliza el almacenamiento local para guardar datos en un navegador, el complemento iOS Keychain cuando se ejecuta en iOS y el archivo cordova-plugin cuando se ejecuta en Android. Si su aplicación Angular intenta cargar / guardar algo desde el principio, la comprobación de NG-Persist en window.device.platform (desde el complemento del dispositivo ) fallará porque el código del móvil todavía no se ha completado y no obtendrá nada. pero una página blanca en lugar de tu bonita aplicación.

Si está utilizando Ionic , esta solución funciona para navegadores y dispositivos. Crédito a Romgar en este hilo .

 window.ionic.Platform.ready(function() { angular.bootstrap(document, [' 

Aún necesita eliminar ng-app de su elemento DOM.

Esta solución se hizo más robusta cuando utilicé:

 angular.element(document).ready(function () { var domElement = document.getElementById('appElement'); angular.bootstrap(domElement, ["angularAppName"]); }); 

ACTUALIZAR

Mi sugerencia fue poner lo anterior dentro de la función apropiada de dispositivo listo, por ejemplo:

 document.addEventListener("deviceready", function() { angular.element(document).ready(function () { var domElement = document.getElementById('appElement'); angular.bootstrap(domElement, ["angularAppName"]); }); }, false); 

Sobre usar la solución de TheHippo:

 document.addEventListener("deviceready", function() { // retrieve the DOM element that had the ng-app attribute var domElement = document.getElementById(...) / document.querySelector(...); angular.bootstrap(domElement, ["angularAppName"]); }, false); 

No funciona en el navegador porque “cordova.js” se resuelve mediante el proceso de creación de Cordova o Phonegap y no está disponible en su servidor local o entorno de prueba emulado.

Por lo tanto, el evento “dispositivo listo” nunca se dispara. Simplemente puede dispararlo manualmente en la consola de su navegador.

 var customDeviceReadyEvent = new Event('deviceready'); document.dispatchEvent(customDeviceReadyEvent); 

También asegúrese de que el arranque de angular se active después de configurar todos los módulos angulares / controladores / fábricas / directivas, etc.

En la mayoría de los casos, probablemente no necesite bloquear la carga de su aplicación angular hasta después de que el dispositivo esté listo (tenga en cuenta que puede tardar varios segundos para que el dispositivo se dispare si tiene muchos complementos).

En su lugar, puede usar algo como esta lib ( https://github.com/arnesson/angular-cordova ) que resuelve los problemas de la impresora automáticamente almacenando automáticamente las llamadas y luego las ejecuta después de que se haya disparado el dispositivo.