Шта је ново у Ангулар в16?

Ангулар, који одржава Гоогле, је широко коришћен оквир отвореног кода за развој веб апликација. Нуди вам робустан комплет алата и низ функција које вам омогућавају да креирате динамичке, прилагодљиве и скалабилне веб апликације.

Недавно лансирање Ангулар верзије 16 уводи узбудљива ажурирања и побољшања искуства развоја, као и боље перформансе и стабилност апликације.

1. Угаони сигнали

Угаони сигнали је библиотека која омогућава дефинисање реактивних вредности и успостављање зависности између њих. Ево једноставног примера како да користите Ангулар сигнале у оквиру Ангулар апликације:

@Саставни део ({
 селектор: 'моја апликација',
 самостална: истина,
 шаблон: `
{{ пуно име() }} "сетНаме('Јован')">Кликните</button>
`,
})
извозкласа Апликација {
 име = сигнал('Јане');
 презиме = сигнал('срна');
 пуно име = израчунато (() =>`${ово.име()}${ово.презиме()}`);
конструктор() {
 ефекат (() =>конзола.Пријава('Име промењено:', ово.пуно име()));
 }
 сетНаме (новоНаме: низ) {
ово.фирстНаме.сет (новоНаме);
 }
}

Горњи исечак кода креира израчунату вредност под називом фуллНаме, која се ослања на сигнале фирстНаме и презиме. Поред тога, дефинише ефекат, функцију повратног позива која се покреће кад год се промени вредност сигнала које чита.

У овом случају, вредност фуллНаме зависи од фирстНаме и презимена, тако да промена било којег од њих покреће ефекат. Када је вредност фирстНаме постављена на Јохн, претраживач евидентира следећу поруку на конзоли:

 Име промењено: Јохн Дое.

2. Самостална Нг Нова колекција

Почевши од Ангулар в16, можете креирати нове самосталне пројекте од самог почетка! Да бисте испробали програмски преглед самосталних шема, уверите се да имате инсталиран Ангулар ЦЛИ в16 и покрените следећу команду:

нг нев --самостална

Радећи ово, добићете једноставнију структуру пројекта без икаквих НгМодула. Штавише, сви генератори у пројекту ће производити самосталне директиве, компоненте и цеви!

3. Аутоматско мапирање параметара руте

Размотрите конфигурацију рутирања на следећи начин:

извозконст руте: Руте = [{
 пут: 'сеарцх:/ид',
 компонента: СеарцхЦомпонент,
 реши: {
 сеарцхДетаилс: сеарцхРесолверФн
 }
}];

Пре Ангулара 16, морали сте да убаците услугу АцтиватедРоуте да бисте преузели параметре УРЛ-а, параметре упита или повезане податке за одређени УРЛ.

Ево примера како сте то морали да урадите:

@Саставни део({
 ...
})
извозкласа СеарцхЦомпонент {
 реадонли #ацтиватедРоуте = ињецт (АцтиватедРоуте);
 само за читање ид$ = ово.#ацтиватедРоуте.парамМап (мапа(парамс => парамс.гет('ид')));
 подаци само за читање$ = ово.#ацтиватедРоуте.дата.мап(({
 сеарцхДетаилс
 }) => сеарцхДетаилс);
}

Са Ангулар 16, више не морате да убацујете услугу АцтиватедРоуте да бисте преузели различите параметре руте јер их можете директно повезати са улазима компоненти.

Да бисте активирали ову функционалност у апликацији која користи систем модула, поставите одговарајућу вредност у опцијама РоутерМодуле:

РоутерМодуле.форРоот (руте, {
 биндЦомпонентИнпутс: истина
})

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

провидеРоутес (руте, витхЦомпонентИнпутБиндинг());

Када активирате ову функцију, компонента постаје много једноставнија:

@Саставни део({
 ...
})
извозкласа СеарцхЦомпонент {
@Улазни() ид!: низ;
@Улазни() сеарцхДетаилс!: СеарцхДетаилс;
}

4. Потребан унос

Веома очекивана карактеристика Ангулар заједнице је могућност означавања одређених улаза према потреби. До сада сте морали да користите различита решења да бисте то постигли, као што је подизање грешке у НгОнИнит-у животни циклус ако променљива није дефинисана или модификовање селектора компоненте тако да укључује обавезну инпутс.

Међутим, оба ова решења су имала своје предности и мане. Почевши од верзије 16, захтевање уноса је једноставно као пружање конфигурационог објекта у метаподацима улазне напомене:

@Улазни({
 потребан: истина
}) име!: низ;

5. Вите као Дев сервер

Ангулар 14 је представио нови ЈаваСцрипт пакет под називом ЕсБуилд, који је значајно побољшао време израде за приближно 40%. Међутим, ово повећање перформанси можете да остварите само током фазе изградње, а не током развоја са дев сервером.

У предстојећем издању Ангулар-а, Вите алат за прављење омогућава коришћење ЕсБуилд-а и током развоја.

Да бисте активирали ову функцију, ажурирајте конфигурацију програмера у датотеци ангулар.јсон на следећи начин:

"архитекта": {
"градити": {
"градитељ": "@ангулар-девкит/буилд-ангулар: бровсер-есбуилд",
"Опције": {
 ...
 }
 }

Имајте на уму да је ова функција још увек експериментална.

Побољшање развојног искуства и перформанси

Ангулар верзија 16 доноси узбудљива ажурирања као што је Ангулар Сигналс за управљање подацима, самостални пројекат креирање, аутоматско мапирање параметара руте, потребни улази и интеграција Вите-а ради побољшања развој. Ова побољшања побољшавају развојно искуство и повећавају перформансе апликације.