Cordova + Angularjs + Device Ready run in the brower

時間 2019-11-12

標籤 cordova angularjs device ready run brower 欄目 Cordova 简体版

原文原文鏈接

---恢復內容開始---git

轉摘：http://stackoverflow.com/questions/21556090/cordova-angularjs-device-readyangularjs

Manually bootstrap you Angular app:github

Remove your ng-app attribute from your HTML code, so Angular doesn't start itself.web

Add something like this to you JavaScript code:bootstrap

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 documentation for bootstrapping apps.app

*****************************************************************************dom

I'm using the following solution, which allows AngularJS to be bootstrapped when running with Cordova as well as when running directly in a browser, which is where much of my development takes place.ide

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

// 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();
}
If you run into problems with the http/https detection method, due to, perhaps, loading a Cordova app into the phone from the web, you could use the following method instead:this

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

***********************************************************************************

https://gist.github.com/Heshyo/19cb259ed8ca033b3ca1

// Fakes the call of "deviceready". This can be useful for test purposes, but potentially also for the real website
// to avoid things like:
// if inside the app, call this method inside "deviceready"
// else call this method now.
(function () {
var oldAddEventListener = document.addEventListener;

document.addEventListener = function (eventName, callback) {
if (eventName === "deviceready") {
callback();
} else {
oldAddEventListener(eventName, callback);
}
};
})();

---恢復內容結束---

相關標籤/搜索

cordova+angularjs+ionic+vs2015

ionic+angularjs+cordova

cordova+ionic+angularjs

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。