Как стать автором
Обновить
17.16

Angular *

JavaScript-фреймворк

Сначала показывать
Порог рейтинга
Уровень сложности

Добавление Swagger документации в NestJS-mod приложение и генерация REST-клиента для Angular-приложения

Время на прочтение18 мин
Количество просмотров915

Подключение генератора Swagger документации к бэкенду.
Подключение https://www.npmjs.com/package/prisma-class-generator для генерации DTO из Prisma - схемы.
Создание nx библиотеки для работы с бэкендом.
Подключение https://www.npmjs.com/package/@openapitools/openapi-generator-cli для генерации SDK для работы с бэкендом.

Читать далее

Новый фронтенд-фреймворк?

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

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

Такие компоненты можно будет затем собирать в полноценные веб-приложения, сопоставимые с теми, что созданы с использованием React, Angular, Vue, Solid, Svelte и т.д.

Читать далее

Использование isolatedModules в Angular 18.2

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

Angular теперь поддерживает TypeScript isolatedModules начиная с версии Angular 18.2. Благодаря этой поддержке мы сможем заметить увеличение производительности до 10% во времени сборки для production на своих проектах.

Читать далее

Динамический рендеринг Angular-компонентов

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров4.6K

Привет Хабр. На связи Даня, Angular-разработчик из команды Т-Бизнеса.

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

Добро пожаловать под кат!

Читать далее

Использование Signal и Model Inputs в Angular

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров5.1K

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

При наличии уже устоявшихся практик и подходов этот API может показаться избыточным и даже лишним, но только на первый взгляд. Ведь часто бывает так: что‑то новое выглядит неудобным, но через время все оказывается иначе и уже даже не понимаешь, как жил без этого раньше.

В статье я расскажу о Signal и Model Inputs и о том, как они могут заменить классические декораторы Input и Output, а попутно — решить проблемы с обнаружением изменений, не прибегая к написанию дополнительного кода.

Читать далее

Создание пустого Angular проекта и связь его с существующим сервером на NestJS

Время на прочтение12 мин
Количество просмотров822

Создание приложения происходит через nx схематик для Angular.

Адрес сервера задается жестко в коде, в следующих постах адрес будет перенесен в переменные окружения.

Для запуска E2E-тестов используется "Playwright".

Читать далее

Представляем Taiga UI v4: еще больше компонентов и улучшений

Уровень сложностиПростой
Время на прочтение12 мин
Количество просмотров11K

Рад поделиться, что мы опубликовали первый стабильный релиз четвертой мажорной версии Taiga UI — нашей огромной библиотеки компонентов для Angular. Улучшений в нем так много, что одной статьи едва ли хватит. Расскажу про самые аппетитные из них.

Читать далее

Angular: переменная в шаблоне, хорошо или плохо?

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров2.7K

Недавнее объявление о блоке @let в Angular вызвало бурное обсуждение в сообществе разработчиков, одни считают его ценным дополнением, другие видят в этом ненужное усложнение.

Читать далее

Computed сигналы и ChangeDetection — подробный разбор

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров3K

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

Для многих моих коллег сигналы стали чем-то мистическим. С одной стороны, код с ними стал выглядеть элегантнее, с другой была обнаружена проблема с пониманием внутренних механизмов их работы. В частности, загадочно выглядели computed сигналы, в которых в отличие от хуков React не прописываются зависимости напрямую. Также возникали вопросы связанные с детекцией изменений. В отличие от Observable и async pipe, который использует напрямую ChangeDetectorRef, сигналы могут вызываться в шаблоне, вызывая, при этом, его изменения.

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

Читать далее

Руководство по использованию Signal в Angular 17

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров4.4K

Angular 17 представляет собой мощный инструмент для создания современных веб-приложений. С каждым новым релизом команда разработчиков добавляет новые возможности, и одним из самых интересных нововведений в Angular 17 является поддержка Signal. В этой статье мы рассмотрим, что такое Signal, как его использовать в Angular, и приведем примеры реального использования.

Читать далее

Все, что вы хотели знать про иерархию инжекторов в Angular

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров7.9K

Привет. Меня зовут Дмитрий, я фронтенд-разработчик в компании «Цифровая индустриальная платформа». В своей работе мне часто приходится использовать Dependency Injection (DI) в Angular. Это мощный и популярный инструмент, который упрощает работу с зависимостями в наших приложениях. Он позволяет легко интегрировать необходимые сущности в компоненты, упрощает процесс тестирования и поддерживает принцип инверсии зависимостей. Однако часто мы не используем все возможности DI, потому что не знаем, как он работает под капотом. Давайте разберемся, как функционирует DI, что такое иерархия инжекторов и какие изменения принесла версия Angular 14.

Читать далее

Выбор JavaScript фреймворка: Сравнение React, Angular и Vue Глазами Разработчика

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров18K

В мире фронтенд-разработки существует множество различных фреймворков, которые помогают сделать процесс создания веб-приложений более удобным и эффективным. Я являюсь частью этого мира уже более 4-х лет, сейчас занимаю должность фронтенд разработчика в компании Loyalty Labs. За все время в IT я познакомилась с разными инструментами и фреймворками, и хотела бы обсудить трёх "гигантов" в области frontend: React, Angular и Vue.

