Angular 2. Имитация веб-API
Очень часто при разработке фронтенд части веб-приложения возникает необходимость имитации серверной части: сделать заглушку для того, чтобы иметь возможность реализовать функционал отправки запросов и получения данных, пока серверная часть ещё не реализована.
Для этого существует много инструментов, но для Angular такую возможность предоставляет модуль angular-in-memory-web-api.
В этом модуле собраны сервисы Angular для имитации связи с удалённым сервером, которые будут работать в памяти приложения и обрабатывать ajax запросы.
Он не только позволит вам реализовать функционал отправки запросов и получения данных, но и позволит работать с аналогом базы данных в памяти приложения, то есть выполнять операции по добавлению, редактированию и удалению данных.
Установка
Самый удобный способ установить модуль angular-in-memory-web-api, это воспользоваться пакетным менеджером npm, если у вас он еще не установлен, сделать это можно скачав и установив NodeJS.
Далее, в корневом каталоге вашего приложения в консоли выполните следующую команду:
npm install angular-in-memory-web-api
Подключение
Подключать ресурсы рекомендуется в главном корневом модуле вашего приложения.
Импортируйте модуль angular-in-memory-web-api в свое приложение:
import {InMemoryWebApiModule} from 'angular-in-memory-web-api'
Также заранее импортируем наш сервис InMemoryDataService, который мы создадим в следующей главе:
import {InMemoryDataService} from './in-memory-data.service'
Теперь подключим сервис в приложение. В массив imports главного модуля добавьте следующий код:
imports: [InMemoryWebApiModule.forRoot(InMemoryDataService)]
В функцию конфигурации forRoot() передаем сервис InMemoryDataService, который будет управлять базой данных в памяти приложения.
Реализация
Итак, модуль и сервис подключены в приложении, теперь можно переходить, непосредственно, к реализации сервиса.
Создайте в своем приложении файл in-memory-data.service.ts и поместите в него следующий код:
На скриншоте видно, что мы импортируем интерфейс InMemoryDbService
и реализуем его в классе InMemoryDataService.
Далее мы реализуем его метод createDb, он создаст коллекцию хэш-объектов, которая будет аналогом нашей базы данных в памяти приложения.
В данном случае мы создали свойство users, значением которого является массив объектов пользователей, у которых есть свойства id и name.
Использование
Для того, чтобы начать использовать созданную базу данных, можно воспользоваться сервисом @angular/http, который реализует ajax запросы.
Как я уже упоминалось выше, база данных, созданная с помощью сервиса InMemoryDbService, поддерживает все основные типы запросов: get, post, put, delete.
Коллекция users, созданная нами в файле in-memory-data.service.ts, будет доступна по адресу "/api/users". Тут стоит отметить, что имя коллекции совпадает со строкой запроса, то есть если мы добавим в функцию createDb еще одну коллекцию items, то она будет доступна по адресу "/api/items".
В качестве примера реализуем сервис, который будет осуществлять get-запрос на получения данных наших пользователей:
Функция getUsers() отправит ajax запрос по адресу "/api/users", который вернет данные нашей коллекции users. В данном случае используется функция get() сервиса http, но для других типов запросов также есть соответствующие функции post(), put() и delete().
Также сервис поддерживает поиск по полям объекта в памяти. Для этого достаточно передать параметры в строке запроса, например "/app/users/?name=lis" , чтобы найти объект со значением свойства name равное lis.
Расширенные возможности
Дополнительный набор параметров можно передать в качестве второго аргумента функции forRoot(), которую мы описывали в главе “Подключение”.
InMemoryWebApiModule.forRoot(InMemoryDataService, { delay: 500 })
Свойство delay задает значение величины задержки для обработки всех запросов.
Приведу несколько поддерживаемых параметров:
- apiBase - можно задать базовый путь к ресурсам, по умолчанию 'api/'.
- host - можно задать хост, по умолчанию 'localhost'.
- caseSensitiveSearch - Установить чувствительность к регистру при поиске по параметрам в запросе.
- post204 - если поставить true, то post-запрос на добавление не будет возвращать этот объект в ответе.
- delete404 - если поставить true, то запрос на удаление несуществующего объекта вернет статус 404.
Заключение
Функционал Angular веб-API будет полезен на ранних этапах разработки приложения и в условиях, когда разработка серверной части приложения отстаёт от разработки клиентской.
Всем спасибо и удачи!
Тайный Санта в JazzTeam Крупный российский заказчик посетил минский офис JazzTeam