How to Deviceready in right way in Ionic application?

Question

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.

Solution 1

You need to invert this, first you handle the cordova "deviceready" event and then you start the angularjs app. Like this:

1. First remove the the ng-app attribute from the html/body tag

2. 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

Solution 2

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>