Angular 14 byder på selvstændige komponenter

2 kommentarer.  Hop til debatten
Angular 14 byder på selvstændige komponenter
Illustration: Mehaniq/Bigstock.
Komponenter uden omkapslende moduler og typesikre formularer er blandt nyhederne i Googles webframework.
7. juni kl. 16:23
errorÆ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
Debatten
Log ind for at deltage i debatten.
settingsDebatindstillinger
2
Journalist -
9. juni kl. 17:25
Journalist

Tak for tip - linket er nu opdateret.

Vh Tania/V2