Приложение за 5 минут используя Angular.js $resource и databoom

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

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

Для создания приложений, которые должны сохранять и читать данные с удаленного сервера, AngularJS предоставляет мощную функцию $resource (https://docs.angularjs.org/api/ngResource/service/$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 существенно ускоряет создание прототипов приложений.

ссылка на оригинал статьи http://habrahabr.ru/post/259689/