✨ Создаем плавную прокрутку в Angular
Представим, что у нас есть панель навигации для разделов страницы и нам надо реализовать прокрутку к нужному разделу. Стандартным решением было бы использование якорей, но можно применить директивы.
Давайте посмотрим, как мы можем реализовать эту функциональность с их помощью.
👉 https://medium.com/p/a657e0ea9699
Представим, что у нас есть панель навигации для разделов страницы и нам надо реализовать прокрутку к нужному разделу. Стандартным решением было бы использование якорей, но можно применить директивы.
Давайте посмотрим, как мы можем реализовать эту функциональность с их помощью.
👉 https://medium.com/p/a657e0ea9699
👍10🔥2
✨ SSR на Angular с помощью Nx
Nx — это умная, быстрая и расширяемая система сборки, которая разработана в Nrwl на основе опыта работы в Google.
В этой статье мы добавим SSR в приложение Angular в рабочем пространстве Nx, используя Angular Universal, который обеспечит рендеринг приложения на сервере.
👉 https://medium.com/p/14e2414ca532
Nx — это умная, быстрая и расширяемая система сборки, которая разработана в Nrwl на основе опыта работы в Google.
В этой статье мы добавим SSR в приложение Angular в рабочем пространстве Nx, используя Angular Universal, который обеспечит рендеринг приложения на сервере.
👉 https://medium.com/p/14e2414ca532
🔥9👍1🤯1💩1
✨ Делаем компоненты общего назначения
Вы наверное замечали, что со временем требования к компонентам растут, и в результате их сложность увеличивается, а сопровождаемость снижается. Мы мечтаем о многократном использовании, но на деле разрабатываем компоненты для конкретного случая, и в результате они не могут быть использованы повторно.
Ryan Hoffnan рассказал, как мы можем создавать универсальные компоненты, которые легко читать и поддерживать.
👉 https://medium.com/p/33cecd7a7139
Вы наверное замечали, что со временем требования к компонентам растут, и в результате их сложность увеличивается, а сопровождаемость снижается. Мы мечтаем о многократном использовании, но на деле разрабатываем компоненты для конкретного случая, и в результате они не могут быть использованы повторно.
Ryan Hoffnan рассказал, как мы можем создавать универсальные компоненты, которые легко читать и поддерживать.
👉 https://medium.com/p/33cecd7a7139
👍3👎3🔥1
✨ Тестируем с помощью Spectator
Spectator — это мощный инструмент для упрощения тестов Angular. Он поможет вам избавиться от всей грязной работы, оставив вам читабельные, изящные и оптимизированные модульные тесты.
В этом посте показано, как использовать Spectator для тестирования приложений Angular. Надеемся, это поможет вам начать использовать тесты в ваших проектах.
👉 https://medium.com/p/a125c95cf24b
Spectator — это мощный инструмент для упрощения тестов Angular. Он поможет вам избавиться от всей грязной работы, оставив вам читабельные, изящные и оптимизированные модульные тесты.
В этом посте показано, как использовать Spectator для тестирования приложений Angular. Надеемся, это поможет вам начать использовать тесты в ваших проектах.
👉 https://medium.com/p/a125c95cf24b
🔥9👍2💩1
✨ Собираем Angular самостоятельно
Обычно для создания проектов Angular применяется angular-cli, который используется для инициализации, разработки и построения приложений из командной строки.
Однако, что если мы не хотим использовать angular-cli, а хотим сами создать структуру папок, подключить нужные библиотеки и собрать проект?
👉 https://habr.com/ru/post/656529/
Обычно для создания проектов Angular применяется angular-cli, который используется для инициализации, разработки и построения приложений из командной строки.
Однако, что если мы не хотим использовать angular-cli, а хотим сами создать структуру папок, подключить нужные библиотеки и собрать проект?
👉 https://habr.com/ru/post/656529/
👍11🔥3😱1
✨ Вызываем глобальные функции в Angular
В большинстве приложений мы сталкиваемся с функциональностью, которую хотим запустить глобально. В этот момент мы часто задумываемся о том, откуда ее вызывать.
Netanel Basal рассказал, как не позволить глобальным функциям загромоздить ваши приложения.
👉 https://medium.com/p/d013faa71a
В большинстве приложений мы сталкиваемся с функциональностью, которую хотим запустить глобально. В этот момент мы часто задумываемся о том, откуда ее вызывать.
Netanel Basal рассказал, как не позволить глобальным функциям загромоздить ваши приложения.
👉 https://medium.com/p/d013faa71a
👍6🤔4🔥3❤1
✨ Разбираем стилизацию компонентов в Angular
В Angular стили компонентов могут быть инкапсулированы. Существует три различных стратегии инкапсуляции: None, Emulated и ShadowDom. Две последние позволяют нам писать масштабируемые стили, которые не просачиваются и не влияют на остальную часть нашего приложения.
Но в чем разница между ними? Давайте узнаем!
👉 https://medium.com/p/9b2c81546b85
В Angular стили компонентов могут быть инкапсулированы. Существует три различных стратегии инкапсуляции: None, Emulated и ShadowDom. Две последние позволяют нам писать масштабируемые стили, которые не просачиваются и не влияют на остальную часть нашего приложения.
Но в чем разница между ними? Давайте узнаем!
👉 https://medium.com/p/9b2c81546b85
👍8🔥5🤔1
✨ Опыт миграции на Nx
Команда Santosh Yadav закончила переход на Nx с Angular CLI в прошлом году, и это была одна из самых больших реструктуризаций, которую они провели.
В этом посте рассказано о том, почему они решили это сделать и что в итоге получилось.
👉 https://dev.to/this-is-angular/why-and-how-we-migrated-to-nx-from-angular-cli-5a61
Команда Santosh Yadav закончила переход на Nx с Angular CLI в прошлом году, и это была одна из самых больших реструктуризаций, которую они провели.
В этом посте рассказано о том, почему они решили это сделать и что в итоге получилось.
👉 https://dev.to/this-is-angular/why-and-how-we-migrated-to-nx-from-angular-cli-5a61
👍6
✨ Делаем интернет магазин
Редко можно найти описание процесса создания Angular приложения, начиная с определения предметной области и заканчивая тестированием.
К счастью, Александр Серенко недавно опубликовал цикл статей о создании интернет магазина. В котором реализованы: список товаров, корзина, чат, локализация, SEO, SSR и даже UI Kit.
👉 https://medium.com/p/9bc18c25fe37
Редко можно найти описание процесса создания Angular приложения, начиная с определения предметной области и заканчивая тестированием.
К счастью, Александр Серенко недавно опубликовал цикл статей о создании интернет магазина. В котором реализованы: список товаров, корзина, чат, локализация, SEO, SSR и даже UI Kit.
👉 https://medium.com/p/9bc18c25fe37
👍21🔥6
✨ Создаем свою библиотеку
Если вы хотите повторно использовать код в нескольких проектах, помимо создания многократно используемых компонентов, которые придется копировать и вставлять каждый раз, можно создавать свои собственные библиотеки.
Эта статья дает представление о том, как реализовать библиотеку Angular, чтобы множество приложений могли воспользоваться ее функционалом.
👉 https://medium.com/p/3965beee6dc6
Если вы хотите повторно использовать код в нескольких проектах, помимо создания многократно используемых компонентов, которые придется копировать и вставлять каждый раз, можно создавать свои собственные библиотеки.
Эта статья дает представление о том, как реализовать библиотеку Angular, чтобы множество приложений могли воспользоваться ее функционалом.
👉 https://medium.com/p/3965beee6dc6
👍15❤2🔥2
✨ Делаем слайд-шоу
В наши дни есть множество программ для создания презентаций, но если в вас живет тяга к экспериментам, у вас есть все необходимые инструменты, чтобы реализовать собственный аналог.
В этой статье мы напишем приложение для создания слайд-шоу используя Angular, Swiper и немного CSS.
👉 https://www.thisdot.co/blog/how-to-build-a-slideshow-app-using-swiper-and-angular
В наши дни есть множество программ для создания презентаций, но если в вас живет тяга к экспериментам, у вас есть все необходимые инструменты, чтобы реализовать собственный аналог.
В этой статье мы напишем приложение для создания слайд-шоу используя Angular, Swiper и немного CSS.
👉 https://www.thisdot.co/blog/how-to-build-a-slideshow-app-using-swiper-and-angular
👍7
✨ Тестируем компоненты
В Angular когда вы создаете новый компонент с помощью cli, то создается файл spec и в нем описан отличный способ быстро начать тестировать, но существую и другие подходы к тестированию компонентов.
В этой статье Michael Seemann размышляет о том, как мы пишем компонентные тесты для Angular приложений.
👉 https://medium.com/p/64d07d226bff
В Angular когда вы создаете новый компонент с помощью cli, то создается файл spec и в нем описан отличный способ быстро начать тестировать, но существую и другие подходы к тестированию компонентов.
В этой статье Michael Seemann размышляет о том, как мы пишем компонентные тесты для Angular приложений.
👉 https://medium.com/p/64d07d226bff
👍8🤬1
✨ Создаем пользовательские директивы
Если вы используете Angular, вы, вероятно, знакомы с популярными структурными директивами *ngIf и *ngFor, но есть ли в вашем коде пользовательские директивы?
Tim Deschryver показал, как можно изменить поведение сторонних библиотек, не имея доступа к коду компонента.
👉 https://timdeschryver.dev/blog/use-angular-directives-to-extend-components-that-you-dont-own
Если вы используете Angular, вы, вероятно, знакомы с популярными структурными директивами *ngIf и *ngFor, но есть ли в вашем коде пользовательские директивы?
Tim Deschryver показал, как можно изменить поведение сторонних библиотек, не имея доступа к коду компонента.
👉 https://timdeschryver.dev/blog/use-angular-directives-to-extend-components-that-you-dont-own
👍6❤2
✨ Готовимся к появлению Standalone Components
Поскольку Standalone Components самодостаточны и не нуждаются в NgModules, приложения становятся более легковесными. И возникает вопрос, как подготовить существующие решения к будущему без модулей?
В этой статье Manfred Steyer показал четыре пути, как это сделать.
👉 https://www.angulararchitects.io/en/aktuelles/4-ways-to-prepare-for-angulars-upcoming-standalone-components/
Поскольку Standalone Components самодостаточны и не нуждаются в NgModules, приложения становятся более легковесными. И возникает вопрос, как подготовить существующие решения к будущему без модулей?
В этой статье Manfred Steyer показал четыре пути, как это сделать.
👉 https://www.angulararchitects.io/en/aktuelles/4-ways-to-prepare-for-angulars-upcoming-standalone-components/
👍13
✨ Строим Micro Frontend архитектуру
Поскольку с течением времени веб становится все более сложным, микро-фронтенды приобретают большую популярность, так как позволяют разрабатывать приложения отдельными командами.
В этой статье мы совместно с Денисом Манило создадим приложение с микро-фронтенд архитектурой.
👉 https://habr.com/ru/company/auriga/blog/659199/
Поскольку с течением времени веб становится все более сложным, микро-фронтенды приобретают большую популярность, так как позволяют разрабатывать приложения отдельными командами.
В этой статье мы совместно с Денисом Манило создадим приложение с микро-фронтенд архитектурой.
👉 https://habr.com/ru/company/auriga/blog/659199/
👍11🔥2
✨ Обрабатываем деревья
Если поискать, то можно найти древовидные структуры повсюду — от природы, городов и их окрестностей до вашего семейного древа. Неудивительно, что деревья так же часто встречаются в структурах данных.
В этой серии уроков, мы с Робом Гравель будем преобразовывать сложное дерево в более простое, а затем обратно.
👉 https://www.htmlgoodies.com/javascript/recursive-tree-node-angular/
Если поискать, то можно найти древовидные структуры повсюду — от природы, городов и их окрестностей до вашего семейного древа. Неудивительно, что деревья так же часто встречаются в структурах данных.
В этой серии уроков, мы с Робом Гравель будем преобразовывать сложное дерево в более простое, а затем обратно.
👉 https://www.htmlgoodies.com/javascript/recursive-tree-node-angular/
👍8
🔥 Новости о Standalone Components
Недавно команда Angular опубликовала RFC, с амбициозной целью: сократить количество шаблонов и сделать Angular проще в использовании и изучении.
На этой неделе выпустили второй RFC, в котором обсуждается, как Standalone Components будут интегрированы в остальную часть Angular.
Alex Rickabaugh рассказал об обновлении проекта, о некоторых извлеченных уроках, и о ближайшем будущем.
👉 https://medium.com/p/ea53b4d55214
Недавно команда Angular опубликовала RFC, с амбициозной целью: сократить количество шаблонов и сделать Angular проще в использовании и изучении.
На этой неделе выпустили второй RFC, в котором обсуждается, как Standalone Components будут интегрированы в остальную часть Angular.
Alex Rickabaugh рассказал об обновлении проекта, о некоторых извлеченных уроках, и о ближайшем будущем.
👉 https://medium.com/p/ea53b4d55214
🔥12👍2
🦄 Осваиваем RxJS
У RxJS отличная документация, в которой немного теории и его легко понять с помощью marble diagrams, а еще лучше изучать его на практике.
Эта статья посвящена советам и подсказкам, которые помогут вам в разработке на Angular.
👉 https://medium.com/p/afd9fbdc4d31
У RxJS отличная документация, в которой немного теории и его легко понять с помощью marble diagrams, а еще лучше изучать его на практике.
Эта статья посвящена советам и подсказкам, которые помогут вам в разработке на Angular.
👉 https://medium.com/p/afd9fbdc4d31
👍14🔥7
✨ Стилизуем компоненты
Существуют различные подходы к стилизации компонентов. Angular вдохновлен основными концепциями веб-компонентов. Поэтому он использует идеи из Shadow DOM.
В работе часто требуется применять различные стили к компонентам в зависимости от условий. Как мы можем сделать это, не переписывая стили?
👉 https://medium.com/p/3eb9794bf86f
Существуют различные подходы к стилизации компонентов. Angular вдохновлен основными концепциями веб-компонентов. Поэтому он использует идеи из Shadow DOM.
В работе часто требуется применять различные стили к компонентам в зависимости от условий. Как мы можем сделать это, не переписывая стили?
👉 https://medium.com/p/3eb9794bf86f
👍9🔥3
✨ CSS-in-JS в Angular
CSS-in-JS пользуется популярностью в React сообществе, большинство решений изначально разрабатывались для него. В Angular и Vue он не популярен, но существуют и framework agnostic библиотеки.
Всеволод Золотов скрестил CSS-in-JS с Angular, на примере приложения для учета времени, и проверил насколько актуален этот подход.
👉 https://habr.com/ru/company/bimeister/blog/659273/
CSS-in-JS пользуется популярностью в React сообществе, большинство решений изначально разрабатывались для него. В Angular и Vue он не популярен, но существуют и framework agnostic библиотеки.
Всеволод Золотов скрестил CSS-in-JS с Angular, на примере приложения для учета времени, и проверил насколько актуален этот подход.
👉 https://habr.com/ru/company/bimeister/blog/659273/
👍13👎3🔥3
✨ Результаты опроса разработчиков
В начале года команда Angular провела ежегодный опрос разработчиков, получив почти 25 тысяч ответов. На их основе разрабатывается документация, расставляются приоритеты и составляется план развития.
Minko Gechev рассказал о результатах опроса и как они соотносятся с дорожной картой Angular.
👉 https://medium.com/p/38e653cbb36b
В начале года команда Angular провела ежегодный опрос разработчиков, получив почти 25 тысяч ответов. На их основе разрабатывается документация, расставляются приоритеты и составляется план развития.
Minko Gechev рассказал о результатах опроса и как они соотносятся с дорожной картой Angular.
👉 https://medium.com/p/38e653cbb36b
👍12