I have Cordova and Ionic based mobile application. On the default page which is loaded after the start of the application is need to work with SQLLite plugin.
https://github.com/brodysoft/Cordova-SQLitePlugin
Problem is that view contains
ng-init="setData()"
Which is calling the controller method where is worked with SQL Lite plugin. And because of the the method is called before the deviceready event is not initialized (plugin can be initialized only after deviceready event).
So I tried this workaround:
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
db = window.sqlitePlugin.openDatabase({name:"callplanner"});
}
But this not working for me.
So i tried second solution:
.factory('cordova', function () {
return {
test: function(){
document.addEventListener("deviceready", this.ready, false);
},
ready: function(){
alert("Ready");
db = window.sqlitePlugin.openDatabase({name:"callplanner"});
}
}
})
and in controller init i tried:
cordova.test();
But this is not working to (devicereadfy is fired after ng-init).
After that i found this article:
http://java.dzone.com/articles/ionic-and-cordovas-deviceready
But i did not understand how to put "splash screen" before app is ready and how to set timeout.
Have somebody idea how can I solve this problem?
Many Thanks for any advice or help.
You need to invert this, first you handle the cordova "deviceready" event and then you start the angularjs app. Like this:
First remove the the ng-app attribute from the html/body tag
Start the angular app after the devireready:
<script>
document.addEventListener('deviceready', function() {
angular.bootstrap(document, ['YourAppName']);
}, false);
var YourAppName = angular.module('YourAppName', []);
</script>
Similar questions:
Cordova + Angularjs + Device Ready
Initialize my angularJs App after Phonegap deviceready
I couldn't make it work with the #t4deu solution, because my ng-app tag was in the body, so I leave a little change in case that it helps to someone.
<script>
document.addEventListener('deviceready', function() {
angular.bootstrap(document.querySelector('body'), ['starter']);
}, false);
</script>
Related
I have javascript file that has onscroll event handler. When a webpage includes this javascript file, and when the page gets scrolled event handler gets called and it does the required work on scroll.
It is working fine and many web pages work successfully. But, today one webpage that uses AngularJS framework included my javascript file, window.onscroll handler is not getting called.
Could anyone suggest how to handle Angular pages without breaking existing ones? Thank you so much.
Javascript file structure is like this
(function() {
window.onscroll = function() {
/* on scroll work logic */
}
})(this);
What change can I suggest to page owner so that their angular app can somehow let window.onscroll method in my javascript file to execute during page scroll?
please note that I don't own angular app. I own simple javascript file with window.onscroll handler.
You can use $window replica of window object
app = angular.module('exampleApp', []);
app.directive("scroll", function ($window) {
return function(scope, element, attrs) {
angular.element($window).bind("scroll", function() {
//code
});
};
});
I added shake gesture plugin for my project.
This is my code:
<button onclick="myFunc()" id="round">Gesture Call</buttom>
<script>
function myFunction()
{
window.open("emcall.html");
navigator.vibrate([2000,2000,2000,2000,2000,2000,2000,2000,2000,2000,2000,2000,2000]);
navigator.notification.beep(10);
}
function myFunc()
{
alert('shake working');
function onShake()
{
alert("shake success");
window.open("emcall.html");
}
function onError()
{
alert("errorq");
}
shake.startWatch(onShake,30,onError);
}
</script>
Some thing wrong in mycode help me to over come this.
Include cordova.js file in your HTML file and register deviceready event in your script. Then, invoke shake plugin related code inside deviceready event listener function. It should work.
Also ensure to test it on device after adding and building platform as i dont see this shake plugin supported in browser.
->Plugin not supporting in phonegap.app,who are all testing the app using you ip address on phonegap app.
->just add platform through cli.
->And build or run it and test .
I'm trying to load Admob interstitials programmatically in a Phonegap app.
I'm using a plugin that I found on Github:
https://github.com/admob-google/admob-phonegap
I built a test app with the example html provided in the repo. The only problem is that I want to be able to cache the interstitial and load it programmatically. The example uses buttons to trigger the Javascript.
I did get the ads to work in the app, but only by pressing the buttons. I would like to trigger the interstitial on Game Over in a HTML 5 game. No user interaction required.
This is what I've tried:
function onLoad(){
admob.cacheInterstitial();
document.addEventListener('deviceready',onDeviceReady, false);
}
function onDeviceReady() {
showInterstitial();
}
<body onload="onLoad();">
However, it doesn't work. I admit Javascript isn't my strong point and have a much easier time with Objective-C and Swift.
Maybe someone better at Javascript than me can point me in the right direction on how to trigger these functions admob.cacheInterstitial(); and showInterstitial(); programmatically.
Here is the full example HTML I am using:
https://github.com/admob-google/admob-phonegap/blob/master/Example/index.html
Consider use this plugin: https://github.com/appfeel/admob-google-cordova
The use is very simple! I actually use in my game and it works perfectly!
You just need to include the follow code:
function onDeviceReady() {
document.removeEventListener('deviceready', onDeviceReady, false);
// Set AdMobAds options:
admob.setOptions({
publisherId: "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB", // Required
interstitialAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII", // Optional
tappxShare: 0.5, // Optional
autoShowInterstitial: false
});
// Request interstitial (will present automatically when autoShowInterstitial is set to true, that's why we set to false! so we can call when we want!)
admob.requestInterstitialAd();
}
document.addEventListener("deviceready", onDeviceReady, false);
And inside your gameOver function, you just use the follow code to call the interstitial ad
admob.showInterstitialAd();
*UPD: Using your plugin, try to use a bool and show this function, maybe like this:
function onDeviceReady() {
if(boolGameOver){
showInterstitial();
boolGameOver = false;
}
}
And in your gameOverFunction, call onDeviceReady function, after you set boolGameOver to true!
I'm writing an AngularJS application, but I'm quite new to it, so in the code below, please point out any issues that you have.
I do have my AngularJS application defines like that:
var OfficeUIModule = angular.module('OfficeUI', ['ngSanitize']);
Then, I do have a couple of services that loads data from various JSon files.
But i won't post the code here, because I do believe that irrelevant.
Then I do have my controller which basically looks like this:
OfficeUIModule.controller('OfficeUIController', function($scope) { });
Now, I want the controller to execute some logic on startup and show a DIV element on it.
Here's the case what I want to do:
Show a Loading DIV element during initial setup.
Show a Displaying DIV element when the initialization has been done.
Let's say that in my controller I do have method to initialize the application:
OfficeUIModule.controller('OfficeUIController', function($scope) {
function Init() {
// I'll load all the data from the services here.
}
});
In order to call this method on startup, I just define it in my controller like so:
OfficeUIModule.controller('OfficeUIController', function($scope) {
Init();
function Init() {
// I'll load all the data from the services here.
}
});
And the HTML which I would like to use is the following:
<body>
<div id="loading">LOADING</div>
<div id="displaying">DISPLAYING</div>
</body>
When the page is initially loaded, I would like to show the element 'Loading'.
When the page has been loaded, I would like to show the element 'Displaying'.
In order to make this testable, I've changed my controller method Init to include a timeout of 5 seconds, just like below:
OfficeUIModule.controller('OfficeUIController', function($scope) {
Init();
function Init() {
setTimeout(function() {
alert('Page has been loaded. When you click OK the displaying DIV should be showed.');
}, 5000);
}
});
So, in this particular case, I would like to make sure that the page is being loaded, displaying the LOADING div and after 5 seconds, display the DISPLAYING div.
I would also like not to see any flickering, and therefore ng-cloak can be used I've read, but I can't manage to configure it correctly.
Here's what I've tried already:
LOADING
DISPLAYING
However, that setup doesn't work quite well.
I've included a Plunker so that you can test the solution you provide.
It happens because you are using setTimeout with anonymous function and angularjs isn't aware of model change
http://plnkr.co/edit/FJ2lnrmtG7P3HXZuxRkH?p=preview
if you use angularjs $timeout it works
$timeout(function() {
$scope.initialized = true;
}, 5000);
you could also use $scope.$digest() or $scope.$apply to make it work
You can use the angular version of window load event.
angular.element($window).bind('load', function(e) {
// code to execute
});
I am trying to make a battery app that animates the battery level from 0% to the current level as an animation with Jquery.
It is working, BUT.. when my app is loaded, after the splash screen is done, and cordova has loaded aswell, the animation is almost finished. The only reason that i know this is because i set the animation to 5 seconds.
I want to make it so that, the animtion starts when the app is loaded.
I am not sure if this "state" im refering to has a direct event name or so. So i am sorry if i am unable to describe it with the real words. :-)
Consider the following piece of code:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.addEventListener("batterystatus", onBatteryStatus, false);
}
function onBatteryStatus(info) {
$("div#status").animate({ width: bat + "%" }, 5000);
}
You might want to consider using the PhoneGap Splashscreen functionality :
PhoneGap Splash Screen API Doc
You should call your splash screen on the Java side of things (DroidGap) and let PhoneGap do it's own job in the background while the Splash screen is being displayed. This blogpost which includes relevant code should help you with your problem :
Splash Screens in PhoneGap
What should now happen is PhoneGap will load and then your splash screen will be displayed in full. Hope this fixes your problem!!
It looks like you are going in the right directions from what i can see. Here's how my base Cordova project is uaully setup.
Javascript
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// `load`, `deviceready`, `offline`, and `online`.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of `this` is the event. In order to call the `receivedEvent`
// function, we must explicity call `app.receivedEvent(...);`
onDeviceReady: function() {
// Get battery status HERE
}
};
And then in my "index.html" i initialize my app class like so:
<script type="text/javascript">
app.initialize();
</script>
You could try cordova-jquerymobile-boilerplate. You should start your work with a boilerplate, it will make you go fast and safe.