Что нового в Angular 14 — «изменение правил игры»

Узнайте, что изменилось!

Введение

Недавно был выпущен Angular 14 с множеством интересных функций. И сегодня я представлю их вам. Они есть:

Автономные компоненты
Поставщики маршрутов
ОКРУЖАЮЩАЯ СРЕДА_INITIALIZER
Типизированные формы
Функция inject()
Установка заголовка страницы из маршрута
Автозаполнение в Angular CLI
Дополнительные инжекторы во встроенных представлениях

Итак, приступим!

Автономные компоненты

Для большинства людей самым значительным изменением в этой версии является возможность создания компонентов без @NgModules! Да, вы правильно поняли.

До углового 14

Если вы немного запутались, позвольте мне показать вам структуру папок из классического компонента Angular:

home
|--home.component.html
|--home.component.css
|--home.component.ts
|--home.module.ts

Там у нас есть файл .html для шаблона, файл .css для стилей, файл .ts для компонента и еще один файл .ts для @NgModule. Этот последний файл импортирует зависимости нашего компонента, объявляет компонент, а также может определять некоторых поставщиков.

Новая возможность с Angular 14

В Angular 14 мы можем сделать все это прямо в компоненте, без необходимости использования @NgModule.

home
|--home.component.html
|--home.component.css
|--home.component.ts

Для этого нам просто нужно установить свойство standalone в нашем компоненте на true.

Будьте в курсе!

Имейте в виду:

Автономные компоненты — это не новый способ объявления компонентов! Это другой способ объявления компонентов. Классический способ определения @NgModules не устареет.

Ну, я не могу обещать, что это не устареет. Но да, пока нет никаких намерений отказываться от @NgModules.

Собственно говоря. Я по-прежнему буду использовать @NgModules вместо автономных компонентов, потому что мне нравится изоляция, которую обеспечивает @NgModules.

Пока не переносите все приложение на автономные компоненты! Автономные компоненты появились совсем недавно, и нам потребуется некоторое время, чтобы создать соглашения и определить лучшие практики. Я рекомендую подождать немного дольше, прежде чем прыгать с корабля.

Поставщики маршрутов

Но эй, если мы отбросим @NgModule и будем использовать автономные компоненты, как мы можем установить провайдера по маршруту, как мы делали это с @NgModules?

Чтобы решить эту проблему, Angular добавил поставщиков маршрутов. Таким образом, определения маршрутов теперь имеют свойство с именем providers. Позволяет нам предоставлять значения только модулям и компонентам, отображаемым этим маршрутом.

ОКРУЖАЮЩАЯ СРЕДА_INITIALIZER

Еще одна вещь, которую мы делали с NgModules, — это запуск сценария установки при инициализации лениво загруженного модуля. Другими словами, constructor модуля с ленивой загрузкой будет работать только тогда, когда модуль будет инициализирован, и некоторые разработчики пользуются этим, чтобы запустить какую-то настройку.

Как мы можем сделать это с автономными компонентами? Решение состоит в том, чтобы использовать токен ENVIRONMENT_INITIALIZER.

Этот токен позволяет нам предоставить функцию настройки, которая будет выполняться до инициализации среды.

Если мы хотим, чтобы он запускался при переходе к маршруту, мы можем предоставить этот токен с помощью поставщиков маршрутов.

Это имеет тот же эффект, что и наше предыдущее решение с использованием NgModule constructors, и имеет дополнительное преимущество, заключающееся в более явном виде.

Типизированные формы

Еще одна долгожданная функция Angular 14 — типизированные формы.

До версии 14 значения формы печатались как any. Это означает, что мы теряем всю потрясающую безопасность типов TypeScript.

Кстати, есть безопасный для типов способ сказать, что вы не знаете тип чего-либо. Если вам это интересно, посмотрите это минутное видео, в котором объясняются различия между any и unknown.

Во всяком случае, у нас больше нет этой проблемы. Потому что в Angular 14 есть строгие типы для форм. Таким образом, если FormControl имеет дело с string, значение будет напечатано как string вместо any.

Функция `inject()`

Теперь это самая интересная функция для меня.

Angular 14 представляет функцию inject(). И это очень похоже на хуки React. Это дает нам множество возможностей для повторного использования нашего кода, наиболее важным из которых является то, что теперь мы можем создавать многократно используемые функции, которые используют внедрение зависимостей внутри.

Если вы так же, как и я, интересуетесь функциональным программированием, вы знаете, что это очень много значит! Но как однажды сказал дядя Бен:

«С большой силой приходит большая ответственность»

Это создает неявные зависимости в ваших функциях. Я ожидаю, что зависимости моих функций будут явно объявлены в аргументах функции. Поэтому, если я вижу функцию без аргументов, я думаю, что у нее нет зависимостей. Но теперь мы можем создавать функции, которые кажутся чистыми, но внедряют множество внутренних зависимостей, что затрудняет их тестирование и делает их более связанными с фреймворком Angular.

Хорошее решение — следовать тому же соглашению, что и в React, а именно добавлять к этим функциям префикс "use". Таким образом, вы можете легко идентифицировать функции, которые используют inject() внутри.

Установить заголовок страницы из маршрута

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

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

Но я знаю, о чем ты думаешь:

"Лукас, я не могу установить заголовок в определении маршрута, потому что мой заголовок не статичен, он зависит от того, что я получаю от своего API".

Не волнуйся. Angular 14 поможет вам.

Если вам нужно динамически настроить заголовок, вы можете сделать это, расширив класс TitleStrategy из класса @angular/router и предоставив свою новую стратегию заголовка вместо стратегии по умолчанию.

Автозаполнение Angular CLI

Еще одна приятная мелочь — теперь у нас есть автозаполнение в Angular CLI.

Просто введите ng на своем терминале и нажмите TAB, чтобы Angular CLI либо автоматически завершил вашу команду, либо предоставил вам некоторую помощь.

Активация автозаполнения CLI

Чтобы активировать его, вы должны запустить команду ng completion и подтвердить, что хотите включить автозаполнение, набрав Yes.

Наконец, просто перезапустите терминал, чтобы включить автозаполнение.

Дополнительные инжекторы во встроенных представлениях

И последнее, но не менее важное: теперь мы можем передавать необязательные инжекторы во встроенные представления. Раньше для этого нам приходилось использовать другие API, такие как ngComponentOutlet.

Не останавливайтесь здесь

На мой взгляд, это были самые актуальные изменения в Angular 14. Если вы хотите увидеть все изменения, вы можете сделать это, просмотрев ссылки в описании.

Если вы хотите глубже погрузиться во фреймворк Angular, рассмотрите возможность подписаться на нашу рассылку новостей на lucaspaganini.com. Это без спама. Мы храним электронные письма немногочисленными и ценными.

И если ваша компания ищет удаленных веб-разработчиков, рассмотрите возможность связаться с моей командой и со мной. Вы можете сделать это на lucaspaganini.com.

Как всегда, ссылки в описании. Нравиться. Подписаться. Хорошего дня. И увидимся в следующем.

- Лукас