Store data to SQLite in AngularJS PhoneGap

When you work with a phonegap application, sometimes you need develop a work-offline mode for your app. In this case, SQLite is  a good choice. You can use SQLite to store data you loaded from server-side. If your device lost internet connection, application will load data from SQLite firstly.

Store data to SQLite in AngularJS PhoneGap

Common sense is not a gift, It’s a punishment. Because you have to deal with everyone who doesn’t have it.

To implement, you need install SQLite phonegap plugin for your app. And then, you write a service to handle get/set/remove data in SQLite. And now, I will show you a script that run in my app that uses angularjs, coffee script.

The below is coffee script that implement a factory to get/set/remove cache to SQLite

And DbCache factory should be injected to factories used to load data.  The below is my way:

– Load from SQLite cache firstly

– If Cache is empty,  use $http to load data from server-side

Code example:


Fix “Position Fixed” in Phonegap IOS App

When I build a Phonegap App on IOS that has header and footer with “position fixed”. Everything works well on web version, and I start to test IOS app version, it seems work well too. But a problem orcurs when virtual keyboard opens and close, then the layout breaks (“position fixed”  of header and footer does not work). I took 2 hours to research and google. Finally, I work out a solution, it is quite simple. I just set “position static” for header footer when virtual keyboard close (input blur event) and set  a time out about 200 miliseconds to change back “position fixed”, the layout will be perfect again. The below is my code, you will be easy to understand it if you ever work with angularjs, coffeescript

Cookies or LocalStorage Service in AngularJS

When you develop a web application, sometimes you need store data in client-side. In this case, you can use cookies or local storage. Some browsers do not support local storage (eg. IE 7,8), you should use cookies, but if you are building a phonegap application, local storage is unique choice.

The below code is coffee scripts, this is an anglarjs service that you can use to get, set or remove data from/to local storage.

And the below is an AngularJS service that will write data to cookies for the case the browser does not support local storage.