Emma Twersky Ingénieur en relations avec les développeurs chez Google, spécialisé dans Angular et l'open source a annoncé la version 14 d’Angular, le framework open source basé sur TypeScript, elle résout le problème le plus important d'Angular sur GitHub : la mise en œuvre d'un typage strict pour le package Angular Reactive Forms. « Nous sommes ravis d'annoncer la sortie de la version 14 d'Angular ! Des formulaires typés et des composants autonomes aux nouvelles primitives du CDK (component dev kit) d'Angular, nous sommes ravis de partager comment chaque fonctionnalité rend Angular plus puissant », a déclaré Emma.Angular est un framework d'application web open source basé sur TypeScript, dirigé par l'équipe Angular de Google et par une communauté de particuliers et de sociétés. C’est une réécriture complète de la même équipe qui a construit AngularJS. Angular est utilisé comme frontal de la pile MEAN, composée de la base de données MongoDB, du framework de serveur d'applications Web Express.js, d'Angular lui-même (ou AngularJS) et de l'environnement d'exécution du serveur Node.js. Voici, ci-dessous, les nouveautés apportées par la version 14 d’Angular :
Simplifier Angular avec les composants autonomes
Les composants autonomes Angular visent à simplifier la création d'applications Angular en réduisant le besoin de NgModules. Dans la version 14, les composants autonomes sont en version préliminaire pour les développeurs. Ils sont prêts à être utilisés dans les applications à des fins d'exploration et de développement, mais ne constituent pas une API stable et seront potentiellement modifiés en dehors du modèle typique de rétrocompatibilité.
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; // includes NgIf and TitleCasePipe
import { bootstrapApplication } from '@angular/platform-browser';
import { MatCardModule } from '@angular/material/card';
import { ImageComponent } from './app/image.component';
import { HighlightDirective } from './app/highlight.directive';
@Component({
selector: 'app-root',
standalone: true,
imports: [
ImageComponent, HighlightDirective, // import standalone Components, Directives and Pipes
CommonModule, MatCardModule // and NgModules
],
template: `
<mat-card *ngIf="url">
<app-image-component [url]="url"></app-image-component>
<h2 app-highlight>{{name | titlecase}}</h2>
</mat-card>
`
})
export class ExampleStandaloneComponent {
name = "emma";
url = "www.emma.org/image";
}
// Bootstrap a new Angular application using our `ExampleStandaloneComponent` as a root component.
bootstrapApplication(ExampleStandaloneComponent); |
Avec les composants autonomes, les directives et les pipes, le tag standalone : true permet d'ajouter des importations directement dans @Component() sans @NgModule().
Dans la preview pour développeurs, l’équipe Angular utilise l'open source pour s’assurer que les composants autonomes sont entièrement prêts à être publiés en tant qu'API stable.
Formulaires Angular typés
La version 14 d’Angular résout le problème le plus important d'Angular sur GitHub : la mise en œuvre d'un typage strict pour le package Angular Reactive Forms.
Les formulaires typés garantissent que les valeurs contenues dans les contrôles de formulaires, les groupes et les tableaux sont sûres sur toute la surface de l'API. Cela permet d'obtenir des formulaires plus sûrs, notamment pour les cas complexes et profondément imbriqués.
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | const cat = new FormGroup({
name: new FormGroup({
first: new FormControl('Barb'),
last: new FormControl('Smith'),
}),
lives: new FormControl(9),
});
// Type-checking for forms values!
// TS Error: Property 'substring' does not exist on type 'number'.
let remainingLives = cat.value.lives.substring(1);
// Optional and required controls are enforced!
// TS Error: No overload matches this call.
cat.removeControl('lives');
// FormGroups are aware of their child controls.
// name.middle is never on cat
let catMiddleName = cat.get('name.middle'); |
La mise à jour des schémas permet une migration incrémentielle vers les formulaires typés, de sorte qu’il est possible d’ajouter progressivement le typage aux formulaires existants avec une rétrocompatibilité totale. La mise à jour ng remplacera toutes les classes de formulaires par des versions non typées (par exemple, FormGroup -> UntypedFormGroup). Il est ensuite possible d’activer les types à votre propre rythme (par exemple, UntypedFormGroup -> FormGroup).
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // v13 untyped form
const cat = new FormGroup({
name: new FormGroup(
first: new FormControl('Barb'),
last: new FormControl('Smith'),
),
lives: new FormControl(9)
});
// v14 untyped form after running `ng update`
const cat = new UntypedFormGroup({
name: new UntypedFormGroup(
first: new UntypedFormControl('Barb'),
last: new UntypedFormControl('Smith'),
),
lives: new UntypedFormControl(9)
}); |
Afin de profiter de la nouvelle prise en charge de la typographie, il est...
La fin de cet article est réservée aux abonnés. Soutenez le Club Developpez.com en prenant un abonnement pour que nous puissions continuer à vous proposer des publications.
Envoyé par poma88
