AngularJS: IndexedDB Demo

Demo app showing how indexedDB can be used to store data.

by dshilkret

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<h3 class="jumbotron">ToDo using IndexedDB</h3>

<div data-ng-app="indexDBSample" data-ng-controller="TodoController as vm">
  <div class="form-group">
    <input type="text" data-ng-model="vm.todoText" name="todo" placeholder="What's pending?" class="form-control" />
  </div>
  <div class="form-group">
    <button class="btn btn-primary btn-lg" data-ng-click="vm.addTodo()">Add</button>
    <button class="btn btn-secondary btn-lg" data-ng-click="vm.refreshList()">Refresh</button>
  </div>
  <table class="table table-striped">
    <tr data-ng-repeat="todo in vm.todos">
      <td>{{todo.text}}</td>
      <td><a href="#" data-ng-click="vm.deleteTodo(todo.id)"><span class="glyphicon glyphicon-trash"></span></a>

      </td>
    </tr>
  </table>
  <div class="footer text-muted">Jayesh</div>
</div>

CSS

body {
  margin: 10px;
  padding: 10px;
  font-family: 'Palatino';
  font-size: 16px;
}

.footer {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

JavaScript

var app = angular.module('myApp', []);

app.factory('indexedDBDataSvc', function($window, $q) {
  var indexedDB = $window.indexedDB;
  var db = null;
  var lastIndex = 0;

  var open = function() {
    var deferred = $q.defer();
    var version = 1;
    var request = indexedDB.open("todoData", version);

    request.onupgradeneeded = function(e) {
      db = e.target.result;

      e.target.transaction.onerror = indexedDB.onerror;

      if (db.objectStoreNames.contains("todo")) {
        db.deleteObjectStore("todo");
      }

      var store = db.createObjectStore("todo", {
        keyPath: "id"
      });
    };

    request.onsuccess = function(e) {
      db = e.target.result;
      deferred.resolve();
    };

    request.onerror = function() {
      deferred.reject();
    };

    return deferred.promise;
  };

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

    if (db === null) {
      deferred.reject("IndexDB is not opened yet!");
    } else {
      var trans = db.transaction(["todo"], "readwrite");
      var store = trans.objectStore("todo");
      var todos = [];

      // Get everything in the store;
      var keyRange = IDBKeyRange.lowerBound(0);
      var cursorRequest = store.openCursor(keyRange);

      cursorRequest.onsuccess = function(e) {
        var result = e.target.result;
        if (result === null || result === undefined) {
          deferred.resolve(todos);
        } else {
          todos.push(result.value);
          if (result.value.id > lastIndex) {
            lastIndex = result.value.id;
          }
          result.
          continue();
        }
      };

      cursorRequest.onerror = function(e) {
        console.log(e.value);
        deferred.reject("Something went wrong!!!");
      };
    }

    return deferred.promise;
  };

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

    if (db === null) {
      deferred.reject("IndexDB is not opened yet!");
    } else {
      var trans =...