Hvad er nyt i Angular v16?

Angular, der vedligeholdes af Google, er en meget brugt open source-ramme til udvikling af webapplikationer. Det tilbyder dig et robust værktøjssæt og en række funktioner, der lader dig skabe dynamiske, responsive og skalerbare webapplikationer.

Den nylige lancering af Angular version 16 introducerer spændende opdateringer og forbedringer til udviklingsoplevelsen samt bedre applikationsydelse og stabilitet.

1. Vinkelsignaler

Vinkelsignaler er et bibliotek, der muliggør definition af reaktive værdier og etablering af afhængigheder mellem dem. Her er et simpelt eksempel på, hvordan man bruger Angular Signals i en Angular-applikation:

@Komponent ({
 vælger: 'min-app',
 selvstændig: rigtigt,
 skabelon: `
{{ fulde navn() }} "setName('John')">Klik</button>
`,
})
eksportklasse App {
 fornavn = signal('Jane');
 efternavn = signal('Doe');
 fuldt navn = beregnet(() =>`${det her.fornavn()}${det her.efternavn()}`





instagram viewer
);
konstruktør() {
 effekt(() =>konsol.log('Navn ændret:', det her.fulde navn()));
 }
 sætnavn (nytNavn: snor) {
det her.fornavn.sæt (nytNavn);
 }
}

Ovenstående kodestykke opretter en beregnet værdi kaldet fuldnavn, som er afhængig af signalerne fornavn og efternavn. Derudover definerer den en effekt, en tilbagekaldsfunktion, der kører, når værdien af ​​de signaler, den læser, ændres.

I dette tilfælde afhænger fuldnavn-værdien af ​​fornavn og efternavn, så ændring af en af ​​dem udløser effekten. Når værdien af ​​fornavn er indstillet til John, logger browseren følgende meddelelse til konsollen:

 Navn ændret: John Doe.

2. Standalone Ng Ny kollektion

Fra Angular v16 kan du oprette nye selvstændige projekter lige fra begyndelsen! For at prøve udviklereksemplet af de selvstændige skemaer skal du sikre dig, at du har Angular CLI v16 installeret og køre følgende kommando:

ng ny --standalone

Ved at gøre dette får du en enklere projektstruktur uden NgModules. Desuden vil alle generatorerne i projektet producere selvstændige direktiver, komponenter og rør!

3. Automatisk kortlægning af ruteparametre

Overvej en routing-konfiguration som følger:

eksportkonst ruter: Ruter = [{
 sti: 'search:/id',
 komponent: SearchComponent,
 beslutte: {
 searchDetails: searchResolverFn
 }
}];

Før Angular 16 var du nødt til at injicere ActivatedRoute-tjenesten for at hente URL-parametre, forespørgselsparametre eller tilknyttede data for en bestemt URL.

Her er et eksempel på, hvordan du skulle gøre det:

@Komponent({
 ...
})
eksportklasse Søgekomponent {
 skrivebeskyttet #activatedRoute = injicer (ActivatedRoute);
 skrivebeskyttet id$ = det her.#activatedRoute.paramMap (kort(params => params.get('id')));
 skrivebeskyttede data$ = det her.#activatedRoute.data.map(({
 søgedetaljer
 }) => søgedetaljer);
}

Med Angular 16 behøver du ikke længere injicere ActivatedRoute-tjenesten for at hente forskellige ruteparametre, fordi du kan binde dem direkte til komponentindgange.

For at aktivere denne funktionalitet i en applikation, der bruger modulsystemet, skal du indstille den tilsvarende værdi i RouterModule-indstillingerne:

RouterModule.forRoot (ruter, {
 bindComponentInputs: rigtigt
})

For en selvstændig applikation skal du kalde en funktion i stedet for:

provideRoutes (ruter, withComponentInputBinding());

Når du aktiverer denne funktionalitet, bliver komponenten meget enklere:

@Komponent({
 ...
})
eksportklasse Søgekomponent {
@Input() id!: snor;
@Input() searchDetails!: SearchDetails;
}

4. Påkrævet input

En meget ventet funktion for Angular-fællesskabet er evnen til at markere visse input efter behov. Indtil nu har du været nødt til at bruge forskellige løsninger for at opnå dette, som at rejse en fejl i NgOnInit livscyklus, hvis variablen ikke var defineret, eller ændring af komponentens vælger til at inkludere den obligatoriske input.

Begge disse løsninger havde dog deres fordele og ulemper. Fra version 16 er det lige så enkelt at kræve et input som at angive et konfigurationsobjekt i inputannotationens metadata:

@Input({
 påkrævet: rigtigt
}) navn!: snor;

5. Vite som udviklerserver

Angular 14 introducerede en ny JavaScript-bundler kaldet EsBuild, som markant forbedrede byggetiden med cirka 40 %. Du kunne dog kun realisere denne ydeevnegevinst under byggefasen og ikke under udvikling med udviklerserveren.

I den kommende udgivelse af Angular, Vite byggeværktøjet gør det også muligt at bruge EsBuild under udvikling.

For at aktivere denne funktion skal du opdatere builder-konfigurationen i filen angular.json som følger:

"arkitekt": {
"bygge": {
"Bygger": "@angular-devkit/build-angular: browser-esbuild",
"muligheder": {
 ...
 }
 }

Bemærk venligst, at denne funktionalitet stadig er eksperimentel.

Forbedring af udviklingsoplevelse og ydeevne

Angular version 16 bringer spændende opdateringer som Angular Signals til håndtering af data, selvstændigt projekt oprettelse, automatisk ruteparameterkortlægning, nødvendige input og integration af Vite for forbedret udvikling. Disse forbedringer forbedrer udviklingsoplevelsen og øger applikationsydelsen.