Mis on Angular v16-s uut?

Angular, mida haldab Google, on laialdaselt kasutatav avatud lähtekoodiga raamistik veebirakenduste arendamiseks. See pakub teile tugevat tööriistakomplekti ja erinevaid funktsioone, mis võimaldavad teil luua dünaamilisi, reageerivaid ja skaleeritavaid veebirakendusi.

Angulari versiooni 16 hiljutine turuletoomine toob kaasa põnevaid uuendusi ja arenduskogemuse täiustusi, samuti paremat rakenduse jõudlust ja stabiilsust.

1. Nurga signaalid

Nurga signaalid on teek, mis võimaldab määratleda reaktiivseid väärtusi ja luua nendevahelisi sõltuvusi. Siin on lihtne näide nurksignaalide kasutamisest Angular-rakenduses:

@Component ({
 valija: "minu rakendus",
 eraldiseisev: tõsi,
 mall: `
{{ täisnimi() }} "setName('John')">Klõpsake</button>
`,
})
eksportidaklass Rakendus {
 eesnimi = signal("Jane");
 perekonnanimi = signal("Doe");
 fullName = arvutatud(() =>`${see.eesnimi()}${see.perekonnanimi()}`);
konstruktor() {
 efekt (





instagram viewer

() =>konsool.log('Nimi muudetud:', see.täisnimi()));
 }
 setName (newName: string) {
see.firstName.set (uusNimi);
 }
}

Ülaltoodud koodilõik loob arvutatud väärtuse nimega fullName, mis tugineb signaalidele eesnimi ja perekonnanimi. Lisaks määratleb see efekti, tagasihelistamisfunktsiooni, mis töötab alati, kui loetavate signaalide väärtus muutub.

Sel juhul oleneb fullName väärtus eesnimest ja perekonnanimest, nii et kummagi neist muutmine käivitab efekti. Kui eesnime väärtuseks on määratud Johannes, logib brauser konsooli järgmise teate:

 Nimi muudetud: John Doe.

2. Standalone Ng Uus kollektsioon

Alates Angular v16-st saate luua uusi eraldiseisvaid projekte kohe algusest peale! Eraldiseisvate skeemide arendaja eelvaate proovimiseks veenduge, et olete installinud Angular CLI v16 ja käivitage järgmine käsk:

uus - eraldiseisev

Seda tehes saate lihtsama projektistruktuuri ilma NgModulesita. Lisaks toodavad kõik projekti generaatorid eraldiseisvaid direktiive, komponente ja torusid!

3. Automaatne marsruudiparameetrite kaardistamine

Kaaluge marsruutimise konfiguratsiooni järgmiselt.

eksportidakonst marsruudid: Marsruudid = [{
 tee: 'otsing:/id',
 komponent: SearchComponent,
 lahenda: {
 otsing Üksikasjad: searchResolverFn
 }
}];

Enne Angular 16 pidite sisestama teenuse ActivatedRoute, et hankida konkreetse URL-i URL-i parameetrid, päringuparameetrid või seotud andmed.

Siin on näide, kuidas pidite seda tegema:

@Component({
 ...
})
eksportidaklass SearchComponent {
 kirjutuskaitstud #activatedRoute = süsti (ActivatedRoute);
 kirjutuskaitstud id$ = see.#activatedRoute.paramMap (map(parameetrid => params.get('id')));
 kirjutuskaitstud andmed$ = see.#activatedRoute.data.map(({
 Otsi Üksikasjad
 }) => otsingDetails);
}

Angular 16 puhul ei pea te enam erinevate marsruudiparameetrite hankimiseks sisestama teenust ActivatedRoute, kuna saate need otse komponentide sisenditega siduda.

Selle funktsiooni aktiveerimiseks rakenduses, mis kasutab moodulsüsteemi, määrake vastav väärtus RouterModule'i suvandites:

RouterModule.forRoot (marsruudid, {
 bindComponentInputs: tõsi
})

Eraldiseisva rakenduse puhul peate selle asemel kutsuma funktsiooni:

provideRoutes (marsruudid, withComponentInputBinding());

Kui olete selle funktsiooni aktiveerinud, muutub komponent palju lihtsamaks:

@Component({
 ...
})
eksportidaklass SearchComponent {
@Sisend() ID!: string;
@Sisend() otsingDetails!: OtsiDetails;
}

4. Nõutav sisend

Angulari kogukonna väga oodatud funktsioon on võimalus teatud sisendeid vastavalt vajadusele märkida. Seni pidite selle saavutamiseks kasutama erinevaid lahendusi, nagu näiteks NgOnIniti vea esiletõstmine elutsükkel, kui muutujat ei määratletud või komponendi valija muutmine kohustusliku lisamiseks sisendid.

Mõlemal lahendusel olid aga omad plussid ja miinused. Alates versioonist 16 on sisendi kohustuslikuks muutmine sama lihtne kui konfiguratsiooniobjekti lisamine sisendmärkuse metaandmetesse:

@Sisend({
 nõutud: tõsi
}) nimi!: string;

5. Vite arendusserverina

Angular 14 tutvustas uut JavaScripti komplekti nimega EsBuild, mis parandas oluliselt ehitusaega umbes 40%. Seda jõudluse kasvu saate aga realiseerida ainult ehitamise etapis, mitte arendusserveriga arendamise ajal.

Angulari eelseisvas väljaandes Vite ehitustööriist võimaldab EsBuildi kasutada ka arenduse ajal.

Selle funktsiooni aktiveerimiseks värskendage koostaja konfiguratsiooni failis angular.json järgmiselt.

"arhitekt": {
"ehitada": {
"ehitaja": "@angular-devkit/build-angular: brauser-esbuild",
"valikud": {
 ...
 }
 }

Pange tähele, et see funktsioon on veel katsetuslik.

Arenduskogemuse ja jõudluse parandamine

Angular versioon 16 pakub põnevaid värskendusi, nagu Angular Signals andmete haldamiseks, eraldiseisev projekt loomine, automaatne marsruudiparameetrite kaardistamine, vajalikud sisendid ja Vite integreerimine täiustamiseks arengut. Need täiustused parandavad arenduskogemust ja suurendavad rakenduste jõudlust.