Investigations of Query Binding for AngularJS and IndexedDB

For a recent project, I was looking at ways to have data in an AngularJS controller automatically update itself whenever IndexedDB transactions were committed. As a secondary goal, I was interested in shifting the burden of indexeddb-wrangling to a third party.

For those that can't wait, here is the code and here is the full demo.


How we talk to IndexedDB, for this project, is less of a priority. I started with a way to simplify specifying a query that would update itself, and do so in a dead-simple way. This meant:

The BoundQuery factory (code) is a first attempty. It somewhat cheats: it relies on the excellent, promise-driven DexieJS IndexedDB and the proof-of-concept ngDexie AngularJS wrapper. However, the scope-wrapping and event-listening, passing in callback, should work with other approaches.

The Demos

demo1 stays small. It just shows a single list (and thus single IndexedDB table). You can add and delete todo items. demo2 re-organizes the code into a module file, controllers file, and a factories file that abstracts the BoundQuery concept.

demo3 puts the ideas more to use. It has multiple todo lists and allows viewing a todo. It arranges these views into a single-page application using ui-router as a series of nested states. As you move up and down the URL structure, you don't re-run queries unless you need to.

Additionally, the home page lets you turn on a simulation of a background process that gets new data. In this case, it simulates jamming new todo items onto the first todo list every 5 seconds.