Angular

  • ХабрахабрФото Как сделать декларативный роутинг диалогов в Angular на примере Taiga UI

    Как сделать декларативный роутинг диалогов в Angular на примере Taiga UI

    Привет! Я Дима, разработчик онлайн-бухгалтерии. Предлагаю на примере простой задачи разобрать два подхода к созданию модальных окон, связанных с url: императивный и декларативный. Часто на фронтенде нужно открывать модальные окна по определенному пути. Из коробки ангуляр не предоставляет такой возможности, так же как и популярные ui-kit-библиотеки. И разработчики каждый раз ищут способ, как это сделать. Условие задачи Нужно открыть по…

    Читать далее »
  • ХабрахабрФото Архитектура front-end приложений — react, react native, angular. Обзор

    Архитектура front-end приложений — react, react native, angular. Обзор

    Предисловие Начнем цикл статей нашей компании легко и непринужденно, с темы из мира front-end. Надеюсь, что статья будет полезна тем, кто хоть как то связан с миром front-end. Предупреждаю, что backend разработчикам может быть скучновато из-за того, что у них давно все стандартизировано 🙂 Когда я провожу собеседование на позицию React разработчика, обычно задаю общий вопрос об архитектуре - "как…

    Читать далее »
  • ХабрахабрФото Кастомная стратегия виртуального скроллинга для просмотра pdf

    Кастомная стратегия виртуального скроллинга для просмотра pdf

    Angular CDK имеет широкие возможности для скроллинга плоского списка. Если размер каждого элемента одинаков, то можно воспользоваться FixedSizeVirtualScrollStrategy: всего лишь нужно прокинуть размер элемента в пикселях, проитерироваться по данным и виртуальный скроллинг готов. Но что делать, если размер элементов разный? Данную проблему можно решить кастомной стратегией виртуального скроллинга. Введение Для моей задачи требовалось реализовать просмотрщик pdf-документа. Решение pdf.js не подходило,…

    Читать далее »
  • ХабрахабрФото Подборка материалов для погружения в Angular: выбор сотрудников Selectel

    Подборка материалов для погружения в Angular: выбор сотрудников Selectel

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

    Читать далее »
  • ХабрахабрФото Год Тигра в Taiga UI

    Год Тигра в Taiga UI

    В предновогодней суете мы любим подводить итоги уходящего года. Эта хорошая традиция помогает вспомнить свои успехи и неудачи, чтобы взять верный курс в новом году.  Весь год я участвовал в разработке потрясающего продукта — Taiga UI. Это библиотека компонентов на Angular, на которой построены сотни продуктов Тинькофф и много других проектов. Наша команда потратила много времени и сил — расскажу, что…

    Читать далее »
  • ХабрахабрФото Redux в Angular. Туда и обратно

    Redux в Angular. Туда и обратно

    Пару лет назад из каждого утюга можно было услышать про Redux. Сейчас redux является чем-то обыденным в фронтенд разработке. На пороге 2023 года я хочу поделиться своим опытом использования redux в Angular, поговорить о разных реализациях, и рассказать к каким выводам я пришел за это время. Статья разбита на три блока: Введение, где я описываю процесс написания статьи. Все про…

    Читать далее »
  • ХабрахабрФото (Микро)фронтенды и микросервисы с помощью Webpack

    (Микро)фронтенды и микросервисы с помощью Webpack

    Привет! Меня зовут Максим, я фронтенд-разработчик компании Тинькофф, лид команды фронтендов, которые пилят международные проекты. Я работал как фронтом, так и бэкером — это дало мне релевантный опыт и в микрофронтендах в том числе. Статья будет о фронтендах, но сначала предлагаю немного обсудить монолиты. Они бывают разные. Зачем пилить монолит Когда есть команда, поддерживающая один большой продукт, и этот продукт…

    Читать далее »
  • ХабрахабрФото [Перевод] Как использовать QueryParamsHandling в Angular

    [Перевод] Как использовать QueryParamsHandling в Angular

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

    Читать далее »
  • ХабрахабрФото Разработка на Angular под SmartTV: история одной фичи

    Разработка на Angular под SmartTV: история одной фичи

    Всем привет. Меня зовут Ярослав Карманников, я разработчик команды SmartTV/Web в онлайн-кинотеатре KION МТС Digital. Это четвертая часть сериала, посвященного фиче Autoplay в нашем кинотеатре. Сегодня обсудим нюансы реализации фичи на платформе SmartTV: я расскажу о том, как мы внедряли автоплей, с какими трудностями столкнулись и как их решали. Если вы пропустили предыдущие серии – два слова о том, что…

    Читать далее »
  • ХабрахабрФото [Перевод] Использование директивы NgOptimizedImage для реализации загрузки изображений в Angular

    [Перевод] Использование директивы NgOptimizedImage для реализации загрузки изображений в Angular

    Директива NgOptimizedImage в Angular отвечает за реализацию загрузки изображений, сохраняя высокую производительность. Она доступна в Angular v14. 2. 0. Директива помечена как standalone и может быть импортирована в standalone компоненты и модули. Чтобы ее использовать, мы должны заменить атрибут src Вашего изображения на rawSrc: import from '@angular/common'; @Component({ standalone: true, imports: [NgOptimizedImage], template: ` <!-- видимая область страницы --> <img…

    Читать далее »


Кнопка «Наверх»