AngularJS IndexedDB Demo

over the past few months i've had a series of articles ( part 1 , part 2 , part 3 ) discussing indexeddb. in the last article i built a full, if rather simple, application that let you write notes. (i'm a sucker for note taking applications.) when i built the application, i intentionally did not use a framework. i tried to write nice, clear code of course, but i wanted to avoid anything that wasn't 100% necessary to demonstrate the application and indexeddb. in the perspective of an article, i think this was the right decision to make. i wanted my readers to focus on the feature and not anything else. but i thought this would be an excellent opportunity to try angularjs again.

for the most part, this conversion worked perfectly. this may sound lame, but i found myself grinning as i built this application. i'm a firm believer that if something makes you happy then it is probably good for you. ;)

i still find myself a bit... not confused... but slowed down by the module system and dependency injection. these are both things i grasp in general, but in angularjs they feel a bit awkward to me. it feels like something i'll never be able to code from memory, but will need to reference older applications to remind me. i'm not saying they are wrong of course, they just don't feel natural to me yet.

on the flip side, the binding support is incredible. i love working with html templates and $scope. it feels incredibly powerful. heck, being able to add an input field and use it as a filter in approximately 30 seconds was mind blowing.

one issue i ran into and i'm not convinced i created the best solution for was the async nature of indexeddb's database open logic. angularjs has a promises library built in and it works incredibly well for my application in general. but i needed the entire application to be bootstrapped to an async call for database startup. i got around that with two things that felt a bit like a hack.

first, my home view (get all notes) ran a call to an init function to ensure the db was already open. so consider this init():

function init() {
var deferred = $q.defer();

if(setup) {
deferred.resolve(true);
return deferred.promise;
}

var openrequest = window.indexeddb.open("indexeddb_angular",1);

openrequest.onerror = function(e) {
console.log("error opening db");
console.dir(e);
deferred.reject(e.tostring());
};

openrequest.onupgradeneeded = function(e) {

var thisdb = e.target.result;
var objectstore;

//create note os
if(!thisdb.objectstorenames.contains("note")) {
objectstore = thisdb.createobjectstore("note", { keypath: "id", autoincrement:true });
objectstore.createindex("titlelc", "titlelc", { unique: false });
objectstore.createindex("tags","tags", {unique:false,multientry:true});
}

};

openrequest.onsuccess = function(e) {
db = e.target.result;

db.onerror = function(event) {
// generic error handler for all errors targeted at this database's
// requests!
deferred.reject("database error: " + event.target.errorcode);
};

setup=true;
deferred.resolve(true);

};

return deferred.promise;
}

this logic is similar to what i had in the non-framework app but i've made use of promises and a flag to remember when i've already opened the database. this lets me then tie to init() in my getnotes logic.

function getnotes() {
var deferred = $q.defer();

init().then(function() {

var result = [];

var handleresult = function(event) {  
var cursor = event.target.result;
if (cursor) {
result.push({key:cursor.key, title:cursor.value.title, updated:cursor.value.updated});
cursor.continue();
}
};  

var transaction = db.transaction(["note"], "readonly");  
var objectstore = transaction.objectstore("note");
            objectstore.opencursor().onsuccess = handleresult;

transaction.oncomplete = function(event) {
deferred.resolve(result);
};

});
return deferred.promise;
}

all of this worked ok - but i ran into an issue on the other pages of my application. if for example you bookmarked the edit link for a note, you would run into an error. i could have applied the same fix in my service layer (run init first), but it just felt wrong. so instead i did this in my app.js:

$rootscope.$on("$routechangestart", function(event,currentroute, previousroute){
if(!persistanceservice.ready() && $location.path() != '/home') {
$location.path('/home');
};

});

the ready call was simply a wrapper to the flag variable. so yeah, this worked for me, but i still think there is (probably) a nicer solution. anyway, if you want to check it out, just hit the demo link below. i want to give a shoutout to sharon diorio for giving me a lot of help/tips/support while i built this app.

p.s. i assume this is obvious, but i'm not really offering this up as a "best practices" angularjs application. i assume i could have done about every part better. ;)