Cordova + Angularjs +设备就绪
我正在开发一个使用Cordova和AngularJS的移动应用程序。 如何在Cordova设备准备好之前限制AngluarJS的引导。 基本上我不想在设备准备好之前使用任何AngularJS控制器。
手动引导你Angular app：
从你的HTML代码中删除你的ng-app属性，所以Angular不会自行启动。
给你添加这样的东西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);
引导应用程序的angular度文档。
我正在使用下面的解决scheme，它允许AngularJS在与Cordova一起运行时以及在直接在浏览器中运行的情况下进行引导，而这正是我的开发过程。 您必须从主index.html页面中删除ng-app指令，因为这是手动引导所取代的。
更新：我已经切换到下面的方法，我认为更清洁。 它适用于离子以及香草Cordova / PhoneGap。 它应该是运行JavaScript的最后一部分 – 也许在/ 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']); } });
以下是我使用的较旧的解决scheme：
// 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(); }
如果您遇到http / https检测方法的问题，可能是由于从Web上将Cordova应用程序加载到手机中，则可以使用以下方法：
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(); }
请注意，您仍需要第一个示例中的bootstrapAngular函数。
为什么用Cordova / PhoneGap / Ionic手动引导AngularJS？
有些人来到这里可能不知道你为什么想要这样做，摆在首位。 问题是你可能有依赖于Cordova / PhoneGap / Ionic插件的AngularJS代码，而且这些插件在AngularJS启动之后才会做好准备，因为Cordova需要更长的时间才能在设备上运行而不是普通的旧的Javascript代码对于AngularJS呢。
所以在这些情况下，我们必须等到Cordova / PhoneGap / Ionic准备就绪后才能启动（引导）AngularJS，这样Angular将拥有运行所需的所有东西。
例如，假设您正在使用NG-Persist Angular模块，该模块利用本地存储在浏览器上保存数据，在iOS上运行iOS Keychain插件 ，以及在Android上运行时使用cordova-plugin-file 。 如果您的Angular应用程序试图加载/保存一些东西，NG-Persist在window.device.platform（从设备插件 ）上的检查将失败，因为移动代码还没有完成启动，你什么也得不到但一个白色的页面，而不是你漂亮的应用程序
如果您使用的是Ionic ，则此解决scheme适用于浏览器和设备。 感谢这个线程上的romgar 。
window.ionic.Platform.ready(function() { angular.bootstrap(document, ['<your_main_app']); });
仍然需要从你的DOM元素中删除ng-app。
当我使用这个解决scheme变得更加强大：
angular.element(document).ready(function () { var domElement = document.getElementById('appElement'); angular.bootstrap(domElement, ["angularAppName"]); });
UPDATE
我的build议是将上述内容放在适当的设备准备function中，例如：
document.addEventListener("deviceready", function() { angular.element(document).ready(function () { var domElement = document.getElementById('appElement'); angular.bootstrap(domElement, ["angularAppName"]); }); }, false);
在使用TheHippo的解决scheme时：
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);
它在浏览器中不起作用，因为“Cordova.js”由Cordova或Phonegap构build过程解决，并且在本地主机或模拟testing环境中不可用。
因此“deviceready”事件永远不会被触发。 您可以简单地在浏览器控制台中手动启动它。
var customDeviceReadyEvent = new Event('deviceready'); document.dispatchEvent(customDeviceReadyEvent);
还要确保在设置所有的angular度模块/控制器/工厂/指令等之后，引导的angular度引导被触发。
在大多数情况下，你可能不需要阻止加载你的angular度的应用程序，直到deviceready（注意，如果你有很多插件可能需要几秒钟的时间发射deviceready）。
相反，你可以使用像这样的lib（ https://github.com/arnesson/angular-cordova ），通过自动caching调用来解决deviceready问题，然后在deviceready被触发后执行它们。
