Mitä uutta Angular v16:ssa?

Googlen ylläpitämä Angular on laajalti käytetty avoimen lähdekoodin kehys verkkosovellusten kehittämiseen. Se tarjoaa sinulle vankan työkalupakin ja valikoiman ominaisuuksia, joiden avulla voit luoda dynaamisia, reagoivia ja skaalautuvia verkkosovelluksia.

Äskettäin julkaistu Angular-versio 16 sisältää jännittäviä päivityksiä ja parannuksia kehityskokemukseen sekä parempaa sovellusten suorituskykyä ja vakautta.

1. Kulmaiset signaalit

Kulmaiset signaalit on kirjasto, joka mahdollistaa reaktiivisten arvojen määrittämisen ja niiden välisten riippuvuuksien muodostamisen. Tässä on yksinkertainen esimerkki kulmasignaalien hyödyntämisestä Angular-sovelluksessa:

@Komponentti ({
 valitsin: "oma-sovellus",
 itsenäinen: totta,
 sapluuna: `
{{ koko nimi() }} "setName('John')">Napsauta</button>
`,
})
viedäluokkaa Sovellus {
 etunimi = signaali("Jane");
 sukunimi = signaali("Doe");
 fullName = laskettu(() =>





instagram viewer

`${Tämä.etunimi()}${Tämä.sukunimi()}`);
rakentaja() {
 vaikutus(() =>konsoli.Hirsi('Nimi muutettu:', Tämä.koko nimi()));
 }
 setName (newName: merkkijono) {
Tämä.firstName.set (uusiNimi);
 }
}

Yllä oleva koodinpätkä luo lasketun arvon nimeltä fullName, joka perustuu signaaleihin etunimi ja sukunimi. Lisäksi se määrittelee tehosteen, takaisinsoittotoiminnon, joka toimii aina, kun sen lukemien signaalien arvo muuttuu.

Tässä tapauksessa fullName-arvo riippuu etunimestä ja sukunimestä, joten jommankumman muuttaminen laukaisee vaikutuksen. Kun etunimi arvoksi on asetettu John, selain kirjaa seuraavan viestin konsoliin:

 Nimi muutettu: John Doe.

2. Itsenäinen Ng Uusi kokoelma

Angular v16:sta alkaen voit luoda uusia itsenäisiä projekteja heti alusta alkaen! Voit kokeilla itsenäisten kaavioiden kehittäjän esikatselua varmistamalla, että sinulla on asennettuna Angular CLI v16, ja suorittamalla seuraava komento:

uusi -- erillinen

Näin saat yksinkertaisemman projektirakenteen ilman NgModuleja. Lisäksi kaikki projektin generaattorit tuottavat itsenäisiä direktiivejä, komponentteja ja putkia!

3. Automaattinen reittiparametrien kartoitus

Harkitse reitityskokoonpanoa seuraavasti:

viedäkonst reitit: Routes = [{
 polku: 'haku:/id',
 komponentti: SearchComponent,
 ratkaista: {
 searchDetails: searchResolverFn
 }
}];

Ennen Angular 16:ta sinun piti lisätä ActivatedRoute-palvelu hakeaksesi URL-parametrit, kyselyparametrit tai niihin liittyvät tiedot tietylle URL-osoitteelle.

Tässä on esimerkki siitä, kuinka se piti tehdä:

@Komponentti({
 ...
})
viedäluokkaa SearchComponent {
 vain luku #activatedRoute = inject (ActivatedRoute);
 vain luku id$ = Tämä.#activatedRoute.paramMap (map(parametrit => params.get('id')));
 vain luku -tiedot$ = Tämä.#activatedRoute.data.map(({
 hakutiedot
 }) => searchDetails);
}

Angular 16:lla sinun ei enää tarvitse syöttää ActivatedRoute-palvelua erilaisten reittiparametrien hakemiseen, koska voit sitoa ne suoraan komponenttituloihin.

Aktivoidaksesi tämän toiminnon sovelluksessa, joka käyttää moduulijärjestelmää, aseta vastaava arvo RouterModule-asetuksissa:

RouterModule.forRoot (reitit, {
 bindComponentInputs: totta
})

Jos kyseessä on erillinen sovellus, sinun on kutsuttava funktio sen sijaan:

tarjotaRoutes (reitit, withComponentInputBinding());

Kun aktivoit tämän toiminnon, komponentista tulee paljon yksinkertaisempi:

@Komponentti({
 ...
})
viedäluokkaa SearchComponent {
@Syöte() id!: merkkijono;
@Syöte() searchDetails!: SearchDetails;
}

4. Vaadittu syöttö

Angular-yhteisön erittäin odotettu ominaisuus on mahdollisuus merkitä tietyt syötteet tarpeen mukaan. Tähän asti sinun on täytynyt käyttää erilaisia ​​​​kiertotapoja saavuttaaksesi tämän, kuten nostamalla esiin virheen NgOnInitissä elinkaari, jos muuttujaa ei ole määritelty, tai komponentin valitsimen muuttaminen sisällyttämään pakollinen tulot.

Molemmilla ratkaisuilla oli kuitenkin hyvät ja huonot puolensa. Versiosta 16 alkaen vaaditun syötteen tekeminen on yhtä helppoa kuin konfigurointiobjektin lisääminen syötemerkinnän metatietoihin:

@Syöte({
 edellytetään: totta
}) nimi!: merkkijono;

5. Vite kehittäjäpalvelimena

Angular 14 esitteli uuden JavaScript-niputtajan nimeltä EsBuild, joka paransi merkittävästi rakennusaikoja noin 40%. Voit kuitenkin saavuttaa tämän suorituskyvyn paranemisen vain rakennusvaiheessa, et kehityspalvelimen kanssa kehitettäessä.

Tulevassa Angular-julkaisussa Vite-rakennustyökalu mahdollistaa EsBuildin käytön myös kehityksen aikana.

Aktivoi tämä ominaisuus päivittämällä rakennustyökalun kokoonpano angular.json-tiedostossa seuraavasti:

"arkkitehti": {
"rakentaa": {
"rakentaja": "@angular-devkit/build-angular: browser-esbuild",
"vaihtoehdot": {
 ...
 }
 }

Huomaa, että tämä toiminto on vielä kokeiluvaiheessa.

Kehityskokemuksen ja suorituskyvyn parantaminen

Angular-versio 16 tuo jännittäviä päivityksiä, kuten Angular Signals -sovelluksen tietojen hallintaan, itsenäiseen projektiin luominen, automaattinen reitin parametrien kartoitus, vaaditut syötteet ja Viten integrointi parannusta varten kehitystä. Nämä parannukset parantavat kehityskokemusta ja lisäävät sovellusten suorituskykyä.