Angular.js persistent storage -1


Предположим мы хотим добавить в классическое todo приложение возможность сохранения данных.

image

Нам понадобится чтение данных из хранилища и сортировка для показа списка задач, сохранение данных при добавлении новой задачи, и удаление данных.

Для решения этой задачи мы можем использовать новую библиотеку databoom.angular.js для работы с хранилищем databoom.space из приложений Angular.js.

Пример и код приложения в песочнице.

Объявление сервиса


Первое, что мы делаем — это регистрация сервиса. Ангуляр предлагает несколько способов вынесения общего кода с использованием сервисов. Подробнее о них можно почитать здесь.

Для нашей задачи используется наиболее простой тип: фабрика

angular.module('todoApp', [])
.factory('db', databoomSrv('https://samples.databoom.space', 'sandboxdb'))
.controller('TodoListController', function (db) {
    ...
});

Чтение и сортировка списка задач


function updateList() {
    db.load('tasklist', { orderby: "date desc" })
        .then(function (data) { todoList.taskList = data })
}

Функция db.load('tasklist', { orderby: «date desc» }) посылает серверу запрос на чтение списка задач (все объекты в коллекции 'tasklist'). Запрос также сопровождается требованием отсортирать данные по дате в обратном порядке. Существуют также опции для фильтрации данных, постраничного вывода, раскрытия и т.д.

Добавление новой задачи в базу данных


todoList.addTodo = function () {
    if (!todoList.todoText) //save only not empty tasks
        return
    db.save('tasklist', { text: todoList.todoText, done: false, date: new Date() })
    .then(function () { updateList(); todoList.todoText = '' })
}

Функция db.save('tasklist', { text: todoList.todoText, done: false, date: new Date() }) сохраняет новую задачу (добавляет ее в коллекцию 'tasklist').

Удаление задачи


todoList.delTodo = function (id) { db.del(id).then(updateList) }

Функция db.del(id) удаляет объект с указанным id.


Чтобы сохранять и читать данные нужно лишь несколько строк кода на клиентском приложении и ни одного действия с сервером. Сервер databoom позволяет сохранять данные как они есть — без предварительного описания схемы данных и администрирования сервера.


Подробнее API библиотеки можно посмотреть здесь.

Развитие библиотеки


В следующей версии библиотеки появится возможность:
  1. кэширования данных в локальном хранилище на случай обрыва связи с последующей синхронизацией с сервером.
  2. постоянной онлайн синхронизации данных между клиентами (с использованием websockets) — например, при добавлении новой задачи она сразу же становится видна всем.




К сожалению, не доступен сервер mySQL