RESTful сервисы в AngularJS. Использование сервисов $http, $resource для REST вызовов

Пример использования RESTful сервисов в AngularJS. Использование сервисов $http, $resource для REST вызовов.

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5
Используемые технологии и библиотеки
  • Spring MVC 4.2.4.Release
  • AngularJS 1.5.0
  • IntelliJ IDEA 15.0.2

1. Описание задачи

Рассмотреть как применяются RESTful сервисы в AngularJS. Как применить сервисы $http и $resource для REST вызовов.

2. Структура проекта

Структура проекта не поменялась с предыдущей статьи. Рассматриваемая тема находится в представлении httpresource.jsp. Так же в статье будет использован RestPostsModel класс из пакета rest/model. Этот класс будет использован для преобразования JSON ответа сервера.

3. Описание $http и $resource

$http — это сервис, который используется для вызова REST сервисов. $http сервис это основа Angular для коммуникации с удаленным HTTP сервером через XMLHttpRequest объект или через JSONP. $http сервис это функция, которая принимает на вход только один аргумент — объект конфигурации, который используется для создания HTTP запроса и возврата ответа.

Объект ответа будет обладать следующими свойствами:

  • data – {string|Object} – тело ответа, которое будет преобразовано с помощью преобразовывающих функций.
  • status – {number} – код статуса HTTP ответа.
  • headers – {function([headerName])} – Header getter функции.
  • config – {Object} – конфигурационный объект, который используется для создания запроса.
  • statusText – {string} – HTTP статус текст ответа.

$resource используется для create, read, update, delete операций (CRUD).

4. Применение $http, $resource

Полный код для AngularJS описан ниже. Далее для более легкого понимания он будет рассмотрен по частям.

Здесь используется Spring MVC контроллер RestTemplateController, который описывается в Работа с JSON и XML (преобразование объектов) в Spring MVC. Формирование ответа и обработка запроса. Так же может быть интересна предыдущая часть, в которой немного рассматривается работа $http сервиса.

Сначала мы создаем модуль в зависимость которого добавляется модуль ngResource. Далее задается контроллер в котором описаны GET и POST методы. Эти запросы будут перехватываться Spring MVC контроллером с соответствующим @RequestMapping.

В модуле описан объект post, который соответствует по структуре java классу RestPostsModel.

RestPostsModel:

Рассмотрим описание контроллера JSONController по частям.

Создаем контроллер и передаем в функцию сервис $http. Он использует метод get() с указанием URL. Этот URL будет обработан Spring MVC контроллером и вернет ответ, который будет записан в объект post.

Далее рассматривается использование метода post.

Всё аналогично. Этот запрос обработает mvc контроллер с помощью метода savePost:

При конфигурации объекта $resource сразу буде возвращен URL, который вызовет метод удаления объекта post с id, который указывается с помощью параметра (в нашем случае id:1).

Так же был создан второй контроллер, который использует HTTP метод delete.

5. Запуск приложения

В представлении результаты будут выводиться с помощью следующего кода.

Как видите в конце вызываются два angular контроллера. В результате последовательного вызова их методов в IDE консоли мы увидим последовательность вызова Spring MVC методов.

На экране это выглядит так.

httpResourceRun

 

 

Исходные коды

MVC_AngularJS_Html5 full project — полный проект Spring MVC + AngularJS + Bootstrap + HTML5.

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5
Share Button
2
1633 Total Views 7 Views Today

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


*