angularjs - app - convert angular to cordova
Cordova+Angularjs+Dispositivo listo (6)
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 bootstrapping .
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.
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.
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);
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: <body ng-app="app">
// 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: <body ng-app="app">
// 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 cordova-plugin-file 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.
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.