Что нового в Angular v16?

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

В недавнем выпуске Angular версии 16 представлены интересные обновления и улучшения процесса разработки, а также улучшена производительность и стабильность приложений.

1. Угловые сигналы

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

@Компонент ({
 селектор: 'мое приложение',
 автономный: истинный,
 шаблон: `
{{ полное имя() }} "setName('Джон')">Нажмите</button>
`,
})
экспортсорт Приложение {
 имя = сигнал ('Джейн');
 фамилия = сигнал('Доу');
 полное имя = вычислено(() =>`${этот.имя()}${этот.фамилия()}`





instagram viewer
);
конструктор() {
 эффект(() =>консоль.бревно('Имя изменено:', этот.полное имя()));
 }
 setName (новое имя: нить) {
этот.firstName.set (новое имя);
 }
}

Приведенный выше фрагмент кода создает вычисляемое значение с именем fullName, которое зависит от сигналов firstName и lastName. Кроме того, он определяет эффект, функцию обратного вызова, которая запускается всякий раз, когда изменяется значение считываемых ею сигналов.

В этом случае значение fullName зависит от firstName и lastName, поэтому изменение любого из них вызывает эффект. Когда значение firstName установлено на John, браузер выводит на консоль следующее сообщение:

 Имя изменено: Джон Доу.

2. Автономная новая коллекция Ng

Начиная с Angular v16, вы можете создавать новые автономные проекты с самого начала! Чтобы опробовать предварительную версию автономных схем для разработчиков, убедитесь, что у вас установлен Angular CLI v16, и выполните следующую команду:

новый --автономный

Сделав это, вы получите более простую структуру проекта без каких-либо NgModules. Кроме того, все генераторы в проекте будут производить отдельные директивы, компоненты и пайпы!

3. Автоматическое сопоставление параметров маршрута

Рассмотрим конфигурацию маршрутизации следующим образом:

экспортконстанта маршруты: Маршруты = [{
 путь: 'поиск:/идентификатор',
 компонент: SearchComponent,
 решать: {
 searchDetails: searchResolverFn
 }
}];

До Angular 16 вам нужно было внедрить службу ActivatedRoute для получения параметров URL-адреса, параметров запроса или связанных данных для определенного URL-адреса.

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

@Компонент({
 ...
})
экспортсорт Компонент поиска {
 только для чтения #activatedRoute = вводить (ActivatedRoute);
 только для чтения идентификатор $ = этот.#activatedRoute.paramMap (карта(параметры => параметры.получить('идентификатор')));
 данные только для чтения$ = этот.#activatedRoute.data.map(({
 поискДетали
 }) => searchDetails);
}

С Angular 16 вам больше не нужно внедрять службу ActivatedRoute для получения различных параметров маршрута, потому что вы можете привязать их непосредственно к входным данным компонента.

Чтобы активировать эту функциональность в приложении, использующем модульную систему, установите соответствующее значение в параметрах RouterModule:

RouterModule.forRoot (маршруты, {
 связываниеКомпонентинпутс: истинный
})

Для автономного приложения вам нужно вместо этого вызвать функцию:

обеспечитьмаршруты (маршруты, withComponentInputBinding());

Как только вы активируете этот функционал, компонент станет намного проще:

@Компонент({
 ...
})
экспортсорт Компонент поиска {
@Вход() идентификатор!: нить;
@Вход() searchDetails!: SearchDetails;
}

4. Требуемый ввод

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

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

@Вход({
 необходимый: истинный
}) имя!: нить;

5. Vite как сервер разработки

Angular 14 представил новый сборщик JavaScript под названием EsBuild, который значительно сократил время сборки примерно на 40%. Однако вы могли реализовать этот прирост производительности только на этапе сборки, а не во время разработки с сервером разработки.

В предстоящем выпуске Angular, инструмент сборки Vite также позволяет использовать EsBuild во время разработки.

Чтобы активировать эту функцию, обновите конфигурацию построителя в файле angular.json следующим образом:

"архитектор": {
"строить": {
"строитель": "@angular-devkit/build-angular: браузер-esbuild",
"параметры": {
 ...
 }
 }

Обратите внимание, что эта функция все еще является экспериментальной.

Улучшение опыта разработки и производительности

Angular версии 16 содержит интересные обновления, такие как Angular Signals для управления данными, автономный проект. создание, автоматическое сопоставление параметров маршрута, необходимые входные данные и интеграция Vite для улучшения разработка. Эти усовершенствования улучшают процесс разработки и повышают производительность приложений.