Angular 14 byder på selvstændige komponenter

7. juni kl. 16:232
Angular 14 byder på selvstændige komponenter
Illustration: Mehaniq/Bigstock.
Komponenter uden omkapslende moduler og typesikre formularer er blandt nyhederne i Googles webframework.
Artiklen er ældre end 30 dage

En ny udgave af Googles Typescript-webframework Angular er på gaden, med versionsnummeret 14. Blandt nyhederne er fritstående komponenter, skriver Emma Twersky fra Google i et blogindlæg

Moduler er en  måde at organisere et program på og udvide det med funktioner fra eksterne biblioteker. Men det kan være en mere enkel fremgangsmåde helt at undgå dem.

»Standalone-komponenter til Angular har til formål at strømline udarbejdelsen af Angular-applikationer ved at reducere behovet for NgModules. I version 14 er standalone-komponenterne i preview for udviklere. De er klar til at blive brugt i dine applikationer til udforskning og udvikling, men de er ikke et stabilt api og vil potentielt ændre sig uden for vores typiske model for bagudkompatibilitet,« skriver Emma Twersky.

Et komponent kan nu skabes på denne måde, med property'en standalone sat til true.

  1. @Component({
  2. selector: 'app-root',
  3. standalone: true,
  4. imports: [
  5. ImageComponent, HighlightDirective, // import standalone Components, Directives and Pipes
  6. CommonModule, MatCardModule // and NgModules
  7. ],
  8. template: `
  9. <mat-card *ngIf="url">
  10. <app-image-component [url]="url"></app-image-component>
  11. <h2 app-highlight>{{name | titlecase}}</h2>
  12. </mat-card>
  13. `
  14. })
  15. export class ExampleStandaloneComponent {
  16. name = "emma";
  17. url = "www.emma.org/image";
  18. }

En anden nyhed er typer i formularer. Faciliteten har været den mest efterspurgte på Angulars Github-side. Den indebærer, at der er typetjek på værdier i formularer. Det kan se sådan ud:

  1. const cat = new FormGroup({
  2. name: new FormGroup({
  3. first: new FormControl('Barb'),
  4. last: new FormControl('Smith'),
  5. }),
  6. lives: new FormControl(9),
  7. });
  8.  
  9. // Type-checking for forms values!
  10. // TS Error: Property 'substring' does not exist on type 'number'.
  11. let remainingLives = cat.value.lives.substring(1);
  12.  
  13. // Optional and required controls are enforced!
  14. // TS Error: No overload matches this call.
  15. cat.removeControl('lives');
  16.  
  17. // FormGroups are aware of their child controls.
  18. // name.middle is never on cat
  19. let catMiddleName = cat.get('name.middle');

Der er flere nyheder i blogindlægget.

Artiklen fortsætter efter annoncen

Ifølge websitet NPM Trends, ligger Angular i bunden målt på antal downloads, i forhold til de to konkurrenter Vue og React.

 

 

2 kommentarer.  Hop til debatten
Denne artikel er gratis...

...men det er dyrt at lave god journalistik. Derfor beder vi dig overveje at tegne abonnement på Version2.

Digitaliseringen buldrer derudaf, og it-folkene tegner fremtidens Danmark. Derfor er det vigtigere end nogensinde med et kvalificeret bud på, hvordan it bedst kan være med til at udvikle det danske samfund og erhvervsliv.

Og der har aldrig været mere akut brug for en kritisk vagthund, der råber op, når der tages forkerte it-beslutninger.

Den rolle har Version2 indtaget siden 2006 - og det bliver vi ved med.

Debatten
Log ind eller opret en bruger for at deltage i debatten.
settingsDebatindstillinger
2
Journalist -
9. juni kl. 17:25
Journalist

Tak for tip - linket er nu opdateret.

Vh Tania/V2