Wat is er nieuw in Angular v16?

Angular, beheerd door Google, is een veel gebruikt open-source framework voor het ontwikkelen van webapplicaties. Het biedt u een robuuste toolkit en een reeks functies waarmee u dynamische, responsieve en schaalbare webapplicaties kunt maken.

De recente lancering van Angular versie 16 introduceert opwindende updates en verbeteringen in de ontwikkelervaring, evenals betere applicatieprestaties en stabiliteit.

1. Hoekige signalen

Hoekige signalen is een bibliotheek die de definitie van reactieve waarden en het tot stand brengen van afhankelijkheden daartussen mogelijk maakt. Hier is een eenvoudig voorbeeld van het gebruik van hoeksignalen binnen een hoektoepassing:

@Onderdeel ({
 kiezer: 'mijn-app',
 op zichzelf staand: WAAR,
 sjabloon: `
{{ voor-en achternaam() }} "setNaam('Jan')">Klik</button>
`,
})
exporterenklas App {
 voornaam = signaal('Jane');
 achternaam = signaal('Doe');
 volledigeNaam = berekend(





instagram viewer

() =>`${dit.Voornaam()}${dit.achternaam()}`);
constructeur() {
 effect(() =>troosten.log('Naam veranderd:', dit.voor-en achternaam()));
 }
 setNaam (nieuweNaam: snaar) {
dit.voornaam.set (nieuweNaam);
 }
}

Het bovenstaande codefragment maakt een berekende waarde met de naam fullName, die afhankelijk is van de signalen firstName en lastName. Bovendien definieert het een effect, een callback-functie die wordt uitgevoerd wanneer de waarde van de signalen die het leest verandert.

In dit geval is de waarde fullName afhankelijk van firstName en lastName, dus het wijzigen van een van beide activeert het effect. Wanneer de waarde van firstName is ingesteld op John, logt de browser het volgende bericht in de console:

 Naam veranderd: John Doe.

2. Standalone Ng nieuwe collectie

Vanaf Angular v16 kunt u vanaf het begin nieuwe zelfstandige projecten maken! Om de ontwikkelaarspreview van de zelfstandige schema's uit te proberen, moet u ervoor zorgen dat Angular CLI v16 is geïnstalleerd en voert u de volgende opdracht uit:

nieuw --standalone

Door dit te doen, krijgt u een eenvoudigere projectstructuur zonder NgModules. Bovendien zullen alle generatoren in het project op zichzelf staande richtlijnen, componenten en leidingen produceren!

3. Automatische routeparameters in kaart brengen

Overweeg een routeringsconfiguratie als volgt:

exporterenconst routes: Routes = [{
 pad: 'zoeken:/id',
 component: SearchComponent,
 oplossen: {
 zoekDetails: zoekResolverFn
 }
}];

Vóór Angular 16 moest u de ActivatedRoute-service injecteren om URL-parameters, queryparameters of bijbehorende gegevens voor een bepaalde URL op te halen.

Hier is een voorbeeld van hoe je het moest doen:

@Onderdeel({
 ...
})
exporterenklas Zoekcomponent {
 alleen-lezen #activatedRoute = injecteren (ActivatedRoute);
 alleen-lezen id $ = dit.#activatedRoute.paramMap (kaart(parameters => params.get('ID kaart')));
 alleen-lezen gegevens$ = dit.#activatedRoute.data.map(({
 zoekDetails
 }) => zoekDetails);
}

Met Angular 16 hoeft u niet langer de ActivatedRoute-service te injecteren om verschillende routeparameters op te halen, omdat u ze rechtstreeks kunt binden aan componentinvoer.

Om deze functionaliteit te activeren in een toepassing die het modulesysteem gebruikt, stelt u de overeenkomstige waarde in de RouterModule-opties in:

RouterModule.forRoot (routes, {
 bindComponentIngangen: WAAR
})

Voor een zelfstandige toepassing moet u in plaats daarvan een functie aanroepen:

biedenRoutes (routes, withComponentInputBinding());

Zodra u deze functionaliteit activeert, wordt het onderdeel veel eenvoudiger:

@Onderdeel({
 ...
})
exporterenklas Zoekcomponent {
@Invoer() ID kaart!: snaar;
@Invoer() zoekDetails!: ZoekDetails;
}

4. Vereiste invoer

Een langverwachte functie voor de Angular-gemeenschap is de mogelijkheid om bepaalde invoer als vereist te markeren. Tot nu toe moest je verschillende oplossingen gebruiken om dit te bereiken, zoals het genereren van een fout in de NgOnInit levenscyclus als de variabele niet is gedefinieerd of als de selector van de component wordt gewijzigd om de verplichte variabele op te nemen ingangen.

Beide oplossingen hadden echter hun voor- en nadelen. Vanaf versie 16 is het maken van een vereiste invoer net zo eenvoudig als het opgeven van een configuratieobject in de metadata van de invoerannotatie:

@Invoer({
 vereist: WAAR
}) naam!: snaar;

5. Vite als Dev Server

Angular 14 introduceerde een nieuwe JavaScript-bundeler genaamd EsBuild, die de bouwtijd aanzienlijk verbeterde met ongeveer 40%. U kunt deze prestatiewinst echter alleen realiseren tijdens de bouwfase en niet tijdens de ontwikkeling met de dev-server.

In de aanstaande release van Angular, de Vite-bouwtool maakt het gebruik van EsBuild ook tijdens de ontwikkeling mogelijk.

Om deze functie te activeren, werkt u de configuratie van de builder in het bestand angular.json als volgt bij:

"architect": {
"bouwen": {
"bouwer": "@angular-devkit/build-angular: browser-esbuild",
"opties": {
 ...
 }
 }

Houd er rekening mee dat deze functionaliteit nog experimenteel is.

Verbetering van ontwikkelingservaring en -prestaties

Angular-versie 16 brengt opwindende updates zoals Angular Signals voor het beheren van gegevens, een op zichzelf staand project creatie, automatische mapping van routeparameters, vereiste invoer en integratie van Vite voor verbeterde ontwikkeling. Deze verbeteringen verbeteren de ontwikkelervaring en verhogen de prestaties van applicaties.