Эта статья не предназначена для того, чтобы обучать вас этим фреймворкам. Это не технический гайд. Здесь я поделюсь своим мнением, попытаюсь разобраться в особенностях и понять, чем каждый из этих "гигантов" может гордиться.

Читать далее

Как создать бесшовную текстуру на angular без инструкций и примеров

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

Привет, Хабр! Я Виталий Дуденко, разработчик в отделе пользовательских интерфейсов Первой грузовой компании. Наша компания занимается грузоперевозками по железной дороге. Для усовершенствования сервиса перевозок мы разрабатываем цифровые продукты, для которых необходимо создавать интерфейсы, например, для Личного кабинета клиента (ЛКК). Подробнее о нем мы рассказывали здесь.  

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

Читать далее

Ближайшие события

Web components как альтернатива iframe на примере Angular-компонентов

Уровень сложностиСредний
Время на прочтение12 мин
Количество просмотров6.3K

Всем привет! Я Сергей, фронтенд-разработчик из команды привлечения Центрального университета. Занимаюсь проектами, связанными с регистрацией абитуриентов на мероприятия, и внутренними проектами по управлению мероприятиями. 

Осенью мы ждем поступление бакалавров. Чтобы начать набор, нужно встроить форму регистрации в лендинг на CMS. Форма довольно простая: пара полей для ввода данных, диалоговое окно с текстом соглашения об обработке персональных данных и кнопка отправки данных на сервер. Для скорости работы и проверки работоспособности идеи решили встроить приложение через iframe. Но форма стала обрастать различными бизнес-требованиями, которые приносили проблемы. В статье расскажу, с какими трудностями мы столкнулись и как их решали.

Читать далее

Как подготовиться к удалению приложения из AppStore

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров3.5K

В этой статье расскажу как подготовиться к тому, что ваше приложение будет удалено из Appstore. Лучше приложить минимум усилий сейчас, чем спешно предпринимать действия потом. Предупрежден — значит вооружен. Сам я бы сэкономил кучу времени, если бы я наткнулся на такую статью, но, к сожалению, мне не попадалось что‑то вразумительное.

Читать далее

Docker для Angular-приложений: от простого к несложному

Уровень сложностиСредний
Время на прочтение16 мин
Количество просмотров7.6K

Привет, Хабр! Меня зовут Артём, я разрабатываю фронтенд систем управления сетью в YADRO. С Docker знаком давно и часто его использую. Но когда столкнулся с задачами, где недостаточно просто скопировать шаблонный Docker-файл и подправить пару строчек, решил больше погрузиться в эту тему. 

В статье я разберу типовые вопросы, связанные с запуском Angular-приложений в контейнерах, — это поможет в дальнейшем справиться с более замысловатыми задачами. Текст будет полезен тем, кто уже что-то знает про Docker, но не углублялся в детали или хочет освежить знания на практике.

Читать далее

Работа с событиями на стероидах

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров4.9K

Это будет познавательная статья про одну из самых интересных возможностей Angular, о которой редко вспоминают. Но также это будет и реклама нашей open-source-библиотеки. Поскольку вы, возможно, просто не знаете, насколько она вам нужна. 

За какой-то 1кБ gzip вы сможете улучшить DX во многих различных сценариях, которые мы рассмотрим ниже. Если вы уже знакомы с этой библиотекой, в статье я расскажу про пару новых возможностей.

Как Angular работает с событиями? Что происходит, когда вы пишете (click) в шаблоне? Какая магия обрабатывает клавишу Escape, когда вы подписываетесь на (keydown.esc)? Немного заглянем в исходный код и узнаем про малоизвестный публичный API и как можно использовать его себе во благо.

Читать далее

Zoneless Angular 18

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров4.4K

По праву основной фичей Angular 18 стала Zoneless Change Detection. Именно с ней так и хочется разобраться.

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

Перед тем как мы перейдем к Zoneless Change Detection, вкратце пробежимся по концепции механизма CD (Change Detection) и тому, как он реализуется с помощью zone.js.

Читать далее

Как я выстрелил себе в ногу, не соблюдая паттерны

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров20K

Всем привет, меня зовут Андрей, я — php-разработчик в wpp.digital.

Сегодня я поделюсь с вами историей. Она о том, как поверхностное понимание (или непонимание) паттернов проектирования отстрелило мне ногу. А еще поделюсь примером реализации простой истины: знание чего-то не равно умению это применять. Кстати, главным героем поэмы являюсь (неожиданная информация) я.

Кому будет полезен данный текст? В первую очередь, мне для рефлексии. Во вторую — той редкой породе новичков, которая умеет учиться на чужих ошибках. Ну и в последнюю очередь — опытным коллегам, которые могут поностальгировать по временам джуновых задач и огромных перспектив. Последние еще могут разнести в комментариях всё, что я здесь написал.

Теперь к задаче.

Читать далее

Руководство по ng-template и ngTemplateOutlet в Angular

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров8.5K

Angular предоставляет мощные инструменты для динамического создания и управления шаблонами. Среди этих инструментов ключевую роль играют директивы ng-template и ngTemplateOutlet. В этой статье мы подробно рассмотрим, что это такое, как их использовать, и какие нюансы могут возникнуть при работе с ними.

Читать далее