Angular v18
ven, 24/05/2024 - 15:02
L'équipe du projet Angular a annoncé la disponibilité d'Angular v18. Il s'agit d'une grosse version majeure, comme en témoigne le billet qui annonce la disponibilité d'Angular v18. Le changement le plus notable, selon le projet, est une nouvelle fonctionnalité expérimentale : les détections de modifications zoneless.
Historiquement, une bibliothèque appelée zone.js était chargée de déclencher la détection des modifications d'Angular. Cette bibliothèque présentait un certain nombre d’inconvénients en matière d’expérience de développement et de performances. Le projet Angular travaille depuis plusieurs années sur une manière d'utiliser Angular qui ne repose pas sur zone.js, et partage, avec Angular v18 les premières API expérimentales pour le zoneless (ou sans zone).
Vous pouvez essayer le support expérimental sans zone dans Angular à partir d'aujourd'hui. Ajoutez provideExperimentalZonelessChangeDetection au bootstrap de votre application :
bootstrapApplication(App, {
providers: [
provideExperimentalZonelessChangeDetection()
]
});
Après avoir ajouté le fournisseur, supprimez zone.js de vos polyfills dans angular.json.
À l’avenir, selon les concepteurs d'Angular, le sans zone ouvre de nombreuses portes aux développeurs :
- Améliorer la composabilité pour les micro-frontends et l'interopérabilité avec d'autres frameworks
- Rendu initial et exécution plus rapides
- Taille de paquet plus petite et chargements de pages plus rapides
- Traces de pile plus lisibles
- Débogage plus simple
La meilleure façon d'utiliser le sans zone dans vos composants est d'utiliser des signaux :
@Component({
...
template: `
<h1>Hello from {{ name() }}!</h1>
<button (click)="handleClick()">Go Zoneless</button>
`,
})
export class App {
protected name = signal('Angular');
handleClick() {
this.name.set('Zoneless Angular');
}
}
Dans l'exemple ci-dessus, cliquer sur le bouton appelle la méthode handleClick, qui met à jour la valeur du signal et met à jour l'interface utilisateur.
Un nouveau site pour les développeurs
L'équipe Angular a travaillé sur un nouveau site pour proposer un parcours de démarrage intuitif et pratique et des guides approfondis améliorés. Ce nouveau site, angular.dev est désormais le site de documentation officiel d'Angular.
En plus de la nouvelle apparence moderne, vous pouvez trouver un didacticiel pratique interactif basé sur WebContainers , un terrain de jeu interactif avec des exemples, une recherche améliorée optimisée par Algolia , des guides actualisés, une navigation simplifiée,...
