Статьи

AngularJS IndexedDB Demo

Ноябрь 16, 2017

За последние несколько месяцев у меня была серия статей ( часть 1 , часть 2 , часть 3 ), обсуждающих IndexedDB. В прошлой статье я создал полное, хотя и довольно простое приложение, позволяющее писать заметки. (Я любитель делать заметки для приложений.) Когда я создавал приложение, я намеренно не использовал фреймворк. Конечно, я пытался написать хороший, понятный код, но хотел избежать всего, что не было на 100% необходимым для демонстрации приложения и IndexedDB. С точки зрения статьи, я думаю, что это было правильное решение. Я хотел, чтобы мои читатели сосредоточились на этой функции, а не на чем-то еще. Но я подумал, что это будет отличная возможность снова попробовать AngularJS.

По большей части это преобразование работало отлично. Это может звучать глупо, но я обнаружил, что ухмыляюсь, когда создавал это приложение. Я твердо верю, что если что-то делает тебя счастливым, это, вероятно, полезно для тебя. ?

Я все еще чувствую себя немного … не смущенным … но замедленным из-за системы модулей и внедрения зависимостей. Обе эти вещи я понимаю в целом, но в AngularJS они чувствуют себя немного неловко. Такое ощущение, что я никогда не смогу кодировать из памяти, но мне нужно будет ссылаться на старые приложения, чтобы напомнить мне. Я не говорю, что они не правы, конечно, они просто пока не чувствуют себя естественными для меня.

С другой стороны, поддержка переплета невероятна. Я люблю работать с шаблонами HTML и $ scope. Это невероятно мощно. Черт, возможность добавить поле ввода и использовать его в качестве фильтра примерно за 30 секунд была просто невероятной.

Одна проблема, с которой я столкнулся, и я не уверен, что создал лучшее решение — это асинхронная природа открытой логики IndexedDB. AngularJS имеет встроенную библиотеку обещаний, и она работает невероятно хорошо для моего приложения в целом. Но мне нужно было, чтобы все приложение было загружено до асинхронного вызова для запуска базы данных. Я обошел это с двумя вещами, которые походили на взлом.

Во-первых, мой домашний просмотр (все записи) запустил вызов функции init, чтобы убедиться, что БД уже открыта. Итак, рассмотрим этот 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;
}

Эта логика похожа на ту, что была у меня в не-фреймворковом приложении, но я использовал обещания и флаг, чтобы помнить, когда я уже открыл базу данных. Это позволяет мне затем связываться с init () в моей логике getNotes.

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;
}

Все это работало нормально — но я столкнулся с проблемой на других страницах моего приложения. Например, если вы добавили в закладки ссылку для редактирования заметки, вы столкнетесь с ошибкой. Я мог бы применить такое же исправление в своем слое обслуживания (сначала запустите init), но это было просто неправильно. Поэтому вместо этого я сделал это в моем app.js:

$rootScope.$on("$routeChangeStart", function(event,currentRoute, previousRoute){
if(!persistanceService.ready() && $location.path() != '/home') {
$location.path('/home');
};

});

Вызов готов был просто оболочкой для переменной flag. Так что да, это сработало для меня, но я все еще думаю, что есть (вероятно) более хорошее решение. В любом случае, если вы хотите проверить это, просто нажмите ссылку Демо ниже. Я хочу поблагодарить Шарон ДиОрио за помощь, советы и поддержку во время создания этого приложения.

PS Я предполагаю, что это очевидно, но я не предлагаю это как приложение AngularJS «Best Practices». Я полагаю, что мог бы справиться с каждой частью лучше. ?

39
Share: