Angular *

Dependency Injection (или DI) — концепция, которая настолько естественно вплелась в повседневную практику программирования, что, кажется, её игнорирование можно смело записать в список смертных грехов наравне с отсутствием контроля версии. Но почему же DI стал столь важным?

DI — это один из ключевых принципов, позволяющих создавать гибкие и сопровождаемые приложения. Философия подхода заключается в том, чтобы избавить код от ненужных деталей, которые связывают логические компоненты приложения слишком плотно. Компоненты перестают быть зависимыми от конкретных реализаций других частей системы — они лишь говорят, что им требуется, а DI предоставляет необходимые зависимости.

Теперь о цели: DI — это вовсе не про навык освоения модной технологии, а про универсальный архитектурный инструмент, понятие которого пересекается в совершенно разных экосистемах. Изучение DI в нескольких языках и средах помогает не просто улучшить понимание самой концепции, но и значительно расширяет взгляд на проектирование систем, приходит понимание, что, несмотря на разницу в синтаксисе, фундаментальные идеи стремятся к одним и тем же архитектурным целям.

Кому будет полезна эта статья? Если вы давно уже подружились с .NET с его IServiceCollection, но всегда хотели разобраться, что из себя представляют Angular Injectors, — добро пожаловать. И наоборот, если вы пишете код в TypeScript, но слово "Transient" у вас вызывает только вопросы, — прошу к прочтению. Мы разберемся, как похожие концепции адаптируются в двух разных мирах и почему их изучение в обеих экосистемах позволит вам лучше проектировать свои приложения.

В современных Angular-приложениях сигналы предоставляют мощный способ управления реактивными потоками данных. Однако по мере роста сложности приложений становится всё более важным поддерживать чистоту функций, которые взаимодействуют с сигналами. Реактивная чистота гарантирует, что функции не создают нежелательных побочных эффектов, регистрируя новых производителей в реактивном графе.

В четвертой части мы рассматриваем процесс кастомизации кнопки Primary в Bootstrap с точки зрения построения дизайн-системы. Пошагово описаны уровни кастомизации, а также способы внесения изменений через переменные и стили для сохранения чистой архитектуры.

Когда вы в последний раз чувствовали себя настоящим экспертом в разработке? Лично я — где-то в тот момент, когда впервые написал программу, которая завершилась без ошибок. Программирование — это как бесконечный ремонт дома, в котором ты уже живёшь. Ещё вчера тебе казалось, что новая крыша будет решением всех проблем. А сегодня оказалось, что появились окна с автоподогревом, и без них дом вообще не дом. И, конечно, все соседи уже поставили такие.

Люди делятся на тех, кто усваивает информацию, когда слышит, и на тех, кто лучше понимает, когда видит. В мире разработки визуализация — это не просто удобство, а необходимость. Особенно когда речь идёт о сложных моделях данных.

Привет! Меня зовут Илья Чубко, я технический архитектор в К2Тех. В этой статье расскажу, как мы подошли к разработке визуального ER-дизайнера на Angular — от первых набросков до архитектурных решений, с акцентом на визуализацию связей между сущностями.

RxJS — штука мощная, но одновременно и коварная. Многие новички, освоив такие базовые операторы, как map, filter и, возможно, даже take, начинают чувствовать себя уверенно. Но в какой-то момент они сталкиваются с задачами, где нужно сочетать несколько потоков одновременно… и всё! Паника. Что выбирать: combineLatest, forkJoin, merge, zip? А что делать, если данные приходят с разной скоростью? Этот материал для тех, кто запутался на этом этапе. Давайте попробуем спокойно и пошагово разобраться.

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

Проблема взаимодействия между фронтом и бэкендом — одна из самых больших головных болей разработчиков. Разрыв в форматах данных, устаревшая документация и ошибки на этапе интеграции неизбежно замедляют процесс разработки. Однако современные подходы позволяют минимизировать эти сложности.

Одной из технологий, которая хорошо зарекомендовала себя для таких задач, является автоматическая генерация кода из OpenAPI-спецификаций.

Цвета — одна из самых важных частей любой дизайн-системы — и также одна из самых сложных. Если с ними обращаться неправильно, это приведёт к путанице и несогласованности в дальнейшем. Чтобы этого избежать, вам нужна чёткая, хорошо структурированная цветовая система, которая остаётся согласованной во всём проекте.

Если всё сделано правильно, вы сможете разрабатывать и поддерживать весь проект, используя только 6–8 основных цветов и их оттенков.

Добро пожаловать во вторую статью на тему RxJS! Если вы прочли первую часть, то, скорее всего, уже экспериментировали с from(), interval() и знакомились с элементарными операциями — фильтрацией и преобразованием данных. На этом фундаменте мы будем строить знакомство с более хитрыми инструментами, чтобы из просто «интересных экспериментов» RxJS превратился в реальный мощный инструмент для ваших проектов.

Обращаю Ваше внимание на то, что данный опус, как и прочие в этом цикле рассчитаны исключительно на новичков, никаких открытий, прорывов и "умных" мыслей для преисполнившихся здесь не предполагается. Все повествование строится на моём понимании того, как лучше построить процесс изучения обозначенной темы.

Защита веб-форм от ботнетов и автоматических атак стала критически важной, особенно после ухода зарубежных сервисов. Яндекс SmartCaptcha предлагает российскую альтернативу Google reCAPTCHA, но её интеграция с Angular требует дополнительной работы.

