I have been having various issues with the device ready event, from the deviceready has not fired after 5 seconds error to not having the plugins work.
From what I understand from my research, the following is required (please correct me if i'm wrong):
angular must be loaded before the deviceready event or it wont pick it up
cordova.js must be loaded in less than 5 seconds
So my question is - how do I get cordova.js loaded as quick as possible while making it wait for angular to be ready for the deviceready event?
I use manual bootstrapping to get it work (perfectly)
function bootstrapAngular() {
var domElement = document.querySelector('html');
angular.bootstrap(domElement, ['appName']);
}
if (document.URL.indexOf('http://') === -1 && document.URL.indexOf('https://') === -1) {
// URL: Running in Cordova/PhoneGap
document.addEventListener("deviceready", bootstrapAngular, false);
the if because my app is accessible form browser (either "http://" or "https://") and cordova("file://").
Load cordova.js after loading angular, and error 'deviceready not fired after 5 seconds' you will face only on desktop browser, instead when you will try on actual device or emulator, the event will fire.
You can use Corvoda Mocks to simulate the device's state on Chrome for testing your app.
You need to load AngularJs before Cordova.
If you want, here's a working seed:
https://github.com/marioaleogolsat/cordova-angular-angularMaterial-seed
Just remember that some plugins can't be used in a emulation, so use cordova run --device to make sure that anything is working properly.
Related
In a phonegap app, device is defined if running through PhoneGap Desktop. However, if it is built online through build.phonegap, then it is not defined.
In build.phonegap, under plugins, it shows that the core plugins defined in the config.xml file (e.g., ) are all there. But any line that tries to access device gets a "device is not defined" error, whereas this error doesn't happen when using PhoneGap Desktop.
For PhoneGap Desktop, I found that the secret is to add a script reference to cordova.js. But this doesn't work for build.phonegap, apparently. I tried also adding a similar reference to phonegap.js, but with no results.
PS: One other piece of information. To debug further, I tried wrapping the code using device in an "if" block checking if the device is ready. So, on PhoneGap Desktop, the deviceready event fired, but on build.phonegap, it's never ready.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
app.readyNow = true;
app.receivedEvent('deviceready');
},
...
if(app.readyNow) {
//Code to use device object. Fires with PhoneGap Desktop, not in PhoneGap Build
}
I figured out the answer by comparing a Hello World application auto-generated by PhoneGap Desktop and one that was just slightly different but had the problem. So the answer is to put the script reference to cordova.js in the body, underneath the HTML, rather than in the head, and make sure that there is no reference to phonegap.js. (If there is a phonegap.js, it will complain about NPObject, whereas if cordova.js is in the head section, the device will never be ready.) This solved my problem.
I used to add the https://github.com/katzer/cordova-plugin-local-notifications plugin in order to get local notification on my apps, but since the version 3.5.0 the plugin is not loaded anymore by cordova...
The plugin seems correctly added, since I can see it in the : cordova plugin list result
In the JS code I got
if(window.plugin && window.plugin.notification){
window.plugin.notification.local.add({ message: 'a msg' });
}
but window. plugin is undefined.
Am I missing something or something changed with the version 3.5.0?
The plugin will be available once the "Device is Ready". Listen the device ready event and then call you alert function.
https://github.com/jonbarlo/cordova-plugin-local-notifications#using-the-plugin
document.addEventListener('deviceready', function () {
// window.plugin.notification.local is now available
}, false);
There is a surprise here.
Whenever you enable a plugin, you have to download the debugger again, and install on the virtual machine / device for it to recognize the plugin.
The docs didn't say it. I've just discovered it today.
I need some help on understanding why does this happen?
It's very strange, but window.device is undefined inside onDeviceReady event handler BUT at the same time it is initialized and accessible, and returns correct data trough its properties due to Angular data binding.
I mean that window.device is undefined, but {{$window.device}} is an object a bit later.
Bootstrapping of an app starts exactly from onDeviceReady.
phonegap.js v3.1.0 is present in platforms/ios/www
a device plugin is available (working angular controller and view prove this)
Everything is ok in a browser or intel xdk emulator.
It works (or does not work) this way in iOS Simulator and on a real device with iOS7. It seems that there is a gap between firing onDeviceReady and window.device availability. It should not be there.
Try to set 1 second timeout after onDeviceReady fires
I've built a SPA using Durandal and it all works fine in a browser. What I'm trying to do now is wrap it up with Phonegap (ideally using Phonegap Build) and deploy it as an Android app.
The Durandal documentation on the subject (http://durandaljs.com/documentation/Native-Apps-With-PhoneGap-Cordova/) is pretty sparse. It's key points of optimizing the app to generate a main-built.js file were done as were gathering the js/css assets into one place.
However, it doesn't mention anything about Phonegap/Cordova having a device ready event rather than a document ready one. I've packaged the app according to instructions. It installs alright on my Android device but gets stuck on the splash screen. Other questions have asked about being stuck on the splash screen, but the solutions posted there don't help. I can't help but think something fundamental is missing here?!?
Do I need to have Phonegap specific code in index.html? In any javascript?
Note: I'm using Durandal 1.2 but the same questions apply for v2.0.
You can hook into the Phonegap device ready event in main.js, you can then be sure the device is ready before the shell or any view activate events are fired. This example checks the agent so it will still fire up in a browser. This is from my example Durandal 2 / Phonegap Build project.
https://github.com/BenSinnott/LandmarkTracker
define(['durandal/app', 'durandal/viewLocator', 'durandal/system'], boot);
function boot(app, viewLocator, system) {
var useragent = navigator.userAgent.toLowerCase();
if (useragent.match(/android/) || useragent.match(/iphone/) || useragent.match(/ipad/) || useragent.match('ios') || useragent.match('Windows Phone') || useragent.match('iemobile')) {
document.addEventListener('deviceready', onDeviceReady, false);
}
else {
onDeviceReady();
}
function onDeviceReady() {
app.title = 'Landmark Tracker';
app.configurePlugins({
router: true
});
app.start().then(function () {
viewLocator.useConvention();
app.setRoot('viewmodels/shell', 'entrance');
});
}
}
However, it doesn't mention anything about Phonegap/Cordova having a device ready event rather than a document ready one.
jQuery can listen for document ready via $(document).ready but HTML/javascript itself doesn't have a document ready event. The closest pure javascript equivalent is listening for the DOMContentLoaded event. Phonegap/Cordova offers the device ready event as documented here. Be sure to include <script type="text/javascript" charset="utf-8" src="cordova.js"></script> in your <head></head> tags.
It installs alright on my Android device but gets stuck on the splash screen.
Take a look at your config.xml. Do you have <preference name="splash-screen-duration" value="xxxx"/> where xxxx is set to some crazy high number?
You could always call navigator.splashscreen.hide() after device ready fires but you will need to build in the deviceready listiner. Easy to do using the documentation I provided above. If that doesnt fix it, then we will need to take a look at some of your code to dig into what is going on.
First of all try an unminified Version. Means copy all the folders into your assets folder. Then look at logcat. Most likely u had a js error. If that works try the minified version and check if that one throws errors via logcat
Edit: sry this applies of course only for manual build in android not for the online service. For IOS as far as i remember you get the errors thrown in the output window.
Windows Phone 7 or 8
PhoneGap 3
AngularJS 1.2
I have a PhoneGap app using AngularJS that works great on iOS and Android, but I'm having a problem getting it to work on Windows Phone 7 and 8.
The app starts fine and I see my index.html page (which in my case is just a loading screen). Source files are loaded and my pre-boot code is running fine.
Then it stops and nothing happens.
I've littered "console.log" messages throughout the code and I see it gets to the point of angular.bootstrap() and then dies. I'm not familiar enough with angular to know what to do next or how to debug this further to track down what the absolute problem code might be. Inside of bootstrap() begins the maze of DI calls so the code becomes much less linear.
I do see this error in the console but have no idea what it means or how to fix it:
An exception of type 'System.NotSupportedException' occurred in Microsoft.Phone.ni.dll and wasn't handled before a managed/native boundary
No other errors or any output is logged to the console. I tried delaying all of my bootstrap code by 10 seconds with a setTimeout and that error is always reported before angular.bootstrap() is called, so I don't know if it is even related.
Also worth noting that I've tried the app in IE on the desktop and it works fine there.
So my question is: How do I go about debugging this?
I am unsure of WP7/8 but if it follows Windows 8 pattern try adding JQuery 2.0 before angular.js
http://net.tutsplus.com/tutorials/javascript-ajax/building-windows-store-applications-with-jquery-2-0/
I agree with Jason, use Windows special/custom jQuery. And add unsafe=true
<script src="js/jquery-1.8.2-win8-1.0.min.js"></script>
<script type="text/javascript">
jQuery.isUnsafe = true;
</script>
The functionality of the Windows 8-patch had been included in jQuery 2.0. So can just use jQuery 2.0 in the same way, and it will work'.
So you can also use:
<script src="/lib/jquery-2.0.0.min.js"></script>
<script>
jQuery.isUnsafe = true;
</script>
I don't think this error is relevant because it is present even if you start Cordova/Phongap template app (I tried with Cordova 2.9.0). Visual Studio dosen't give any good explanation why app is not running, that's why I tried weinre and got the following massage on app reloade with angular-1.0.8
Error: Access is denied.
at hookedFunction (http://"my-weinre-ip":8080/target/target-script-min.js#ddtest:551:1)
at Anonymous function (x-wmapp0://www/components/angular/angular.js:9457:7)
at sendReq (x-wmapp0://www/components/angular/angular.js:9334:9)
at $http (x-wmapp0://www/components/angular/angular.js:9125:7)
at Anonymous function (x-wmapp0://www/components/angular/angular.js:9268:11)
at Anonymous function (x-wmapp0://www/components/angular/angular.js:7592:17)
at wrappedCallback (x-wmapp0://www/components/angular/angular.js:6996:15)
at wrappedCallback (x-wmapp0://www/components/angular/angular.js:6996:15)
at Anonymous function (x-wmapp0://www/components/angular/angular.js:7033:11)
at $eval (x-wmapp0://www/components/angular/angular.js:8219:9)
I reported it to angular here
EDIT
I managed to get a basic angular app running in phonegap WP7 (haven't tested it yet on WP8) by
applying fix from github ( I can't post second link not enough reputation)
#github/RobbinHabermehl/angular.js/commit/2645faad908529b5d33af960270755dd65a9aa78
including jquery (2.0.3) above angular.js
changing line of code in angular from
var xhr = new XHR();
to
var xhr = new XMLHttpRequest();
manually bootstrapping angular app after cordova deviceready event fired
I reported it in my original thread here