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

Это небольшой выпуск с некоторыми приятными функциями: давайте погрузимся!

Поддержка TypeScript 5.1

Angular v16.1 теперь поддерживает TypeScript 5.1. Это означает, что вы можете использовать последнюю версию TypeScript в своих приложениях Angular. Вы можете ознакомиться с примечаниями к выпуску TypeScript 5.1, чтобы узнать больше о новых функциях.

Я написал простое приложение Pokemon на Angular 15 и RxJS для отображения URL-адресов изображений определенного покемона. Существует 2 способа обновить текущий идентификатор покемона, чтобы обновить URL-адреса изображений. Первый метод заключается в нажатии кнопок для увеличения или уменьшения идентификатора на дельту. Другой метод заключается в том, чтобы ввести значение для числового ввода, чтобы перезаписать текущий ID покемона. Однако поле ввода числа продолжает использовать операторы debounceTime, DifferentUntilChanged и filter RxJS для выполнения проверки и ограничения выдаваемых значений. Поэтому задача состоит в том, чтобы упростить реактивные коды и обеспечить сосуществование сигналов RxJS и Angular.

Если вы используете Angular, вы, вероятно, слышали о Zone.js. Это удивительная библиотека, которая делает много волшебства, но кажется несколько ненужной. Единственная цель библиотеки — исправлять события, чтобы обнаруживать все изменения, сделанные внутри вашего приложения, и волшебным образом перерисовывать представление.

Честно говоря, мне трудно понять, почему вы не хотели бы использовать Nx для своего приложения Angular. И нет, вам не нужен монорепо. Позвольте мне объяснить это вам.

Многим людям сложно настроить структуру папок и архитектуру приложений, которые просты в использовании, могут расширяться с течением времени и которыми может управлять большая команда. Это сложно для полирепозиториев и еще сложнее для монорепозиториев. Но независимо от того, работаете ли вы с polyrepo или monorepo, Nx может вам помочь.

С самого начала Angular взаимодействие между родителями и дочерними элементами осуществляется с помощью аннотаций @Input() и @Output().

@Input() - это мощная аннотация, которая позволяет передавать данные из родительского компонента в дочерний компонент.

Одним из пожеланий сообщества было иметь возможность простым способом преобразовывать данные, передаваемые при вводе.

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

Бывают случаи, когда мы хотим преобразовать значение входных данных, когда оно передается дочернему компоненту. Например, мы хотим отформатировать дату, или мы хотим добавить префикс или суффикс к строке, преобразовать строку в число или преобразовать строку в логическое значение. Сегодня мы можем сделать это, используя getter и setter.

В этой статье мы рассмотрим, как использовать Angular CLI для создания компонентов.

Angular - это фреймворк, который позволяет нам создавать интерактивные веб-интерфейсы для пользователей. Он поставляется с Angular CLI, который позволяет нам легко создавать файлы проекта.

По сути, сигнал представляет собой комбинацию переменной и уведомления об изменении. В отличие от observables, сигналы синхронны и всегда имеют значение.

Бенчмаркинг важен, но как именно вы это делаете?

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