В этой статье разберём создание Angular-адаптера, его архитектуру и особенности использования.

Каждый Angular-разработчик хотя бы раз задумывался: "Почему я пишу так много однотипного кода?". Инъекция зависимостей, повторяющиеся методы логирования, одинаковая обработка событий — всё это напоминает вечную гонку с шаблонным кодом (boilerplate). Однако в арсенале Angular есть мощное средство для упрощения задач и автоматизации повторяющихся действий — TypeScript-декораторы. Декораторы — это быстрый способ добавить унифицированную функциональность к кодовой базе, сделав её чище, понятнее и поддерживаемой. В этой статье мы разберём, как с помощью декораторов избавляться от однообразных повторов, одновременно привнося гибкость и снижение количества ошибок.

Приветствую! Продолжаем разбирать возможности @artstesh/postboy и обсуждать, как сделать ваше приложение проще, а код элегантнее. Сегодня поговорим о том, что такое асинхронные команды и запросы, почему этот механизм так удобен, и как использовать его в реальных приложениях. Как всегда, всё покажу на живых примерах, чтобы можно было сразу применить на практике.

Проблема многих новичков, впервые сталкивающихся с темой подписок, заключается в обилии тем и нюансов, связанных с этим направлением. Тонны статей, дискуссий, документаций на темы, аля «RxJS mergeMap vs switchMap vs concatMap vs exhaustMap» могут вызвать головную боль уже в первые пятнадцать минут. Потому первый мой совет: ограничьте список тем и осваиваемых инструментов до самого минимума, декомпозиция важна везде и всегда — слона надо есть по частям. Так начинающий учиться шахматам сначала разбирает каждую фигуру в отдельности, запоминает возможности и нюансы, постепенно переходя к глобальной стратегии игры. Поэтому давайте смахнем все фигуры с доски и оставим там только пешку.

Тестирование — неотъемлемая часть разработки, особенно если речь идёт о сложных приложениях. Оно позволяет нам быть уверенными в качестве кода и предотвращать неожиданные ошибки. Но важный вопрос, который рано или поздно возникает у каждого разработчика: как балансировать между качественным покрытием тестами и затратами на их написание? И, что ещё более важно, как справляться с рутиной при этом?

Работа с тестовыми данными — проблема, способная выжать все силы у даже самых терпеливых разработчиков. Простые тесты с примитивными параметрами пишутся быстро и легко. Но когда ваш метод оперирует сложными объектами с вложенными структурами, ситуация усложняется многократно. С каждым новым тестом всё больше времени уходит на составление данных, разрушая читаемость и увеличивая объём работы.

Эта история — не про рекламу библиотек или продвижение инструментов. Это мой личный опыт борьбы с типовыми проблемами генерации данных в тестах TypeScript. Я решил поделиться тем, с какими сложностями я столкнулся, как привычные подходы из других языков не сработали и к каким решениям в итоге удалось прийти и, возможно, найти новый взгляд на проблему от сообщества.

RxJS — один из самых мощных инструментов в экосистеме Angular, который позволяет работать с асинхронными потоками данных с элегантностью и гибкостью. Однако за этой мощью скрывается коварная проблема: при неправильном управлении потоками ваши приложения смогут утонуть в утечках памяти. Это — потенциально незаметный убийца производительности. В этой статье я, постараюсь поделиться практиками управления потоками RxJS и посоветую, как избежать утечек памяти.

Чем мы займемся? План на сегодня такой:

• Разберем, чем может быть полезна маркерная доска для личного пользования, саморазвития, изучения иностранных языков и пр.;

• Реализуем виртуальную доску, которая будет "мозолить" нам глаза и не даст забыть о важном;

• Разберем некоторые технические подробности реализации, а заодно уличим хваленые ведущие LLM в обмане;

• Вспомним детство — порисуем на холсте.

Всем привет, с вами Максим Иванов, и сегодня мы поговорим о некоторых улучшениях, которые появились в последней версии Angular 19, вышедшей в ноябре 2024. Публикация довольно запоздалая с этой точки зрения, но мы сегодня постараемся рассмотреть некоторые нововведения более детально. Как и всегда ребята из Google дарят нам что-то новое, что сделает наши приложения еще более быстрыми и эффективными. И в этом нам помогут модерновые реактивные примитивы, инкрементальная гидратация и многое другое.

Всем привет! Меня зовут Илья Чубко, я технический архитектор K2Тех.

В этой статье я подробно опишу процесс создания SIP-клиента на Angular с использованием SIP.js, настройку сервера Asterisk на CentOS 9, обеспечение защищённого соединения через TLS и настройку WebRTC для совершения звонков.

Чтобы эффективно использовать сигналы Angular Signals, вам нужно понимать концепцию «реактивного контекста» и то, как работает отслеживание зависимостей. В этой статье я объясню обе эти вещи и покажу, как избежать некоторых связанных с ними ошибок.

Angular предоставляет мощный механизм Dependency Injection (DI), который делает приложения модульными и тестируемыми. В этой статье мы рассмотрим базовые механизмы работы DI-контейнера Angular, разберем иерархию инжекторов, ключевые роли @Injectable и @Optional, а также рассмотрим создание кастомных провайдеров и их применение в сложных проектах.