Anw*_*wer 55 angularjs cordova angularjs-service
我正在使用Cordova和AngularJS开发移动应用程序.如何在Cordova设备准备好之前限制AngluarJS的引导.基本上我不希望在设备准备好之前使用任何AngularJS控制器.
The*_*ppo 85
手动引导您的Angular应用程序:
ng-app从HTML代码中删除您的属性,因此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文档.
Mic*_*ryl 68
我正在使用以下解决方案,它允许AngularJS在与Cordova一起运行时以及直接在浏览器中运行时进行引导,这是我开发的大部分内容.您必须从主index.html页面中删除ng-app指令,因为这是手动引导正在替换的内容.
更新: 我已经切换到以下方法,我认为更清洁.它适用于Ionic以及香草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']);
}
});
这是我使用的旧解决方案:
// 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检测方法的问题,可能是因为将Cordova应用程序从Web加载到手机中,您可以使用以下方法:
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文件.如果你的Angular应用程序试图立即加载/保存一些东西,NG-Persist对window.device.platform(来自设备插件)的检查将会失败,因为移动代码还没有完成启动,你什么也得不到但是一个白页而不是你漂亮的应用程序.
Wad*_*son 32
如果您使用的是Ionic,则此解决方案适用于浏览器和设备.感谢romgar这个线程.
window.ionic.Platform.ready(function() {
angular.bootstrap(document, ['<your_main_app']);
});
仍然需要从DOM元素中删除ng-app.
当我使用时,此解决方案变得更加强大:
angular.element(document).ready(function () {
var domElement = document.getElementById('appElement');
angular.bootstrap(domElement, ["angularAppName"]);
});
UPDATE
我的建议是将上面的内容放在适当的deviceready函数中,例如:
document.addEventListener("deviceready", function() {
angular.element(document).ready(function () {
var domElement = document.getElementById('appElement');
angular.bootstrap(domElement, ["angularAppName"]);
});
}, false);
| 归档时间： |
|
| 查看次数： |
46690 次 |
| 最近记录： |