I’ve been using Ionic Framework (v1) to build hybrid mobile apps for a while now, and I love it’s flexibility and power. For local storage, lately I’ve been working more and more with Sqlite, which allows me to cache data on client apps that can be manipulated easily using standards compliant SQL commands.

In this tutorial, I will build a very basic Contacts list using a service that handles the Sqlite database configuration and interactions. Special thanks to Julien Goux, whose work I adapted to build this implementation.

  1. For this example, I started with the Ionic tabs starter template.
  2. Add the Cordova Sqlite Storage plugin.
  3. Add a service file to your application to interface with Sqlite.

     
  4. Add a configuration file to your application, which will store the database structure. In this example, we’re building a simple contacts list.

     
  5. Initialize your database on app.run. Configure routes to “Contacts” controller.

     
  6. Add the Contacts tab to your Tabs menu. This will replace the Chat tab.

     
  7. Add a model for your object. This allows us to encapsulate the table-specific sql in  our models, preventing duplication of the code in the Table service.

     
  8. In your controller, consume tthe Table service to interact with Sqlite.

     
  9. Add your HTML templates


     
  10. Run the app, and click the Contacts tab. You will see an empty list, click the button to add a contact.
    contacts-empty contacts-add contacts-one

 

While this app is very basic, it shows you how to interact with the Sqlite database with minimal effort.  By putting the Insert and Update SQL in your classes, you can use an abstract interface to Sqlite.

In a future post, I will show a method for rolling back changes that have been made to data in Sqlite.

Like this post? Share it!
Free WordPress Themes, Free Android Games