Какво е новото в Angular v16?

Angular, поддържан от Google, е широко използвана рамка с отворен код за разработване на уеб приложения. Той ви предлага стабилен набор от инструменти и набор от функции, които ви позволяват да създавате динамични, отзивчиви и мащабируеми уеб приложения.

Неотдавнашното стартиране на Angular версия 16 въвежда вълнуващи актуализации и подобрения в изживяването при разработката, както и по-добра производителност и стабилност на приложенията.

1. Ъглови сигнали

Ъглови сигнали е библиотека, която позволява дефинирането на реактивни стойности и установяването на зависимости между тях. Ето прост пример за това как да използвате Angular Signals в Angular приложение:

@Компонент ({
 селектор: "моето приложение",
 самостоятелен: вярно,
 шаблон: `
{{ пълно име() }} "setName('John')">Щракнете</button>
`,
})
износклас Приложение {
 firstName = signal("Джейн");
 фамилно име = сигнал('Сърна');
 пълно име = изчислено(() =>





instagram viewer

`${това.първо име()}${това.фамилия()}`);
конструктор() {
 ефект(() =>конзола.log(„Името е променено:“, това.пълно име()));
 }
 setName (ново име: низ) {
това.firstName.set (новоИме);
 }
}

Горният кодов фрагмент създава изчислена стойност, наречена fullName, която разчита на сигналите firstName и lastName. Освен това, той дефинира ефект, функция за обратно извикване, която се изпълнява всеки път, когато стойността на сигналите, които чете, се промени.

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

 Името е променено: Джон Доу.

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

Започвайки от Angular v16, можете да създавате нови самостоятелни проекти от самото начало! За да изпробвате визуализацията за разработчици на самостоятелните схеми, уверете се, че имате инсталиран Angular CLI v16 и изпълнете следната команда:

ng нов --самостоятелен

Правейки това, вие ще получите по-проста структура на проекта без никакви NgModules. Освен това, всички генератори в проекта ще произвеждат самостоятелни директиви, компоненти и тръби!

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

Помислете за конфигурация на маршрутизиране, както следва:

износконст маршрути: Маршрути = [{
 път: 'търсене:/id',
 компонент: SearchComponent,
 разреши: {
 searchDetails: searchResolverFn
 }
}];

Преди Angular 16 трябваше да инжектирате услугата ActivatedRoute, за да извлечете URL параметри, параметри на заявка или свързани данни за определен URL.

Ето пример за това как трябваше да го направите:

@Компонент({
 ...
})
износклас SearchComponent {
 само за четене #activatedRoute = инжектиране (ActivatedRoute);
 само за четене id$ = това.#activatedRoute.paramMap (карта(параметри => params.get('документ за самоличност')));
 данни само за четене$ = това.#activatedRoute.data.map(({
 searchDetails
 }) => searchDetails);
}

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

За да активирате тази функционалност в приложение, което използва модулната система, задайте съответната стойност в опциите на RouterModule:

RouterModule.forRoot (маршрути, {
 bindComponentInputs: вярно
})

За самостоятелно приложение трябва вместо това да извикате функция:

provideRoutes (маршрути, withComponentInputBinding());

След като активирате тази функционалност, компонентът става много по-прост:

@Компонент({
 ...
})
износклас SearchComponent {
@Вход() документ за самоличност!: низ;
@Вход() searchDetails!: SearchDetails;
}

4. Задължително въвеждане

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

И двете решения обаче имаха своите предимства и недостатъци. Започвайки от версия 16, изискването за въвеждане е толкова просто, колкото предоставянето на конфигурационен обект в метаданните на входната анотация:

@Вход({
 задължително: вярно
}) име!: низ;

5. Vite като Dev Server

Angular 14 представи нов пакет за JavaScript, наречен EsBuild, който значително подобри времето за изграждане с приблизително 40%. Можете обаче да реализирате това увеличение на производителността само по време на фазата на изграждане, а не по време на разработка със сървъра за разработка.

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

За да активирате тази функция, актуализирайте конфигурацията на builder във файла angular.json, както следва:

"архитект": {
"строя": {
"строител": "@angular-devkit/build-angular: browser-esbuild",
"настроики": {
 ...
 }
 }

Моля, имайте предвид, че тази функционалност все още е експериментална.

Подобряване на опита и производителността в разработката

Angular версия 16 носи вълнуващи актуализации като Angular Signals за управление на данни, самостоятелен проект създаване, автоматично картографиране на параметрите на маршрута, необходими входове и интегриране на Vite за подобрение развитие. Тези подобрения подобряват изживяването при разработка и повишават производителността на приложението.