На домашней странице сайта angular.js приведен простой пример todo приложения. Этот пример довольно хорошо показывает основные преимущества angular.js для создания веб приложений, но он не является полноценным приложением, поскольку список дел не сохраняется и каждый раз создается заново.



Давайте добавим возможность сохранения и чтения данных для простого angular.js приложения.

Для создания приложений, которые должны сохранять и читать данные с удаленного сервера, AngularJS предоставляет мощную функцию $resource. Функция $resource возвращает объект, с заранее определенными методами:

• get()
• query()
• save()
• remove()
• delete()

которые можно использовать для взаимодействия с REST сервером.

Для сохранения данных необходимо разработать REST сервер, взаимодействующий с базой данных. Но можно воспользоваться готовым сервисом databoom.space для получения бесплатного хранилища данных. Хранилище databoom.space не требует настройки – оно уже готово к работе, и мы можем сохранять и читать JSON объекты.

После добавления возможности сохранения данных модуль “todoApp” выглядит следующим образом:

angular.module('todoApp', ['ngResource'])
    .config(function ($httpProvider) {
        $httpProvider.defaults.headers.common['Authorization'] = "Basic " + btoa("writer1" + ":" + "w1pswd");
    })
    .controller('TodoListController', ['$resource', '$q', function ($resource, $q) {
        var res = $resource('https://albert.databoom.space/api1/albert-db/collections/todos');
        var todoList = this;
        todoList.todos = [];
        res.get(function (resp) {
            todoList.todos = resp.d.results;
        });

        todoList.addTodo = function () {
            res.save(
                {
                    text: todoList.todoText,
                    done: false
                })
                .$promise
                .then(function () {
                    res.get(function (resp) {
                        todoList.todos = resp.d.results;
                        todoList.todoText = '';
                    });
                });
        };

        todoList.remaining = function () {
            var count = 0;
            angular.forEach(todoList.todos, function (todo) {
                count += todo.done ? 0 : 1;
            });
            return count;
        };

        todoList.editTask = function (todo) {
            res.save(todo);
        };

        todoList.archive = function () {
            var remove_promises = [];
            for (var i in todoList.todos)
            {
                var todo = todoList.todos[i];
                if (todo.done)
                {
                    var promise = res.remove({ id: todo.id }).$promise;
                    remove_promises.push(promise);
                }
            }
            $q.all(remove_promises).then(function () {
                res.get(function (resp) {
                    todoList.todos = resp.d.results
                });
            });

        };

    }]);

Полностью приложение выложено на сайте codepen: codepen.io/reg312/pen/yNaqdQ

Настройка класса ресурса в приведенном выше коде:

• var res = $resource('https://albert.databoom.space/api1/albert-db/collections/todos');

Теперь, используя переменную res, мы можем выполнить следующие основные операции для работы со списком задач:

• res.get(function (resp) {todoList.todos = resp.d.results;}) – чтение списка задач с сервера
• res.save({text: todoList.todoText, done: false}) – сохранение новой задачи
• res.remove({ id: todo.id }) – удаление выполненной задачи

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

Это лишь пример приложения, показывающий как AngularJS может взаимодействовать с REST сервером. Сочетание AngularJS и databoom существенно ускоряет создание прототипов приложений.