Angular 2. Имитация веб-API

January 11, 2018 Jazz Team Технические статьи

Очень часто при разработке фронтенд части веб-приложения возникает необходимость имитации серверной части: сделать заглушку для того, чтобы иметь возможность реализовать функционал отправки запросов и получения данных, пока серверная часть ещё не реализована.
Для этого существует много инструментов, но для 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 будет полезен на ранних этапах разработки приложения и в условиях, когда разработка серверной части приложения отстаёт от разработки клиентской.

Всем спасибо и удачи!

@angular/http, ajax запрос, Angular, delete, get, NodeJS, post, put, веб-API, имитация серверной части, техническая статья

Тайный Санта в JazzTeam Крупный российский заказчик посетил минский офис JazzTeam