Kas naujo Angular v16?

„Angular“, prižiūrima „Google“, yra plačiai naudojama atvirojo kodo sistema, skirta žiniatinklio programoms kurti. Jis siūlo tvirtą įrankių rinkinį ir daugybę funkcijų, leidžiančių kurti dinamiškas, reaguojančias ir keičiamo dydžio žiniatinklio programas.

Neseniai išleista Angular 16 versija pristato įdomių atnaujinimų ir patobulinimų, susijusių su kūrimo patirtimi, taip pat geresniu programos našumu ir stabilumu.

1. Kampiniai signalai

Kampiniai signalai yra biblioteka, kuri leidžia apibrėžti reaktyviąsias reikšmes ir nustatyti jų priklausomybes. Štai paprastas pavyzdys, kaip naudoti kampinius signalus kampinėje programoje:

@Komponentas ({
 parinkiklis: „mano programa“,
 atskiras: tiesa,
 šablonas: `
{{ pilnas vardas() }} "setName('Jonas')">Spustelėkite</button>
`,
})
eksportuotiklasė App {
 vardas = signalas ('Jane');
 pavardė = signalas('oe');
 fullName = apskaičiuotas(() =>`${tai.Pirmas vardas()}${tai.pavardė()}`





instagram viewer
);
konstruktorius() {
 efektas (() =>konsolė.log('Pavadinimas pakeistas:', tai.pilnas vardas()));
 }
 setName (newName: styga) {
tai.firstName.set (newName);
 }
}

Pirmiau pateiktas kodo fragmentas sukuria apskaičiuotą reikšmę, vadinamą fullName, kuri remiasi signalais firstName ir LastName. Be to, jis apibrėžia efektą, atgalinio skambučio funkciją, kuri paleidžiama, kai pasikeičia jos nuskaitomų signalų reikšmė.

Šiuo atveju fullName reikšmė priklauso nuo vardo ir pavardės, todėl pakeitus bet kurį iš jų suaktyvinamas efektas. Kai vardas firstName nustatyta į Joną, naršyklė į konsolę įrašo šį pranešimą:

 Vardas pakeistas: John Doe.

2. Atskira Ng nauja kolekcija

Nuo Angular v16 galite kurti naujus atskirus projektus nuo pat pradžių! Norėdami išbandyti atskirų schemų kūrėjo peržiūrą, įsitikinkite, kad įdiegėte Angular CLI v16 ir paleiskite šią komandą:

naujas - atskiras

Tai darydami gausite paprastesnę projekto struktūrą be jokių NgModulių. Be to, visi projekto generatoriai gamins atskiras direktyvas, komponentus ir vamzdžius!

3. Automatinis maršruto parametrų atvaizdavimas

Apsvarstykite maršruto konfigūraciją taip:

eksportuotikonst maršrutai: Maršrutai = [{
 kelias: 'paieška:/id',
 komponentas: SearchComponent,
 išspręsti: {
 searchDetaliau: searchResolverFn
 }
}];

Prieš pradedant Angular 16, reikėjo įterpti paslaugą „ActivatedRoute“, kad gautumėte URL parametrus, užklausos parametrus arba susijusius konkretaus URL duomenis.

Štai pavyzdys, kaip turėjote tai padaryti:

@Komponentas({
 ...
})
eksportuotiklasė SearchComponent {
 tik skaitymas #activatedRoute = inject (ActivatedRoute);
 skaitomas ID$ = tai.#activatedRoute.paramMap (map(parametrai => params.get('id')));
 tik skaitomi duomenys$ = tai.#activatedRoute.data.map(({
 paieškaDetalės
 }) => paieškaDetalės);
}

Naudojant Angular 16, jums nebereikia įvesti ActivatedRoute paslaugos, kad gautumėte įvairius maršruto parametrus, nes galite juos tiesiogiai susieti su komponentų įvestimis.

Norėdami suaktyvinti šią funkciją programoje, kuri naudoja modulių sistemą, nustatykite atitinkamą reikšmę RouterModule parinktyse:

RouterModule.forRoot (maršrutai, {
 bindComponentInputs: tiesa
})

Jei naudojate atskirą programą, turite iškviesti funkciją:

pateiktiRoutes (maršrutai, withComponentInputBinding());

Suaktyvinus šią funkciją, komponentas tampa daug paprastesnis:

@Komponentas({
 ...
})
eksportuotiklasė SearchComponent {
@Įvestis() ID!: styga;
@Įvestis() SearchDetails!: SearchDetails;
}

4. Būtina įvestis

Labai laukiama „Angular“ bendruomenės savybė yra galimybė pagal poreikį pažymėti tam tikras įvestis. Iki šiol, norėdami tai pasiekti, turėjote naudoti įvairius sprendimus, pvz., iškelti klaidą NgOnInit gyvavimo ciklas, jei kintamasis nebuvo apibrėžtas arba modifikuojamas komponento parinkiklis, įtraukiant privalomą įėjimai.

Tačiau abu šie sprendimai turėjo savo privalumų ir trūkumų. Pradedant nuo 16 versijos, reikalingą įvestį padaryti taip pat paprasta, kaip įvesties anotacijos metaduomenyse pateikti konfigūracijos objektą:

@Įvestis({
 reikalingas: tiesa
}) vardas!: styga;

5. Vite kaip kūrimo serveris

„Angular 14“ pristatė naują „JavaScript“ rinktuvą „EsBuild“, kuris žymiai pailgino kūrimo laiką maždaug 40%. Tačiau šį našumo padidėjimą galite suvokti tik kūrimo etape, o ne kurdami su dev serveriu.

Būsimame „Angular“ leidime „Vite“ kūrimo įrankis leidžia naudoti EsBuild ir kūrimo metu.

Norėdami suaktyvinti šią funkciją, atnaujinkite kūrimo priemonės konfigūraciją faile angular.json taip:

"architektas": {
"statyti": {
"statybininkas": "@angular-devkit/build-angular: browser-esbuild",
"galimybės": {
 ...
 }
 }

Atminkite, kad ši funkcija vis dar yra eksperimentinė.

Plėtros patirties ir našumo gerinimas

„Angular 16“ versija pateikia įdomių atnaujinimų, pvz., „Angular Signals“, skirtą duomenims valdyti, atskirą projektą kūrimas, automatinis maršruto parametrų atvaizdavimas, būtini įėjimai ir Vite integracija, kad būtų patobulinta plėtra. Šie patobulinimai pagerina kūrimo patirtį ir padidina programos našumą.