​Создание микрофронтенда на Angular с общим доступом к состояниям через NgRx и NX cli

Прочитав эту статью, вы сможете создать масштабируемое микрофронтенд-приложение с общим управлением состоянием на Angular:

https://itnext.io/building-angular-micro-frontend-with-ngrx-state-sharing-and-nx-cli-7e9af10ebd03

#angular

​Зачем использовать materialize и dematerialize операторы и что такое Notification в RxJS

Вы когда-нибудь встречали такие операторы, как materialize и dematerialize в RxJS? Вероятно, вы слышали о них, но не применяли их, потому что не до конца понимали, где они могут понадобиться.

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

https://habr.com/ru/company/skyeng/blog/661709/

#angular #rxjs

​Разбивка на страницы и фильтрация на стороне сервера Angular

В этой статье вы узнаете, как использовать RxJS для реализации разбиения на страницы и фильтрации на стороне сервера для таблицы данных в приложении Angular:

https://levelup.gitconnected.com/angular-server-side-pagination-and-filtering-2206ce8279d1

#angular

​Три слоя градиента для одного слайдера

Эта статья посвящена созданию Angular-компонента слайдера с минимальным использованием JavaScript. При этом здесь рассматривается и вопрос доступность, интересное решение с многослойным градиентом, CSS-хитрости и так далее.

Подробнее:

https://habr.com/ru/company/tinkoff/blog/667254/

#angular #фронтенд #css

​Создание прогрессивного веб-приложения с помощью Django и Angular

Прогрессивные веб-приложения (PWA) — это веб-приложения, которые используют различные методы проектирования и технологии, чтобы выглядеть и вести себя как обычные мобильные или настольные приложения.

В этом руководстве предлагается создать простую викторину в виде PWA, которая сочетает в себе лучшие аспекты как веб-приложений, так и нативных приложений, используя Python и Django для серверного API и Angular с TypeScript для внешнего интерфейса:

https://www.twilio.com/blog/build-progressive-web-application-django-angular-part-1-backend-api

#pwa #django #angular

​Dragula для Angular

Эта небольшая библиотека для Angular с не обычным названием позволяет быстро и удобно создавать drag&drop механику для ваших элементов. Попробуйте сами:

https://github.com/valor-software/ng2-dragula

#библиотека #angular

​Реализация скелета загрузки в Angular

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

В этой статье автор показал, как реализовать такой скелет с помощью Angular:

https://netbasal.com/implementing-a-loading-skeleton-in-angular-7490ffdecc1b

#angular #фронтенд

Хуки жизненного цикла компонентов Angular

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

https://medium.com/@mudit.manucha/actual-use-of-angular-lifecycle-hooks-d922680283c0

#angular #фронтенд

​Выпадающий список со встроенным поиском на Angular

Хотите создать выпадающее меню с поиском по содержимому? Это всегда удобнее, чем обычный выпадающий список для пользователя, но может быть сложно для разработчика.

В этом руководстве вы найдёте инструкцию по созданию такого компонента на Angular, который потом можно использовать в различных проектах:

https://medium.com/geekculture/implementing-a-search-bar-for-filtering-select-dropdowns-in-angular-63b1f2033737

#angular

​Создайте компонент диалогового окна, используя собственный элемент в Angular

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

https://netbasal.com/create-a-dialog-component-using-the-native-dialog-element-in-angular-321aeda2908f

#angular

​Анализ работы Guess.js в приложении Angular

Guess.js — это библиотека, разработанная Google, которая использует данные аналитики для определения, какие ресурсы должны быть предварительно загружены, чтобы ускорить загрузку страницы. В статье рассматривается процесс интеграции Guess.js в Angular приложение, а также его настройка и использование:

https://nuancesprog.ru/p/16808/

#angular #guessjs

​Как использовать React в приложениях Angular

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

О том, как это сделать:

https://nuancesprog.ru/p/16840/

#react #angular

​Простота Subject’ов, удобство NGRX: что такое компонентный стор и с чем его едят

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

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

https://habr.com/ru/companies/tinkoff/articles/735198/

#фронтенд #angular

​Внедрение зависимостей в Angular

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

Нашли для вас туториал, в котором автор объясняет простыми словами, как выполнить эту задачу, используя Angular.

#зависимости #angular

​Битва CLIs: Angular CLI против Nx

Nx — мощная система сборки, которая позволяет работать с монорепозиториями и предлагает разнообразные инструменты и библиотеки.

Автор материала в своё время решил отказаться от Angular в пользу Nx. Почему он принял такое решение, какие проблемы решает этот инструмент и чем он лучше Angular CLI можно прочитать по ссылке:

https://habr.com/ru/companies/tinkoff/articles/738654/

#angular #nx

​​Angular 17: что нового?

Разбор обновлений Angular 17, в котором рассказали о новых фичах фреймворка и изменениях в синтаксисе и рендеринге: https://tproger.ru/articles/angular-17--chto-novogo

#angular

​Как использовать React в приложениях Angular

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

О том, как это сделать:

https://nuancesprog.ru/p/16840/

#react #angular

Ваш первый проект на Angular: пошаговый видеокурс для начинающих

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

https://www.youtube.com/playlist?list=PL0lO_mIqDDFX2CXg7tZvmsY48-R5UvQ1V

А вы пробовали писать на Angular или предпочитаете другие фронтенд-фреймворки?

#angular@tproger_web #фронтенд@tproger_web

20 версий Angular за 5 лет: «незаметные» фичи, которые спасают UI-киты

На этой неделе команда Angular отметила значимый юбилей в истории развития своего фреймворка — 20-ю мажорную версию! Самое время поностальгировать и вспомнит путь развития фреймворка.

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

А какая фича Angular изменила ваш сценарий разработки?

#фронтенд #angular

От монолита к микросервисам: реальный кейс развёртывания сайта на Spring Boot + Angular SSR с Docker и Nginx

У нас на сайте появилась статья, где автор делится практическим опытом перехода от монолитного приложения к микросервисной архитектуре с использованием Spring Boot и Angular SSR. В ней подробно описаны этапы:

— настройки Docker Compose;
— интеграции Nginx;
— настройки HTTPS;
— и решения проблем с CORS.

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

#java #docker #springboot #angular #nginx