Ionic : differences between desktop browser and android web view

Ionic is a powerful framework to develop hybrid mobile applications on top of angularjs.

Here is what i learned from my first android tests - based on Ionic 1.0.0.rc5 - simply running ionic run android command

Error : device is not defined

The main issue i met. Everything was correctly defined, including cordova.js, the javascript import order etc

The cause of the issue was actually that I perform a synchronization on application launch, triggered by the first controller - to be accurate.

Controllers are not evaluated once ionicPlatform is ready :(.

So to skip that error, the synchronization has to be wrapped "on platform ready"

$ionicPlatform.ready(function(){
   syncService.sync();
});

Full width/height Background invisible

My application displays a beautiful background, unfortunately android displayed nothing.
This is because android doesn't seem to enjoy a full CSS declaration...

Just change the declaration and everything becomes alright.

/* fail */
.scroll-content{
    background: url("../img/background.png") no-repeat scroll center center / 100% 100% transparent
}
/* success */
.scroll-content{
    background-image: url("../img/background.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

Dates gap

The dates displayed by the application are transmitted by the server as ISO 8601, easily converted through moment.js.

Except the timezone in my device was not the same one than my desktop browser.
Be sure to set this correctly.

Ionic application reboot after a camera call

A though error once again : on corodova camera callback, the application reboot and becomes "ko".

This is a configuration of the device. In your device settings, just uncheck the "do not keep activities" configuration. Just do it now.

Clarification on grid system

I had some issues by not clearly declaring the "col" CSS class on "columns".

Instead of :

...
  

Declare :

...
  

Tabs are top instead of bottom

Something weird : tabs, that are displayed bottom on desktop, moved to top in android!

Add this to your angularjs .config function  :

$ionicConfigProvider.tabs.position("bottom");//force bottom
$ionicConfigProvider.tabs.style("standard"); //force same look and feel

Header view title not centered !

Similar issue.
Add this to your angularjs .config function  :

$ionicConfigProvider.navBar.alignTitle('center');