Ajax CSS HTML jQuery

Mobile app development with ionic,angularjs and cordova

I had been in touch with mobile development from long back, I used to use jquery mobile, I strongly noticed performance and speed issue with the jquery mobile, Second option was secha touch mobile development, unfortunately its hard to get started with it, poor documentation and there are very less sencha touch experts to help you, concluding its really hard for you to master sencha touch. Both of the above drawbacks has been targeted perfectly by Ionic framework guys.
Recently i launched my first ever mobile app “Complete Yoga”, using Ionic mobile framework, Angularjs Framework by google and cordova framework. In this post i am going to share some code snippets and tips from my experience.

See it in action

 

Ionic exit app on hardware back button with confirmation popup

Ionic placing tabs bar at the bottom of mobile app

By default ionic app tabs bar will be placed just below the header bar, If you want to move it to the bottom of mobile app you have to change ionic config variable value.

Disable javascript scrolling to speed up ionic mobile app performance

Ionic uses javascript to implement scrolling but this degrades the scroll performance in real time app, By disabling jsScrolling we tell ionic to disable it and fall back to native scrolling behavior, This definitely improves scrolling speed, look and feel

Show loading icon while switching two views OR Till view loads properly

In my Complete yoga app i am using huge JSON files to store contents. Iterating through them using angular.forEach before preparing view, creates impression like app has been hanged, which actually didn’t. Its better to give some idea to user that view is preparing for display. Its nice trick to show $ionicLoading icon to notify user.

Ionic provides few events for related to view load. I make use of $ionicView.enter and $ionic.beforeLeave events. What i do is before switching view i show loading icon which keeps loading and loading till it exists current view prepares data to display next view and then i hide the loading icon.


Showing toast notification


This was was really headache for me, i tried many codes but none of them worked for me, so instead of wasting any more time i though to find some workaround and i found one in ionic framework itself. $ionicLoading works like charm in this case if used with noBackdrop and durations parameters.

As i said this is my first app with mobile app development using ionic, angularjs and cordova, Surely you could expect future tutorials related to mobile app development using ionic and angularjs. Keep visiting.

2 Comments

Leave a Comment


*

Notify me of followup comments via e-mail. You can also subscribe without commenting.

Shares

Let your friends know what are you reading

Share this post with your friends!