✨ Дополнительные возможности Angular
Вы наверняка читали миллион статей с похожим названием.
В этой статье собран список функций и советов по Angular, которые вам могут пригодиться.
👉 https://medium.com/p/cae3b8527184
Вы наверняка читали миллион статей с похожим названием.
В этой статье собран список функций и советов по Angular, которые вам могут пригодиться.
👉 https://medium.com/p/cae3b8527184
👍17🔥5
✨ Ловушка приоритетов Angular Guards
Angular может ограничивать доступ к определенному функционалу в зависимости от того, кем является пользователь. Вы можете разрешить доступ только аутентифицированным пользователям или пользователям с определенной ролью.
Дмитрий Дробышев рассказал о управлении правилами навигации.
👉 https://habr.com/ru/post/689682/
Angular может ограничивать доступ к определенному функционалу в зависимости от того, кем является пользователь. Вы можете разрешить доступ только аутентифицированным пользователям или пользователям с определенной ролью.
Дмитрий Дробышев рассказал о управлении правилами навигации.
👉 https://habr.com/ru/post/689682/
👍16🔥4
✨ Декораторы в TypeScript
Декораторы обеспечивают возможность добавления аннотаций и синтаксиса метапрограммирования.
В этой статье мы узнаем о декораторах в TypeScript, которые следуют одноименному принципу проектирования, и обеспечивают гибкое расширение функциональности.
👉 https://medium.com/p/afd9043d41f6
Декораторы обеспечивают возможность добавления аннотаций и синтаксиса метапрограммирования.
В этой статье мы узнаем о декораторах в TypeScript, которые следуют одноименному принципу проектирования, и обеспечивают гибкое расширение функциональности.
👉 https://medium.com/p/afd9043d41f6
👍7🔥1🌭1💯1
✨ Передача данных через маршрутизацию
В Angular существует множество методов передачи данных. Используя URL, мы можем сохранять информацию не только на время пользовательской сессии, но и после обновления, в закладках браузера или при передаче ссылки кому-либо еще.
В этом руководстве рассмотрены наиболее популярные возможности маршрутизации.
👉 https://indepth.dev/tutorials/angular/indepth-guide-to-passing-parameters-via-routing
В Angular существует множество методов передачи данных. Используя URL, мы можем сохранять информацию не только на время пользовательской сессии, но и после обновления, в закладках браузера или при передаче ссылки кому-либо еще.
В этом руководстве рассмотрены наиболее популярные возможности маршрутизации.
👉 https://indepth.dev/tutorials/angular/indepth-guide-to-passing-parameters-via-routing
👍9🥱2❤🔥1👌1
✨ Ускоряем процесс обучения
С версии 2, Angular прошел долгий путь. За эти годы было добавлено множество возможностей, которые сделали его сложным фреймворком.
Если вы собираетесь изучать Angular, то в этой статье рассказывается о функционале, на который стоит обратить внимание.
👉 https://www.smashingmagazine.com/2022/09/angular-guide/
С версии 2, Angular прошел долгий путь. За эти годы было добавлено множество возможностей, которые сделали его сложным фреймворком.
Если вы собираетесь изучать Angular, то в этой статье рассказывается о функционале, на который стоит обратить внимание.
👉 https://www.smashingmagazine.com/2022/09/angular-guide/
👍14👌1
✨ 5 выводов с ng-conf 2022
ng-conf — крупнейшая в мире конференция по Angular, и в начале сентября этого года она вновь прошла в Солт-Лейк-Сити. Алану посчастливилось выступать на этом мероприятии.
Вот 5 основных выводов, которые он вынес из трехдневной конференции.
👉 https://medium.com/p/a40124ca92b3
ng-conf — крупнейшая в мире конференция по Angular, и в начале сентября этого года она вновь прошла в Солт-Лейк-Сити. Алану посчастливилось выступать на этом мероприятии.
Вот 5 основных выводов, которые он вынес из трехдневной конференции.
👉 https://medium.com/p/a40124ca92b3
👍10🔥2👌1
✨ Нюансы работы с Interceptors
Все HTTP-запросы, которые инициируются HTTP-клиентом, обрабатываются Angular перехватчиками. Это мощная функция, которая позволяет вам добавлять логику во все исходящие запросы.
В статье рассматриваются способы предотвращения утечки конфиденциальной информации в сторонние API, при добавлении Authorization заголовков.
👉 https://timdeschryver.dev/blog/watch-out-what-you-expose-with-angular-interceptors
Все HTTP-запросы, которые инициируются HTTP-клиентом, обрабатываются Angular перехватчиками. Это мощная функция, которая позволяет вам добавлять логику во все исходящие запросы.
В статье рассматриваются способы предотвращения утечки конфиденциальной информации в сторонние API, при добавлении Authorization заголовков.
👉 https://timdeschryver.dev/blog/watch-out-what-you-expose-with-angular-interceptors
👍6❤1👌1
✨ Лучшие практики RxJS
Когда мы начинаем писать код используя реактивный подход, приходится сменить ментальную модель и начать думать в потоках.
Статья посвящена тому, что нужно и чего нельзя делать, когда речь идет о реактивных приложениях с RxJS в Angular.
👉 https://medium.com/p/b5ddecaf9d
Когда мы начинаем писать код используя реактивный подход, приходится сменить ментальную модель и начать думать в потоках.
Статья посвящена тому, что нужно и чего нельзя делать, когда речь идет о реактивных приложениях с RxJS в Angular.
👉 https://medium.com/p/b5ddecaf9d
👍9😐3🔥2👌1
✨ Делаем анимацию в стиле Dynamic Island
Появление динамических островов в iPhone 14 вызвало интерес у многих дизайнеров и разработчиков, в будущем нас ждет еще больше креативных анимаций.
Эта статья поможет вам создать анимацию в стиле Dynamic Island.
👉 https://williamjuan.dev/blog/dynamic-island-animations-with-popmotion-in-angular
Появление динамических островов в iPhone 14 вызвало интерес у многих дизайнеров и разработчиков, в будущем нас ждет еще больше креативных анимаций.
Эта статья поможет вам создать анимацию в стиле Dynamic Island.
👉 https://williamjuan.dev/blog/dynamic-island-animations-with-popmotion-in-angular
😐6👍4😁3👎2
✨ Принцип открытости-закрытости
Главной характеристикой любой программы является ее изменяемость, важно учитывать ее и сводить к минимуму вероятность появления трудностей из-за изменения требований бизнеса.
Если следовать некоторым проверенным принципам проектирования, одним из которых является принцип открытости-закрытости (OCP), то можно создавать программы, которое легко поддерживать, тестировать, понимать и расширять.
👉 https://medium.com/p/34f142b64bc2
Главной характеристикой любой программы является ее изменяемость, важно учитывать ее и сводить к минимуму вероятность появления трудностей из-за изменения требований бизнеса.
Если следовать некоторым проверенным принципам проектирования, одним из которых является принцип открытости-закрытости (OCP), то можно создавать программы, которое легко поддерживать, тестировать, понимать и расширять.
👉 https://medium.com/p/34f142b64bc2
👍5🔥1👌1
✨ Руководство по созданию многократно используемых форм
В веб-приложениях большое разнообразие форм, которые имеют повторяющийся набор полей. Например, поля адреса обычно присутствуют во всех формах регистрации.
В этом уроке мы узнаем, как обернуть такие поля в многоразовую форму, чтобы ее можно было использовать в любой другой форме.
👉 https://indepth.dev/tutorials/angular/indepth-guide-for-nested-and-reusable-form
В веб-приложениях большое разнообразие форм, которые имеют повторяющийся набор полей. Например, поля адреса обычно присутствуют во всех формах регистрации.
В этом уроке мы узнаем, как обернуть такие поля в многоразовую форму, чтобы ее можно было использовать в любой другой форме.
👉 https://indepth.dev/tutorials/angular/indepth-guide-for-nested-and-reusable-form
👍8🔥2
✨ Генерация текста с помощью цепей Маркова
Цепь Маркова — это последовательность событий, в которой наступление каждого события зависит только от предыдущего и не зависит от остальных.
В этом посте Саша Беспоясов реализовал генератор текста на марковских цепях.
👉 https://bespoyasov.ru/blog/text-generation-with-markov-chains/
Цепь Маркова — это последовательность событий, в которой наступление каждого события зависит только от предыдущего и не зависит от остальных.
В этом посте Саша Беспоясов реализовал генератор текста на марковских цепях.
👉 https://bespoyasov.ru/blog/text-generation-with-markov-chains/
👍9❤4
✨ Настраиваем кнопку в Angular Material
Почти во всех приложениях требуется модифицировать компоненты, предоставляемые сторонними библиотеками. Например, изменить стили или добавить недостающую функциональность.
В этом руководстве мы научимся изменять стили таким образом, чтобы они не конфликтовали с будущими обновлениями библиотек.
👉 https://indepth.dev/tutorials/angular/indepth-guide-for-customizing-angular-material-button
Почти во всех приложениях требуется модифицировать компоненты, предоставляемые сторонними библиотеками. Например, изменить стили или добавить недостающую функциональность.
В этом руководстве мы научимся изменять стили таким образом, чтобы они не конфликтовали с будущими обновлениями библиотек.
👉 https://indepth.dev/tutorials/angular/indepth-guide-for-customizing-angular-material-button
👍5🔥2
✨ Рефакторинг на максималках
Эта книга о том, как эффективно и без боли рефакторить код. В ней рассказано о различных приемах и техниках улучшения кода, а также о пользе рефакторинга для разработки и бизнеса.
Книга бесплатная и доступна на Гитхабе.
👉 https://bespoyasov.ru/blog/refactor-like-a-superhero/
Эта книга о том, как эффективно и без боли рефакторить код. В ней рассказано о различных приемах и техниках улучшения кода, а также о пользе рефакторинга для разработки и бизнеса.
Книга бесплатная и доступна на Гитхабе.
👉 https://bespoyasov.ru/blog/refactor-like-a-superhero/
👍17❤2👌2
✨ Инициализация компонентов без ngOnInit
Хук ngOnInit всегда был частью скрипта генерации компонента при использовании Angular CLI. Это привело к куче недоразумений, неправильному использованию функций и распространению анти-паттернов в кодовой базе.
Изучите различные техники для улучшения кода инициализации в компонентах.
👉 https://indepth.dev/posts/1508/structure-initialization-logic-without-ngoninit-utilize-observables-and-ngonchanges
Хук ngOnInit всегда был частью скрипта генерации компонента при использовании Angular CLI. Это привело к куче недоразумений, неправильному использованию функций и распространению анти-паттернов в кодовой базе.
Изучите различные техники для улучшения кода инициализации в компонентах.
👉 https://indepth.dev/posts/1508/structure-initialization-logic-without-ngoninit-utilize-observables-and-ngonchanges
👍12👎1🔥1👌1
✨ Делаем ретро игру
js13kgames — это ежегодное соревнование по созданию игр на JavaScript с нуля, которые умещаются в 13 килобайт.
В статье описан процесс создания игры, напоминающую ретро-эпоху портативных игр с их уникальным дизайном.
👉 https://medium.com/p/5905bf6166b2
js13kgames — это ежегодное соревнование по созданию игр на JavaScript с нуля, которые умещаются в 13 килобайт.
В статье описан процесс создания игры, напоминающую ретро-эпоху портативных игр с их уникальным дизайном.
👉 https://medium.com/p/5905bf6166b2
❤5👍2😁1
✨ Разбираем стратегии обнаружения изменений
Обнаружение изменений в Angular — это встроенная функция фреймворка, которая обеспечивает автоматическую синхронизацию между данными компонента и представлением его HTML-шаблона.
Давайте посмотрим, как они работают.
👉 https://medium.com/p/12fcd5d91ca4
Обнаружение изменений в Angular — это встроенная функция фреймворка, которая обеспечивает автоматическую синхронизацию между данными компонента и представлением его HTML-шаблона.
Давайте посмотрим, как они работают.
👉 https://medium.com/p/12fcd5d91ca4
🔥10👍3
✨ Правила Angular ESLint для доступности с клавиатуры
При использовании встроенных HTML элементов браузер изначально обеспечивает поддержку клавиатуры. Тем не менее, она часто не соблюдается для кастомных элементов.
Правила доступности помогут вам выявить некоторые из распространенных подводных камней на ранних этапах разработки.
👉 https://dev.to/angular/angular-eslint-rules-for-keyboard-accessibility-236f
При использовании встроенных HTML элементов браузер изначально обеспечивает поддержку клавиатуры. Тем не менее, она часто не соблюдается для кастомных элементов.
Правила доступности помогут вам выявить некоторые из распространенных подводных камней на ранних этапах разработки.
👉 https://dev.to/angular/angular-eslint-rules-for-keyboard-accessibility-236f
👍6👌1
✨ Манипулирование DOM в Angular
Вместо прямой работы с DOM-элементами Angular предоставляет нам набор абстракции ElementRef, TemplateRef и ViewContainerRef.
В этой статье рассмотрены способы работы с ними.
👉 https://medium.com/p/8517b7ce3274
Вместо прямой работы с DOM-элементами Angular предоставляет нам набор абстракции ElementRef, TemplateRef и ViewContainerRef.
В этой статье рассмотрены способы работы с ними.
👉 https://medium.com/p/8517b7ce3274
👍8🔥1👌1
✨ Современный CSS в Angular
В этом месяце команда Angular представила новую серию статей, в которой рассматриваются современные возможности CSS.
На этой неделе рассматриваются Layouts.
👉 https://medium.com/p/4a259dca9127
В этом месяце команда Angular представила новую серию статей, в которой рассматриваются современные возможности CSS.
На этой неделе рассматриваются Layouts.
👉 https://medium.com/p/4a259dca9127
👍6🔥1
✨ Angular Router Standalone API
Новый standalone router API позволяет уменьшить размер сборки. Но в настоящее время он находится в предварительной версии для разработчиков и станет стабильным в Angular 15.
В статье, на примере приложения со списком фильмов, разбираются будущие возможности Angular.
👉 https://medium.com/p/461547e92bbc
Новый standalone router API позволяет уменьшить размер сборки. Но в настоящее время он находится в предварительной версии для разработчиков и станет стабильным в Angular 15.
В статье, на примере приложения со списком фильмов, разбираются будущие возможности Angular.
👉 https://medium.com/p/461547e92bbc
👍9❤1