Cordova + Angularjs + dispositivo pronto

Estou desenvolvendo um aplicativo móvel usando Cordova e AngularJS. Como faço para restringir o bootstrap do AngluarJS antes do dispositivo Cordova estar pronto? Basicamente eu não quero usar nenhum dos controladores AngularJS antes do dispositivo estar pronto.

Faça o bootstrap manualmente do aplicativo Angular:

Remova o atributo ng-app do seu código HTML, então o Angular não inicia a si mesmo.

Adicione algo assim ao seu 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); 

Documentação angular para bootstrapping apps.

Estou usando a solução a seguir, que permite que o AngularJS seja inicializado ao executar com o Cordova, bem como ao executar diretamente em um navegador , que é onde muito do meu desenvolvimento ocorre. Você tem que remover a diretiva ng-app da sua página index.html principal, já que é isso que o bootstrapping manual está substituindo.

ATUALIZAÇÃO: Desde então, mudei para o método a seguir, que acho mais limpo. Ele funciona tanto para o iônico quanto para a baunilha Cordova / PhoneGap. Deve ser o último bit de JavaScript a ser executado – talvez dentro de uma tag de script antes da tag / body .

  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']); } }); 

Aqui está a solução mais antiga que usei:

 // 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(); } 

Se você tiver problemas com o método de detecção http / https, devido a, talvez, carregar um aplicativo Cordova no telefone a partir da Web, use o seguinte 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(); } 

Note que você ainda precisa da mesma function bootstrapAngular do primeiro exemplo.

Por que inicializar manualmente o AngularJS com o Cordova / PhoneGap / Ionic?

Algumas pessoas que chegam aqui podem não saber por que você gostaria de fazer isso em primeiro lugar. O problema é que você pode ter o código AngularJS que depende dos plugins Cordova / PhoneGap / Ionic, e esses plugins não estarão prontos até que o AngularJS tenha iniciado porque o Cordova demora mais para ser instalado e executado em um dispositivo do que o antigo código Javascript para o AngularJS.

Então, nesses casos, temos que esperar até que o Cordova / PhoneGap / Ionic esteja pronto antes de iniciar (bootstrapping) o AngularJS para que o Angular tenha tudo que precisa para rodar.

Por exemplo, digamos que você esteja usando o módulo NG-Persist Angular, que usa armazenamento local para salvar dados em um navegador, o plug-in do iOS Keychain quando executado no iOS e o arquivo cordova-plugin quando executado no Android. Se o seu aplicativo Angular tentar carregar / salvar algo logo de cara, a verificação do NG-Persist no window.device.platform (do plug-in do dispositivo ) falhará porque o código do celular ainda não foi concluído e você não obterá nada mas uma página em branco em vez de seu aplicativo bonito.

Se você estiver usando o Ionic , esta solução funciona para navegadores e dispositivos. Crédito para romgar neste segmento .

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

Ainda precisa remover o ng-app do seu elemento DOM.

Essa solução ficou mais robusta quando usei:

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

ATUALIZAR

Minha sugestão foi colocar o acima dentro da deviceready function apropriada, por exemplo:

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

Ao usar a solução do 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); 

Ele não funciona no navegador porque o “cordova.js” é resolvido pelo processo de construção Cordova ou Phonegap e não está disponível em seu ambiente de teste local ou emulado.

Assim, o evento “deviceready” nunca é triggersdo. Você pode simplesmente triggersr manualmente no console do seu navegador.

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

Certifique-se também de que o bootstrap do angular seja acionado após a configuração de todos os módulos / controladores / fábricas / diretivas angulares, etc.

Na maioria dos casos, você provavelmente não precisa bloquear o carregamento de seu aplicativo angular até depois do deviceready (lembre-se de que pode levar alguns segundos para o deviceready ser acionado se você tiver muitos plugins).

Em vez disso, você pode usar algo como este lib ( https://github.com/arnesson/angular-cordova ), que resolve os problemas deviceready para você, buffering chamadas automaticamente e, em seguida, executá-los depois deviceready foi acionado.