Displaying a prepopulated database with AngularJS

I am trying out different ways to have a prepopulated database in an app. This time I’m experimenting with AngularJS. The following article show how to display an array of data AngularJS style, filtering the output with two buttons. (This article is not using “ng-cordova.”) If you follow the other articles on this site, you can compare the different approaches for a “simple,” in-app, prepopulated DB.

Prepopulated Database with TaffyDB for iOS and Android with Cordova

I thought I would look for an alternate to SQLite to display a prepopulated database. Research (and successfully creating a working version) led me to TaffyDB. Here is a working project to create your own prepopulated DB. TaffyDB can do so much more if you are familiar with JavaScript (I’m not, so it was difficult trying to figure this much out!).

Resources:
http://www.taffydb.com/
http://www.slideshare.net/typicaljoe/better-data-management-using-taffydb-1357773 

Installing Chris Brody’s SQLite Database with Cordova CLI (Android)

The HTML5 SQLite spec results in a database with a limit of 5MB. Chris Brody’s SQLitePlugin, however, breaks this barrier. Here is how to implement it. These steps assume you’ve already created the Cordova project and are adding this database project to it. I recommend you build for v19.

 If you just want a simple prepopulated DB, try this article instead.

Populate your PhoneGap App with Data from an External Server DB

With this article, we’ll pull data from a server and show it in the app. We’ll create a database table on a server, load it with data, then set up the scripts to make it all work. You’ll need a MySQL server and the ability to upload and change files on it.

My development environment:

Mac OS X 10.9.1 on latest Mac Mini
Cordova CLI 3.4.0
For Android 4.3, 4.4 v19
Testing in device: Android-19, Nexus 7 with 4.3
No Jquery or other JS or CSS packages used

This post assumes you already have your Cordova PhoneGap environment already set up. Look elsewhere on this site for setting up for iOS or Android.

Cordova-supported WebSQL Database, with user-added data

In this article, we are examining another facet of the database storage, which is built into Cordova. In this article, we’ll create an empty database and allow the user to add records to the database and store them in the device. A button will delete the database. Two outputs are given, one in a text field and one in a table layout. With the text-only layout in the textfield, you can press and hold in the textfield and copy the contents to export it.

Adding Cordova APIs to Android via CLI: Prepopulated Database Storage

In this article, we are in part 5 of exploring the Cordova APIs, which started in https://iphonedevlog.wordpress.com/2014/01/31/adding-cordova-apis-to-android-via-cli-accelerometer-and-camera/ Refer to that article to set up your Cordova PhoneGap project files. You’ll want to follow the “Set Up the Android Project” section through step 9 inclusive.

Prepopulated Database using PhoneGap Storage API, Cordova 2.0.0

I slightly adapted the PhoneGap Cordova Storage API to show content on the screen (PG’s version only shows content in the console). Here is that code below. Just copy and paste it into a text file, name it PGStorageAPI.html, and click to display in web browser. You’ll need cordova-2.0.0.js in the same folder.

Please note that this database is created in the HTML on this page. It is not a separate database that can be lost in an upgrade or low-memory situation. Also, it is not a data-entry database where the user enters data. Just like you cannot lose an HTML page in your app, so you can’t lose the pre-populated data on this page. As you can see, this pre-populated database is ideal for highly repetitive page layouts, such as this one where the same layout information is repeated over and over. Entering the information once in the database frees one from hand-coding the HTML for each entry. Image Gallery, anyone?

(When I copied this file into a text file and renamed the ending .html, and included cordova-2.0.0.js, the page was blank. A bit of searching around found several double-quotes turned into question marks, and a mixture of curly and straight quotes and double-quotes. Once I go those fixed, the script worked fine. I guess it was the change from typing it in my Mac, pasting it in here, then copying/pasting from here into a Windows text editor. What a mess. )