Как стать автором
Обновить
7
0
Владимир Бугорков @dcooder

Fullstack Developer

Отправить сообщение

Наследование компонентов в Angular: простой способ решить проблему с Dependency Injection

Время на прочтение2 мин
Количество просмотров7.7K

Итак, собственно проблема: порой у нас в проекте есть много похожих компонентов, с одинаковой логикой, одинаковыми DI, свойствами итд и возникает мысль: а почему бы не вынести все это дело в базовый компонент (точнее директиву) абстрактным классом, а остальные компоненты уже наследовать? На самом деле мысль хорошая, принцип DRY соблюдается, имеем один источник истины, при изменении той самой общей логики не придется прыгать по всем компонентам итд.

Но есть один нюанс: эти злосчастные конструкторы. Нужно в каждом наследуемом компоненте передавать все DI в конструктор родителя.

Читать далее
Всего голосов 6: ↑6 и ↓0+6
Комментарии7

Кастомные Subject'ы в Angular: выносим логику из компонентов для переиспользования

Время на прочтение4 мин
Количество просмотров2.8K

В крупных проектах на Angular часто можно встречать повторяющееся поведение в компонентах. Такое поведение желательно выносить из компонента в отдельные классы, которые можно переиспользовать. Рассмотрю два достаточно популярных кейса: переключатель и множественный выбор сущностей.

Кейс 1: Переключалка (Toggle)

Часто в исходниках приходится видеть примерно такой код:

Читать далее
Всего голосов 5: ↑5 и ↓0+5
Комментарии4

Заворачиваем в Promise модальное окно подтверждения действия

Время на прочтение3 мин
Количество просмотров4.6K
Когда пользователь совершает какие-то критические и/или необратимые действия, перед тем, как отправить запрос на сервер, нужно запросить у пользователя подтверждение.

Как правило, выводится модал «Вы уверены, что хотите сделать то то и то то» и внизу две кнопки: Да и Нет. Если пользователь нажал «да», то отправляем запрос на сервер и закрываем модал. Если «нет», просто закрываем модал.

Это стандартный функционал, который обычно используется в нескольких местах в проекте. Также при наращивании функционала проекта, скорее всего добавиться еще несколько мест, где нужны модалы с подтверждением. Поэтому, во избежание дублирования кода, однозначно такой модал нужно выносить в отдельный компонент. Во избежание соблазна забивать костыли, этот компонент должен быть максимально универсальным и простым в использовании.

Перейдем от лирики к делу. Для отображения модала будем использовать Bootstrap.

Собственно мой вариант такого компонента:
Читать дальше →
Всего голосов 4: ↑3 и ↓1+4
Комментарии5

Angular: делаем код читаемым для бэкендера. Бонус: подмена API заглушками и кэширование запросов

Время на прочтение4 мин
Количество просмотров3.7K
Очень часто на проекте темпы разработки фронтенда опережают темпы разработки бэкенда. При такой ситуации возникает необходимость двух вещей:

  1. возможность запускать фронт без бэкэнда, либо без отдельных эндпоинтов;
  2. описывать бэкендеру, какие нужны эндпоинты, формат запроса, ответа, итд.

Хочу поделиться своим способом организации кода, отвечающего за запросы к API, который отлично решает эти две задачи, а также позволяет кэшировать запросы.

Создаем в корне проекта файл конфигурации api.config.json:

{
  "apiUrl": "https://api.example.com",
  "useFakeApiByDefault": false,
  "fakeEndPoints": ["Sample"]
}

Здесь прописываем базовый урл для API, если параметр useFakeApiByDefault = true, то наше приложение будет использовать только заглушки вместо всех запросов. Если false — то заглушки будут использоваться только для запросов из массива fakeEndPoints.

Чтобы можно было импортировать JSON в код, добавляем в секцию CompilerOptions файла tsconfig.json две строчки:

    "resolveJsonModule": true,
    "esModuleInterop": true,
Читать дальше →
Всего голосов 3: ↑1 и ↓2+1
Комментарии8

Информация

В рейтинге
Не участвует
Откуда
Чита, Забайкальский край, Россия
Дата рождения
Зарегистрирован
Активность