Pull to refresh
7
0
Владимир Бугорков @dcooder

Fullstack Developer

Send message

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

Reading time2 min
Views7.7K

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

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

Читать далее
Total votes 6: ↑6 and ↓0+6
Comments7

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

Reading time4 min
Views2.8K

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

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

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

Читать далее
Total votes 5: ↑5 and ↓0+5
Comments4

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

Reading time3 min
Views4.6K
Когда пользователь совершает какие-то критические и/или необратимые действия, перед тем, как отправить запрос на сервер, нужно запросить у пользователя подтверждение.

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

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

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

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

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

Reading time4 min
Views3.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,
Читать дальше →
Total votes 3: ↑1 and ↓2+1
Comments8

Information

Rating
Does not participate
Location
Чита, Забайкальский край, Россия
Date of birth
Registered
Activity