DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workkloads.

Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Implementing Micro Frontends in Angular: Step-By-Step Guide
  • Micro Frontends Architecture
  • Difference Between Bootstrap and AngularJS in 2022
  • Login With Google in Angular Firebase Application

Trending

  • Scalability 101: How to Build, Measure, and Improve It
  • Setting Up Data Pipelines With Snowflake Dynamic Tables
  • Scaling in Practice: Caching and Rate-Limiting With Redis and Next.js
  • Simplify Authorization in Ruby on Rails With the Power of Pundit Gem
  1. DZone
  2. Coding
  3. Frameworks
  4. AngularJS IndexedDB Demo

AngularJS IndexedDB Demo

By 
Raymond Camden user avatar
Raymond Camden
·
Feb. 25, 14 · Interview
Likes (0)
Comment
Save
Tweet
Share
17.9K Views

Join the DZone community and get the full member experience.

Join For Free

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. ;)





AngularJS application

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Implementing Micro Frontends in Angular: Step-By-Step Guide
  • Micro Frontends Architecture
  • Difference Between Bootstrap and AngularJS in 2022
  • Login With Google in Angular Firebase Application

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!