Обновить
21.64

Angular *

JavaScript-фреймворк

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

Интеграция чат-бота Dialogflow с Angular-приложением

Время на прочтение5 мин
Количество просмотров3.9K
Существует множество публикаций о разработке чат-ботов с использованием возможностей платформы Dialogflow. Но для выхода на решение, которое применимо на практике, просто создать бота недостаточно. Бота надо подключить к веб-интерфейсу. Это — интересная и сложная задача. Чат-боты используются в различных веб-проектах, в том числе тех, которые созданы с использованием Angular — популярного, постоянно развивающегося фреймворка для разработки веб-приложений. Сегодня мы поговорим о том, как интегрировать чат-бота Dialogflow с Angular-приложением.


Читать дальше →

RxJS и Angular: искусство отписки от уведомлений

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

Если вы используете Angular и библиотеку RxJS, здесь вы узнаете все способы, которые вам могут понадобиться, чтобы подписываться на уведомления от объектов Observable и отписываться от них!

Мы используем RxJS во всех приложениях Angular, которые пишем. RxJS оказывает значительное влияние на поток данных в наших приложениях, их производительность и многое другое.

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

Начнем с создания демонстрационного сервиса (DummyService), которой поможет нам отслеживать устанавливаемые подписки.

Читать далее

Schedulers в RxJS

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

Что вы знаете о Schedulers в RxJS? Они скрывают от разработчиков работу с контекстом выполнения Observable. Как те эльфы-домовики из Гарри Поттера, которые выполняют всю черную работу в Хогвартсе, а о них никто даже и не слышал. Давайте исправим это и узнаем о них чуть больше.

Читать далее

Добро пожаловать в Angular 11

Время на прочтение6 мин
Количество просмотров15K
Специально к старту нового потока курса «Fullstack веб-разработчик на JavaScript» представляем вам обзор новой версии популярного фреймворка JavaScript — Angular. 11.0.0 версия уже доступна, и в ней есть отличные обновления, которые затрагивают всю платформу, включая сам фреймворк, библиотеку компонентов и инструменты командной строки. Давайте посмотрим, что в этом релизе.


Приятного чтения!

Как мы распилили монолит. Часть 3, Frame Manager без фреймов

Время на прочтение6 мин
Количество просмотров4.7K
Привет. В прошлой статье я рассказал про Frame manager — оркестратор фронтовых приложений. Описанная реализация решает многие проблемы, но в ней есть недостатки.

Из-за того, что приложения грузятся в iframe, появляются проблемы с версткой, некорректно работают плагины, клиенты по-прежнему скачивают два бандла с Ангуляром, даже если версии Ангуляра в приложении и Frame Manager’е одинаковые. Да и использовать iframe в 2020 году кажется моветоном. А что, если отказаться от фреймов и загружать все приложения в один window?

Оказалось, это возможно, и сейчас я расскажу, как это реализовать.


Читать дальше →

Декларативный подход в Angular

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

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

Если говорить кратко, в compliant-механизме для обеспечения его технических характеристик используют деформацию. В то время как в традиционной технике (rigid body) гибкость зачастую является негативным качеством материала, сompliant-механизмы используют ее для передачи силы и движения в нужном направлении, вместо соединений из нескольких подвижных деталей.

Узнать, к чему это я

Обновления в смотрелке логов

Время на прочтение2 мин
Количество просмотров4K
Хотел бы поделиться с Вами рядом обновлений «смотрелки» для логов chipmunk. Описание займет не больше 2-х минут Вашего времени, но меж тем новые возможности могут оказаться весьма полезным подспорьем в Вашей повседневной работе.
Читать дальше →

Создание микросервисной архитектуры с использованием single-spa (миграция существующего проекта)

Время на прочтение14 мин
Количество просмотров22K
image

Это первая статья по в данной теме, всего их планируется 3:

  1. * Создание root application из вашего существующего проекта, добавление в него 3 микро-приложения (vue, react, angular)
  2. Общение между микро-приложениями
  3. Работа с git (deploy, обновления)

Оглавление


  1. Общая часть
  2. Зачем это нужно
  3. Создание root контейнера (определение см. ниже) из вашего монолита
  4. Создаем микро-приложение VUE (vue-app)
  5.  Создаем микро-приложение REACT (react-app)
  6.  Создаем микро-приложение ANGULAR (angular-app)

1. Общая часть


Задача этой статьи: добавить возможность использовать существующий монолитный проект как root контейнер для микросервисной архитектуры.
Читать дальше →

Давайте сделаем переиспользуемый компонент tree view в Angular

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

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

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

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

Давайте сделаем

Превращаем реактивные формы Angular в строго типизированные за одну минуту

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

Привет, Хабр! Представляю вашему вниманию перевод статьи "Convert into Strongly Typed Angular Forms in a Minute" автора Ajay Ojha.



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

Читать дальше →

Возможности Angular DI, о которых почти ничего не сказано в документации

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

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

Читать далее

Простые TypeScript-хитрости, которые позволят масштабировать ваши приложения бесконечно

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

Мы используем TypeScript, потому что это делает разработку безопаснее и быстрее.

Но, на мой взгляд, TypeScript из коробки содержит слишком много послаблений. Они помогают сэкономить немного времени JavaScript-разработчикам при переходе на TS, но съедают очень много времени в долгосрочной перспективе.

