Обновить
21.76

Angular *

JavaScript-фреймворк

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

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

Читать далее

Zoneless Angular 18

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

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

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

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

Читать далее

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

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

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

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

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

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

Читать далее

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

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

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

Читать далее

ng-container

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

ng-container в Ангулар - это структурная директива в Angular, которая позволяет создавать группы элементов без добавления дополнительного узла в DOM. Это полезно, когда нужно применить директиву или использовать условные конструкции или циклы *ngFor для группы элементов, но при этом не добавлять лишних тегов в разметку.

ng-container не является компонентом и не создает своего собственного экземпляра, поэтому к нему не получится доступ через ViewChild или ContentChild. Он просто действует как контейнер для элементов, которые вы хотите группировать. Поэтому вместо того чтобы использовать <div> который будет рендериться в дереве компонента при сборке и занимать лишнее место лучше использовать ng-container - собственно это и есть его суть!

Читать далее

Мой опыт миграции приложения на standalone-компоненты

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

Всем привет! Меня зовут Антон Горелов, я фронтенд-разработчик в Selectel. Заметил, что часто в сообществе при рефакторинге или написании приложения с нуля возникает вопрос применения одного из двух подходов. Первый — «все делаем через модули, они прекрасно работают, не надо ничего нового». Второй — «есть standalone-компоненты, супер, используем новый инструмент».

В этом тексте поделюсь своим опытом применения обоих подходов. Расскажу, что дают standalone-компоненты, на что стоит обратить внимание в процессе миграции и тестирования и когда использовать standalone, а когда стоит все же остаться на модулях. Материал будет полезен фронтенд-разработчикам уровня Junior+ и Middle. Ниже опишу сценарии, с которыми чаще всего сталкивался лично, и обобщу свой опыт.
Читать дальше →

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

Standalone в Angular

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

Angular, один из самых популярных фреймворков для разработки одностраничных приложений (SPA), постоянно развивается, добавляя новые возможности и улучшая существующие. Одной из таких новых возможностей стали Standalone компоненты, представленные в Angular 14.

Читать далее

Декомпозиция — ваша суперсила

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

Можно долго изучать Angular, оттачивая навыки работы с разными аспектами фреймворка, разбирая паттерны и лучшие практики. Но в конце концов, когда вы станете мастером своего дела, всегда останется умение, которое можно улучшать бесконечно: способность декомпозировать сложные задачи на удобоваримые куски. Это одно из самых важных качеств хорошего архитектора. Если вы чувствуете уверенность в своих знаниях сеньора, я советую вам направить усилия в этом направлении для дальнейшего роста.

В статье выберем сложную задачу и разберемся, как подойти к ней учитывая будущую поддержку и расширение возможностей. Я разрабатываю библиотеку компонентов Taiga UI много лет и успел отхватить свою долю ошибок, инсайтов и полезного опыта. Я думаю, хорошим примером для изучения могут послужить выпадашки: всплывающие элементы, такие как дропдауны или подсказки.

Читать далее

RxJs для самых маленьких

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

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

Читать далее

Кто ещё здесь не разрабатывал русский BI?

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

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

Сегодня — это руководитель и senior fullstack Марк Локшин. В этой беседе мы обсуждаем о заходе в тему разработки собственного инструмента Business Intelligence. Тема недвусмысленно намекает на то, что данная тема уже не раз была описана на соответствующих ресурсах, а российский рынок даже после ухода с него западных вендоров обладает собственным набором вполне зрелых и рабочих решений.

Собственно, откуда у нас появилась такая задача? Конечно же от заказчиков. А заказчики у нас чаще специфические: государственные и около организации, администрации субъектов регионов. У этих «ребят» чаще всего основная задача показать большому начальнику на совещании красивый график и отчитаться, как же все классно поработали, у особенных из этих заказчиков предъявлены жесткие требования к инструментам разработки.

Поехали

Что будет в Angular 18?

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

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

Планируется, что Angular 18 будет выпущен в мае 2024 года, и уже есть несколько подтвержденных функций для включения в предстоящую версию, которые мы рассмотрим в данном материале.

Читать далее

Скрытый потенциал функции inject в Angular

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

Привет! В этой заметке покажу, как можно использовать функцию inject на сто процентов.

Обычно ведь как: если функцией inject и пользуются, то только для того, чтобы заменить инжект через конструктор. Удобно, конечно. Но что, если я скажу, что это не всё, на что способна функция inject? Давайте посмотрим на паре примеров, как ещё её можно использовать.

Читать далее

Поверхностный анализ работы DOM на библиотеках JavaScript

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

Приветствую Вас, дорогие читатели Хабр! В данной статье мы рассмотрим работы DOM на таких библиотеках JavaScript, как Vue, React, Angular. Материал поможет понять принцип работы, конечно, самый лучший способ разобраться в той или иной теме — это практика. В этой статье будут приведены несколько примеров для лучшего понимания материала.

Читать далее