I’m writing this article in a hope I can better clarify this topic, especially because some people still don’t understand the difference. I will also show you how to delay AngularJS/Ionic bootstrapping before Cordova device ready can trigger.
Table of Contents
[spoiler title=” Click here if you want to see other tutorials, or articles about the Ionic framework (themes, templates, plugins, tutorials)”]
Tutorials
- Series 1 | Installation
- Series 2 | Anathomy of a Page
- Series 3 | UI Patterns
- Series 4 | Mixing UI Patterns
- Series 5 | Master Detail Pattern
- Series 6 | Side Menu Pattern
- Series 7 | Tab Pattern
- Series 8 | Page Navigation
- Series 9 | Passing Data Between Pages
- Series 10 | Form Handling And Validation
- Series 11 | Infinite Scroll
- Series 12 | Pull To Refresh
- Series 13 | Touch Gestures
- Series 14 | Grid System
- Series 15 | Storing data in Ionic Framework
- Series 16 | Using Google Maps With Ionic Framework
- Series 17 | Ionic Framework | Get Page Height & Width
- Series 18 | Understanding Ionic View LifeCycle
- Series 19 | Using Views Events To Create JavaScript Pure Ionic Splash Screen
- Series 20 | Handling Android Back Button Like a Pro
- Series 21 | How to Properly Debug Your Ionic Application
- Series 22 | Creating a Transparent NavBar In Ionic Framework
- Series 23 | What’s the difference between Cordova and Ionic ready state
- Series 24 | Why is The .dot Notation Important in Ionic Framework?
- Series 25 | Programmatically Show Ion List Options Buttons in Ionic Framework
- Series 26 | How to Create Elegant Slider Carousel in Ionic Framework
- Series 27 | Speed Up Your Ionic Application Using These Techniques
Other Resources (themes, templates, plugins, Cordova plugins, starter apps)
- Best Looking Ionic Framework Themes
- Must-have plugins for Ionic Framework
- A Comprehensive List Of Ionic Starter Apps
- Useful Cordova Plugins For Your Ionic Application & Examples
- 15 Great Inspirational UI Theme Designs For Ionic Framework
Cordova Plugin Tutorials
- Changing & Locking Screen Orientation In Ionic Application
- Using Smartphone Camera With Ionic Framework
- Whitelist External Resources and API Calls | Ionic Framework
- Using Cordova Geoloacation API with Google Maps in Ionic Framework
- How to Launch External Application With Ionic Framework
- Using Cordova File Transfer Plugin With Ionic Framework
- How to send an SMS with Ionic Framework and ngCorodva
- How to use Local Notifications with Ionic Framework
- How to Search, Create, and Delete Contacts Using Ionic Framework
- How to Open a File using its default application in Ionic Framework
- How to Show Different Native Modal Windows In Ionic Framework
- Accessing Image Galery using Ionic and ngCordova
- Detecting Device Motion With Ionic Framework and ngCordova
- Handling Native View Animations With Ionic Framework
- Retrieving IP Adress Using Cordova Without External Services
- Using Google AdMob in Your Android Ionic Application
[/spoiler]
Introduction
Before we proceed any further let us discuss the nature of Cordova and Ionic ready event.
Cordova deviceready is an event that fires when Cordova is fully loaded. This is also the most important event for any Cordova based application. At this point, because everything is fully loaded, we can trigger various API related plugins, like a camera or GPS access.
Without it, our application may potentially call a Cordova function before the corresponding native code is available.
document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { // It's safe to execute device APIs }
On the other hand, Ionic ready state serves the same purpose but in a much broader way.
Many of us, including me, are accustomed to development on our desktop machines. I will always start developing my application inside a classic desktop web browser. No point in using emulators when I can test my initial page design inside a much faster desktop environment.
Unfortunately, if not properly handled, I will not be able to use Cordova onDeviceReady event in this case. Remember we’re working with a desktop browser. This is one of the reasons why the Ionic framework uses a little bit different Ionic ready state event.
When executed on a touch-based device, Ionic ready state will trigger once Cordova is ready. Primarily, it will trigger a moment after Cordova deviceready event. On the other hand, if we execute Ionic ready state inside a desktop environment it will execute after window.onload event. This way we can easily shift between different development environments/stages without needing to change our underlying code.
Additionally, if Cordova onDeviceReady status is already set, then the Ionic ready state callback will immediately fire off.
angular.module('myModule', ['ionic']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { // It's safe to execute device APIs }); });
The problem
Now comes the funny part. What if we need to access Cordova plugin features during the initialization of our first view, how can we handle that easily?
In some way, we’re racing against the time, no matter what, Angular is going to display your initial view, with or without ionicPlatform ready state.
Solution 1
The first solution is an old jQuery Mobile trick. We can initialize a dummy view before we load the right one. This way we can be sure Ionic ready state is active before we initialize any Cordova API.
This could be our dummy view:
.state('home', { url:"/dummy", templateUrl:'dummy.html', controller:'DummyCtrl' })
On the Ionic ready state, we change the page to our real primary view:
app.run(function($ionicPlatform,$location,$rootScope) { $ionicPlatform.ready(function() { $location.path('/tab/about'); $rootScope.$apply(); }); });
Working example:
Solution 2
I prefer this solution because it’s less hacky.
Instead of using dummy pages we will delay app initialization until Ionic ready state is set.
For this solution to work, remove the ng-app attribute from the html/body tag then use this code example:
document.addEventListener('deviceready', function() { angular.bootstrap(document, ['myApp']); }, false); var app = angular.module('myApp', ['ionic']); // Here comes the rest of your AngularJS/Ionic code....
As you can see, we’re using Cordova deviceready event to trigger our Ionic application bootstrapping. We can’t use Ionic ready state because our application is not initialized in the first place.
If you want to use this solution in your desktop environment don’t forget to include cordova.js.
Useful info to bare in mind for the future.
Hi, can you give an example with code of the second solution?