Я собрал ряд настроек и принципов для более строгого использования TypeScript. К ним нужно привыкнуть один раз — и они сэкономят массу времени в будущем.

Сэкономить время в будущем

5 советов для прокачки своих навыков в Angular

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

Этим летом мы с Ромой запустили серию твитов с полезными советами и приемами по Angular. Сообщество тепло встретило эту инициативу, и я решил написать обобщающую статью.

Вот мои 5 рекомендаций, которыми хочется поделиться с разработчиками. Эти советы будут подкреплены конкретными примерами из моего твиттера. Они помогут вам поднять свои навыки или как минимум дадут пару практических приемов.

Читать далее

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

Angular Meetup #18: как это было

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

3 сентября мы провели 18-й Angular Meetup. В этот раз все доклады были объединены общей темой: говорили о разных аспектах производительности Angular-приложений.

Из-за пандемии сами знаете чего наша жизнь сильно изменилась и по большей части не к лучшему. Но есть и хорошие новости: никогда раньше международные мероприятия и мировые эксперты не были так доступны и близки. Мы тоже решили извлечь максимум из жизни онлайн и на 18-й Angular Moscow пригласили двух зарубежных экспертов со статусом GDE.

В посте вы найдете тезисы и видео докладов, а также ссылку на страницу с презентациями.

Читать далее

Angular 9. Перезапуск guard-ов текущей страницы. Trigger current route guards

Время на прочтение7 мин
Количество просмотров6.3K
Столкнулся с необходимостью перезапустить guard-ы для текущей страницы, вне зависимости от того какая страница открыта.

Стандартного решения не нашел, а предлагаемые в интернете ограничиваются одной страницей. Поэтому написал своё и решил им поделиться.

Описание кейса


Страницы приложения разделяются на 3 группы:

  • Только для авторизованных пользователей
  • Только для неавторизованных пользователей
  • Для любых пользователей

Авторизоваться или выйти можно на любой странице.

Если вход/выход производится на странице с ограниченным доступом, то нужно перейти на разрешенную страницу.

Если на странице без ограничений, то нужно остаться на текущей странице.
Читать дальше →

Обновления в Chipmunk

Время на прочтение2 мин
Количество просмотров1.7K
Рад представить Вашему вниманию некоторые обновления «смотрелки» для логов chipmunk. Где-то стало удобнее, где-то практичнее, но обо всем по порядку… Под катом будет коротко, но интересно.
Читать дальше →

Поиск лучшего фронтенд-инструмента 2021 года

Время на прочтение5 мин
Количество просмотров18K
Любой, кто начинает карьеру в сфере разработки программного обеспечения, скорее всего столкнётся с задачей выбора первого языка, фреймворка или набора инструментов. Уверен, каждому из вас это знакомо. Ответ на вопрос о том, что нужно изучать самым первым, найти не так уж и просто. Всё дело в том, что в индустрии программирования существует очень много языков и вспомогательных инструментов. Для того чтобы облегчить выбор инструментов тем программистам, которые нацелены на фронтенд-разработку с использованием JavaScript, я решил рассказать о трёх популярных JS-инструментах.



Речь пойдёт об Angular, React и Vue. Сначала я приведу материалы некоторых исследований, что поможет нам понять «расстановку сил» на арене современной веб-разработки. А потом расскажу о преимуществах и недостатках этих инструментов.
Читать дальше →

Дружим Angular с Google

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

Дружим Angular с Google


Google ненавидит SPA


Когда мы говорим про современные интернет магазины, мы представляем себе тяжелые для понимания серверы, рендрящие тысячи статических страничек. Причем именно эти тысячи отрендеренных страниц одна из причин почему Single Page Applications не прижились в электронной коммерции. Даже крупнейшие магазины электронной коммерции по-прежнему выглядят как куча статических страниц, для пользователя это нескончаемый цикл кликов, ожидания и перезагрузки страниц.

Читать дальше →

i18n в Angular

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

Angular i18n


Цель статьи — это описать детальные шаги интернационализации вашего приложения на Angular с помощью родного функционала.


На входе мы имеем коммерческое приложение. Как традиционно положено сначала сделали, запустили, а потом решили что ой, у нас же есть другие рынки, нужно срочно перевод сделать. Обычная история, пальцев рук не хватит посчитать сколько раз такое было. Но так же все знают что решения по интернационализации необходимо закладывать в архитектуру приложения с самого начала, потому что потом очень тяжело добавить i18n в готовое приложение. Но все же...

Читать дальше →

Что можно положить в механизм Dependency Injection в Angular?

Время на прочтение5 мин
Количество просмотров22K
Почти каждый разработчик на Angular может найти в Dependency Injection решение своей проблемы. Это хорошо было видно в комментариях к моей прошлой статье. Люди рассматривали различные варианты работы с данными из DI, сравнивали их удобство для той или иной ситуации. Это здорово, потому что такой простой инструмент дает нам столько возможностей.

Но несколько человек отписались мне, что им тяжело понять DI и его возможности в Angular. В интернете не так уж много материалов о том, как использовать DI эффективно, и для многих разработчиков он сводится к работе с глобальными сервисами или передачей глобальных данных из корня приложения в компоненты.

Давайте посмотрим на этот механизм в Angular чуть глубже.