✨ Динамическая загрузка компонентов
В Angular вы можете показывать различные компоненты или даже части шаблонов условно, используя встроенные директивы, такие как *ngIf. Использование *ngIf работает, когда количество условных изменений шаблона невелико, но что если представление имеет много изменений?
После прохождения этого туториала у вас будет приложение на Angular, которое отображает уникальный контент для аутентифицированного пользователя.
👉 https://developer.okta.com/blog/2021/12/08/angular-dynamic-components
В Angular вы можете показывать различные компоненты или даже части шаблонов условно, используя встроенные директивы, такие как *ngIf. Использование *ngIf работает, когда количество условных изменений шаблона невелико, но что если представление имеет много изменений?
После прохождения этого туториала у вас будет приложение на Angular, которое отображает уникальный контент для аутентифицированного пользователя.
👉 https://developer.okta.com/blog/2021/12/08/angular-dynamic-components
✨ Реактивные формы
Давайте рассмотрим различные способы создания реактивных форм в Angular, сосредоточившись на цепочках зависимостей. Если FormControl управляет другим FormControl, который, в свою очередь, управляет третьим FormControl, все быстро становится беспорядочным.
Stephan Rauh показал, как можно работать с формами неправильно и как делать это лучше.
👉 https://www.beyondjava.net/reactive-forms-validation-formulas
Давайте рассмотрим различные способы создания реактивных форм в Angular, сосредоточившись на цепочках зависимостей. Если FormControl управляет другим FormControl, который, в свою очередь, управляет третьим FormControl, все быстро становится беспорядочным.
Stephan Rauh показал, как можно работать с формами неправильно и как делать это лучше.
👉 https://www.beyondjava.net/reactive-forms-validation-formulas
✨ Советы по NgRx
NgRx предоставляет возможность реализовать одну и ту же функциональность множеством разных способов. Некоторые из этих способов со временем превратились в лучшие практики, которые позволяют повысить качество кода, производительность и удобство сопровождения.
Marko Stanimirović собрал список советов и лучших практик по использованию библиотек @ngrx/store и @ngrx/effects.
👉 https://dev.to/this-is-angular/ngrx-tips-i-needed-in-the-beginning-4hno
NgRx предоставляет возможность реализовать одну и ту же функциональность множеством разных способов. Некоторые из этих способов со временем превратились в лучшие практики, которые позволяют повысить качество кода, производительность и удобство сопровождения.
Marko Stanimirović собрал список советов и лучших практик по использованию библиотек @ngrx/store и @ngrx/effects.
👉 https://dev.to/this-is-angular/ngrx-tips-i-needed-in-the-beginning-4hno
✨ 5 удивительных возможностей Angular
Angular отлично подходит для разработки корпоративного программного обеспечения с большой кодовой базой. А каждая большая кодовая база со временем ухудшается, обычно из-за того, что некоторые практики программирования со временем оказываются неприемлемыми.
Radek Busa представил пять простых и аккуратных приемов для рефакторинга вашей кодовой базы.
👉 https://levelup.gitconnected.com/5-angular-features-you-might-not-have-known-about-d809babb51a4
Angular отлично подходит для разработки корпоративного программного обеспечения с большой кодовой базой. А каждая большая кодовая база со временем ухудшается, обычно из-за того, что некоторые практики программирования со временем оказываются неприемлемыми.
Radek Busa представил пять простых и аккуратных приемов для рефакторинга вашей кодовой базы.
👉 https://levelup.gitconnected.com/5-angular-features-you-might-not-have-known-about-d809babb51a4
🦄 Новогодняя история телеграм-бота
Ребята из Tinkoff написали небольшую игру по мотивам фильма «Один дома» на NestJS и поделились опытом её создания.
Игроки будут две недели помогать Кевину программировать устройства в умном доме, чтобы разрушить планы грабителей.
Если вам нравится решать головоломки, то вы точно сможете помочь Кевину!
👉 https://habr.com/ru/company/tinkoff/blog/596287/
Ребята из Tinkoff написали небольшую игру по мотивам фильма «Один дома» на NestJS и поделились опытом её создания.
Игроки будут две недели помогать Кевину программировать устройства в умном доме, чтобы разрушить планы грабителей.
Если вам нравится решать головоломки, то вы точно сможете помочь Кевину!
👉 https://habr.com/ru/company/tinkoff/blog/596287/
👍1
✨ Краткое руководство по Angular и GraphQL
За последние 5 лет GraphQL зарекомендовал себя как наиболее популярная альтернатива REST API. Он обеспечивает гибкий способ реализации API, который можно расширять, не ломая существующих клиентов.
В этом руководстве Holger Schmitz, на примере приложения по «Звездным войнам», показал как использовать GraphQL в Angular.
👉 https://developer.okta.com/blog/2021/10/22/angular-graphql
За последние 5 лет GraphQL зарекомендовал себя как наиболее популярная альтернатива REST API. Он обеспечивает гибкий способ реализации API, который можно расширять, не ломая существующих клиентов.
В этом руководстве Holger Schmitz, на примере приложения по «Звездным войнам», показал как использовать GraphQL в Angular.
👉 https://developer.okta.com/blog/2021/10/22/angular-graphql
✨ Angular Material Theming System: Полное руководство
В последних выпусках Angular Material был переработан API SASS для создания тем.
В этом руководстве мы создадим проект с Angular Material, добавим в него пользовательскую тему, разберем некоторые важные миксины, разберемся с типографикой, реализуем ленивую загрузку темы, чтобы она загружалась только тогда, когда это необходимо.
👉 https://indepth.dev/tutorials/angular/angular-material-theming-system-complete-guide
В последних выпусках Angular Material был переработан API SASS для создания тем.
В этом руководстве мы создадим проект с Angular Material, добавим в него пользовательскую тему, разберем некоторые важные миксины, разберемся с типографикой, реализуем ленивую загрузку темы, чтобы она загружалась только тогда, когда это необходимо.
👉 https://indepth.dev/tutorials/angular/angular-material-theming-system-complete-guide
✨ Скрытие информации в Angular
Главная особенность SPA — это то, что весь код приложения грузится на клиент, это делает приложение отзывчивее, но при этом полностью открытым. SPA может раскрыть: конфигурацию системы, API запросы, явно прописанные данные (ключи, логины, пароли) и т.д.
В статье, на примере Angular приложения, показывается как получить полезные данные и описаны способы защиты.
👉 https://habr.com/ru/company/nspk/blog/597097/
Главная особенность SPA — это то, что весь код приложения грузится на клиент, это делает приложение отзывчивее, но при этом полностью открытым. SPA может раскрыть: конфигурацию системы, API запросы, явно прописанные данные (ключи, логины, пароли) и т.д.
В статье, на примере Angular приложения, показывается как получить полезные данные и описаны способы защиты.
👉 https://habr.com/ru/company/nspk/blog/597097/
Кто-то от моего имени и имени Кира клянчит битки — не ведитесь 👇
👍2
Forwarded from kirjs_ru
⚠️ Осторожно мошенники⚠️
Тут кто-то взял имя @kirjc поставил мою аватарку и имя и просит деньги в долг.
Это не я, не давайте и шлите в спам
upd: Говорят что от имени Лиса тоже присылают
Пока предположительно человек брал контакты из @kirjs_ru_chat, если вам написали а вы не оттуда, пожалуйста отпишитесь тут.
(Добавил еще скрин в комменте)
Тут кто-то взял имя @kirjc поставил мою аватарку и имя и просит деньги в долг.
Это не я, не давайте и шлите в спам
upd: Говорят что от имени Лиса тоже присылают
Пока предположительно человек брал контакты из @kirjs_ru_chat, если вам написали а вы не оттуда, пожалуйста отпишитесь тут.
(Добавил еще скрин в комменте)
✨ Как использовать ngx-formly в Angular
Как часто вы создаете формы? Приходила ли вам идея улучшить этот процесс? Ngx-formly — это библиотека динамических форм для Angular, которая поможет вам легко реализовать формы и добавлять к ним специфическую валидацию.
В этой статье вы узнаете, как использовать, настраивать и кастомизировать ngx-formly.
👉 https://indepth.dev/tutorials/angular/how-to-use-ngx-formly-with-angular
Как часто вы создаете формы? Приходила ли вам идея улучшить этот процесс? Ngx-formly — это библиотека динамических форм для Angular, которая поможет вам легко реализовать формы и добавлять к ним специфическую валидацию.
В этой статье вы узнаете, как использовать, настраивать и кастомизировать ngx-formly.
👉 https://indepth.dev/tutorials/angular/how-to-use-ngx-formly-with-angular
👍1
✨ Порядок операторов в RxJS
Операторы — это важные элементы RxJS, которые позволяют легко писать сложный код в декларативном стиле. Они атомарны и очень просты, но могут объединяться в сложные последовательности, в которых легко допустить ошибку.
Вербило Александр разобрал варианты последовательностей в RxJS, показал типичные ошибки в них и как валидировать их порядок.
👉 https://habr.com/ru/post/598151/
Операторы — это важные элементы RxJS, которые позволяют легко писать сложный код в декларативном стиле. Они атомарны и очень просты, но могут объединяться в сложные последовательности, в которых легко допустить ошибку.
Вербило Александр разобрал варианты последовательностей в RxJS, показал типичные ошибки в них и как валидировать их порядок.
👉 https://habr.com/ru/post/598151/
✨ Меню с использованием динамических данных
В этом туториале мы узнаем, как создавать вложенные меню на основе динамических данных.
Сначала изучим основы Angular Material Menu и узнаем, как отобразить вложенное меню с помощью статичного HTML-шаблона.
Затем поймем, какие изменения необходимы для динамического рендеринга вложенных меню на основе данных.
👉 https://indepth.dev/tutorials/angular/angular-material-nested-menu-dynamic-data
В этом туториале мы узнаем, как создавать вложенные меню на основе динамических данных.
Сначала изучим основы Angular Material Menu и узнаем, как отобразить вложенное меню с помощью статичного HTML-шаблона.
Затем поймем, какие изменения необходимы для динамического рендеринга вложенных меню на основе данных.
👉 https://indepth.dev/tutorials/angular/angular-material-nested-menu-dynamic-data
✨ Angular Pipes: Полное руководство
Pipes — это простой способ форматирования данных для рендеринга. Когда вы их используете, вам не нужно менять данные, чтобы они соответствовали представлению.
В этой руководстве рассматриваются важные концепции, необходимые для понимания Angular Pipes.
👉 https://indepth.dev/tutorials/angular/angular-pipes-complete-guide
Pipes — это простой способ форматирования данных для рендеринга. Когда вы их используете, вам не нужно менять данные, чтобы они соответствовали представлению.
В этой руководстве рассматриваются важные концепции, необходимые для понимания Angular Pipes.
👉 https://indepth.dev/tutorials/angular/angular-pipes-complete-guide
🔥7
✨ WebSockets в Angular
WebSocket API — позволяет осуществлять связь между клиентом и сервером, как для отправки сообщений, так и для получения ответов без необходимости делать новый запрос к серверу.
В этом туториале рассказывается, как реализовать сервис для взаимодействия через WebSocket API.
👉 https://indepth.dev/tutorials/angular/how-to-implement-websockets-in-angular-project
WebSocket API — позволяет осуществлять связь между клиентом и сервером, как для отправки сообщений, так и для получения ответов без необходимости делать новый запрос к серверу.
В этом туториале рассказывается, как реализовать сервис для взаимодействия через WebSocket API.
👉 https://indepth.dev/tutorials/angular/how-to-implement-websockets-in-angular-project
👍9
✨ Опыт создания мобильных приложений на Ionic/Angular
Ionic — это набор инструментов пользовательского интерфейса для создания мобильных и настольных приложений с использованием HTML, CSS и JavaScript, а также с интеграцией с популярными фреймворками, как Angular.
Константин Берлинский рассказал как погрузился в мобильную разработку, с какими трудностями столкнулся и как решал возникшие проблемы.
👉 https://habr.com/ru/post/599133/
Ionic — это набор инструментов пользовательского интерфейса для создания мобильных и настольных приложений с использованием HTML, CSS и JavaScript, а также с интеграцией с популярными фреймворками, как Angular.
Константин Берлинский рассказал как погрузился в мобильную разработку, с какими трудностями столкнулся и как решал возникшие проблемы.
👉 https://habr.com/ru/post/599133/
👍6
🚀 Портфолио на Jamstack
Angular приложения могут стать быстрее, если сделать их статичными при помощи Scully. Scully — это генератор статических сайтов, который создает HTML-страницу для каждого маршрута в вашем приложении. Эти страницы быстрее доставляются и эффективны для SEO.
В этом уроке вы создадите портфолио и блог с помощью Angular 11 и Scully.
👉 https://www.digitalocean.com/community/tutorials/how-to-build-a-jamstack-portfolio-with-angular-11-and-scully
Angular приложения могут стать быстрее, если сделать их статичными при помощи Scully. Scully — это генератор статических сайтов, который создает HTML-страницу для каждого маршрута в вашем приложении. Эти страницы быстрее доставляются и эффективны для SEO.
В этом уроке вы создадите портфолио и блог с помощью Angular 11 и Scully.
👉 https://www.digitalocean.com/community/tutorials/how-to-build-a-jamstack-portfolio-with-angular-11-and-scully
✨ Проектирование архитектуры Angular
Проектирование архитектуры может быть непростым делом, особенно в мире agile, где требования часто меняются. Поэтому ваш проект должен обеспечивать расширяемость без необходимости серьезной модификации.
Maciej Wojcik призывает не писать ненужный код — вы не можете предсказать будущие изменения, а спланировать и реализовать архитектуру, которая упростит расширение, независимо от того, как будут меняться требования.
👉 https://indepth.dev/posts/1478/designing-angular-architecture-container-presentation-pattern
Проектирование архитектуры может быть непростым делом, особенно в мире agile, где требования часто меняются. Поэтому ваш проект должен обеспечивать расширяемость без необходимости серьезной модификации.
Maciej Wojcik призывает не писать ненужный код — вы не можете предсказать будущие изменения, а спланировать и реализовать архитектуру, которая упростит расширение, независимо от того, как будут меняться требования.
👉 https://indepth.dev/posts/1478/designing-angular-architecture-container-presentation-pattern
👍20👎2
🔥 Создаем клон TikTok с помощью Angular
Как насчет того, чтобы сделать клон TikTok? Вы можете подумать, что это слишком сложно, но Виталий Шевчук обещает, что мы построим его самым эффективным и ленивым способом, с минимальным количеством кода, и узнаем много нового о современном фронтенде.
Больше никаких скучных учебников, только красивые, реальные примеры, изучайте Micro Frontend, создавая TikTok.
👉 https://javascript.plainenglish.io/building-beautiful-tiktok-clone-with-angular-and-micro-frontend-part-1-bdd189425695
Как насчет того, чтобы сделать клон TikTok? Вы можете подумать, что это слишком сложно, но Виталий Шевчук обещает, что мы построим его самым эффективным и ленивым способом, с минимальным количеством кода, и узнаем много нового о современном фронтенде.
Больше никаких скучных учебников, только красивые, реальные примеры, изучайте Micro Frontend, создавая TikTok.
👉 https://javascript.plainenglish.io/building-beautiful-tiktok-clone-with-angular-and-micro-frontend-part-1-bdd189425695
🔥13👍4👎1
✨ Создаем собственную библиотеку компонентов Angular
Повторное использование компонентов в разных проектах делает ваш код более организованным. Ваши приложения выглядят более последовательными и согласованными, когда вы повторно используете свои компоненты.
В этой статье рассматриваются основы создания библиотеки компонентов Angular и публикации ее на npm.
👉 https://javascript.plainenglish.io/create-your-own-angular-component-library-e5f062b902a8
Повторное использование компонентов в разных проектах делает ваш код более организованным. Ваши приложения выглядят более последовательными и согласованными, когда вы повторно используете свои компоненты.
В этой статье рассматриваются основы создания библиотеки компонентов Angular и публикации ее на npm.
👉 https://javascript.plainenglish.io/create-your-own-angular-component-library-e5f062b902a8
👍16🔥1🎉1