Небольшой рассказ о том как можно сэкономить немного времени и нервов, используя фичу exportAs в директивах и компонентах в angular.
Безруков Юрий @yuriy-bezrukov
Frontend
Angular 6+ полное руководство по внедрению зависимостей. providedIn vs providers:[]
7 min
Translation
В Angular 6 появился новый улучшенный синтаксис для внедрения зависимостей сервисов в приложение (provideIn). Несмотря на то, что уже вышел Angular 7, эта тема до сих пор остается актуальной. Существует много путаницы в комментариях GitHub, Slack и Stack Overflow, так что давайте подробно разберем эту тему.
В данной статье мы рассмотрим:
- Внедрение зависимостей (dependency injection);
- Старый способ внедрения зависимостей в Angular (providers: []);
- Новый способ внедрения зависимостей в Angular (providedIn: 'root' | SomeModule);
- Сценарии использования provideIn;
- Рекомендации по использованию нового синтаксиса в приложениях;
- Подведем итоги.
Как перестать бояться и создать свой Angular CLI Builder
6 min
Всем привет! Меня зовут Игорь, я — фронтэндер в Tinkoff.ru. И, как ни странно, я давно и безнадежно прикипел к Angular и ко всему, что с ним связано.
Очень хорошо помню свои первые проблемы со сборкой приложения на Angular: как передать в приложение переменные окружения или изменить алгоритмы сборки стилей? Я так к этому привык при работе с React. И сначала это решали с помощью ng eject: конфигурация webpack просто извлекалась из недр Angular CLI и изменялась как душе разработчика угодно. Выглядело это как костыль — webpack.config.js был раздутым и сложным. Но, когда Angular CLI v8.0.0 принес нам стабильный CLI Builders API, который позволяет кастомизировать, заменять или даже создавать новые CLI команды, все стало проще.
Сейчас самый популярный билдер для кастомизации конфигурации webpack — @angular-builders/custom-webpack. Если заглянуть в исходники всех билдеров, поставляемых пакетом, можно увидеть очень компактные решения, не превышающие и 30 строк кода.
Го тогда запилим свой? Challenge Accepted!
Топ-10 Angular-приемов, выбранных сообществом
4 min
В течение июня Саша Инкин и я, Рома Седов, запилили в Твиттере челлендж.
Каждый день мы публиковали по совету, хитрости или просто какой-нибудь полезной штуке из нашего опыта работы с Angular. Это движение было тепло встречено и поддержано комьюнити разработчиков.
Я решил написать статью о десяти приемах, которые набрали больше всего лайков, а также объяснить показанные в них концепции более подробно.
Давайте начнем!
Каждый день мы публиковали по совету, хитрости или просто какой-нибудь полезной штуке из нашего опыта работы с Angular. Это движение было тепло встречено и поддержано комьюнити разработчиков.
Я решил написать статью о десяти приемах, которые набрали больше всего лайков, а также объяснить показанные в них концепции более подробно.
Давайте начнем!
Кастомные Subject'ы в Angular: выносим логику из компонентов для переиспользования
4 min
В крупных проектах на Angular часто можно встречать повторяющееся поведение в компонентах. Такое поведение желательно выносить из компонента в отдельные классы, которые можно переиспользовать. Рассмотрю два достаточно популярных кейса: переключатель и множественный выбор сущностей.
Кейс 1: Переключалка (Toggle)
Часто в исходниках приходится видеть примерно такой код:
Декларативный подход в Angular
10 min
Когда я впервые услышал про compliant-механизмы, был весьма впечатлен. Хоть они и окружают нас в повседневности — в виде застежек рюкзака, кнопок мыши или колпачков от шампуней, — мы редко задумываемся о концепции таких устройств.
Если говорить кратко, в compliant-механизме для обеспечения его технических характеристик используют деформацию. В то время как в традиционной технике (rigid body) гибкость зачастую является негативным качеством материала, сompliant-механизмы используют ее для передачи силы и движения в нужном направлении, вместо соединений из нескольких подвижных деталей.
Превращаем реактивные формы Angular в строго типизированные за одну минуту
4 min
Привет, Хабр! Представляю вашему вниманию перевод статьи "Convert into Strongly Typed Angular Forms in a Minute" автора Ajay Ojha.
В данной статье мы узнаем о том, как превратить реактивную форму в строго типизированную без изменения определения класса.
Telegram бот для Mikrotik с Webhook и парсером JSON
20 min
Как вы думаете, можно ли, используя только Mikrotik скрипт, написать интерактивный Telegram бот, который будет работать целиком в среде маршрутизатора с поддержкой Webhook, входящих событий от API Telegram?
Разблокируем интернет с помощью Mikrotik и VPN: подробный туториал
3 min
Tutorial
В этом пошаговом руководстве я расскажу, как настроить Mikrotik, чтобы запрещённые сайты автоматом открывались через этот VPN и вы могли избежать танцев с бубнами: один раз настроил и все работает.
В качестве VPN я выбрал SoftEther: он настолько же прост в настройке как и RRAS и такой же быстрый. На стороне VPN сервера включил Secure NAT, других настроек не проводилось.
В качестве альтернативы рассматривал RRAS, но Mikrotik не умеет с ним работать. Соединение устанавливается, VPN работает, но поддерживать соединение без постоянных реконнектов и ошибок в логе Mikrotik не умеет.
Настройка производилась на примере RB3011UiAS-RM на прошивке версии 6.46.11.
Теперь по порядку, что и зачем.
Возможности Angular DI, о которых почти ничего не сказано в документации
6 min
Angular — это достаточно большой фреймворк. Задокументировать и написать примеры использования для каждого кейса просто невозможно. И механизм внедрения зависимостей не исключение. В этой статье я расскажу о возможностях Angular DI, о которых вы почти ничего не найдете в официальной документации.
Angular: оптимизация обработки событий
12 min
Tutorial
Прошла буквально пара недель, как я впервые начал писать на Angular, и сразу же столкнулся с рядом специфических проблем. Из-за малого опыта работы с этим фреймворком, я не уверен, что примененные способы оптимизации — это не стандартная практика. Некоторые признаки указывают, что разработчики предполагают подобные подходы, но делать выводы пришлось по профайлеру, а информацию искать по частям. При этом надо сказать, что решение нашлось очень быстро, когда причины проблем прояснились.
В статье я разберу как оптимизировать обработку часто вызываемых событий: mousemove, scroll, dragover и прочих. Конкретно я столкнулся с проблемами при реализации drag-and-drop интерфейса, поэтому и разбирать буду на примере с перетаскиванием элементов.