Quoi de neuf dans Angular v16 ?

Angular, géré par Google, est un framework open source largement utilisé pour le développement d'applications Web. Il vous offre une boîte à outils robuste et une gamme de fonctionnalités qui vous permettent de créer des applications Web dynamiques, réactives et évolutives.

Le lancement récent de la version 16 d'Angular introduit des mises à jour et des améliorations passionnantes de l'expérience de développement, ainsi que de meilleures performances et stabilité des applications.

1. Signaux angulaires

Signaux angulaires est une bibliothèque qui permet de définir des valeurs réactives et d'établir des dépendances entre elles. Voici un exemple simple d'utilisation des signaux angulaires dans une application angulaire :

@Composant ({
 sélecteur: 'mon-app',
 autonome: vrai,
 modèle: `
{{ nom et prénom() }} "setName('Jean')">Cliquez</button>
`,
})
exporterclasse Application {
 prenom = signal('Jeanne');





instagram viewer


 nom=signal('Biche');
 nomcomplet = calculé(() =>`${ce.prénom()}${ce.nom de famille()}`);
constructeur() {
 effet(() =>console.enregistrer('Nom modifié :', ce.nom et prénom()));
 }
 setName (nouveauNom: chaîne) {
ce.firstName.set (nouveauNom);
 }
}

L'extrait de code ci-dessus crée une valeur calculée appelée fullName, qui repose sur les signaux firstName et lastName. De plus, il définit un effet, une fonction de rappel qui s'exécute chaque fois que la valeur des signaux qu'il lit change.

Dans ce cas, la valeur fullName dépend de firstName et lastName, donc la modification de l'un d'eux déclenche l'effet. Lorsque la valeur de firstName est définie sur John, le navigateur consigne le message suivant dans la console :

 Nom changé: John Doe.

2. Autonome Ng Nouvelle Collection

À partir d'Angular v16, vous pouvez créer de nouveaux projets autonomes dès le début! Pour essayer l'aperçu développeur des schémas autonomes, assurez-vous que vous avez installé Angular CLI v16 et exécutez la commande suivante :

nouveau --standalone

En faisant cela, vous obtiendrez une structure de projet plus simple sans aucun NgModules. De plus, tous les générateurs du projet produiront des directives, des composants et des tuyaux autonomes !

3. Mappage automatique des paramètres de route

Considérez une configuration de routage comme suit :

exporterconstante routes: Routes = [{
 chemin: 'rechercher:/id',
 composant: SearchComponent,
 résoudre: {
 searchDetails: searchResolverFn
 }
}];

Avant Angular 16, vous deviez injecter le service ActivatedRoute pour récupérer les paramètres d'URL, les paramètres de requête ou les données associées pour une URL particulière.

Voici un exemple de la façon dont vous avez dû le faire :

@Composant({
 ...
})
exporterclasse Composant de recherche {
 readonly #activatedRoute = inject (ActivatedRoute);
 id $ en lecture seule = ce.#activatedRoute.paramMap (carte(paramètres => paramètres.get('identifiant')));
 données en lecture seule$ = ce.#activatedRoute.data.map(({
 rechercherDétails
 }) => rechercheDétails);
}

Avec Angular 16, vous n'avez plus besoin d'injecter le service ActivatedRoute pour récupérer divers paramètres de route car vous pouvez les lier directement aux entrées du composant.

Pour activer cette fonctionnalité dans une application qui utilise le système de modules, définissez la valeur correspondante dans les options RouterModule :

RouterModule.forRoot (routes, {
 bindComponentInputs: vrai
})

Pour une application autonome, vous devez plutôt appeler une fonction :

provideRoutes (routes, withComponentInputBinding());

Une fois cette fonctionnalité activée, le composant devient beaucoup plus simple :

@Composant({
 ...
})
exporterclasse Composant de recherche {
@Saisir() identifiant!: chaîne;
@Saisir() searchDetails! : SearchDetails ;
}

4. Entrée requise

Une fonctionnalité très attendue pour la communauté Angular est la possibilité de marquer certaines entrées comme requis. Jusqu'à présent, vous deviez utiliser diverses solutions de contournement pour y parvenir, comme générer une erreur dans le NgOnInit cycle de vie si la variable n'a pas été définie ou en modifiant le sélecteur du composant pour inclure l'obligatoire contributions.

Cependant, ces deux solutions avaient leurs avantages et leurs inconvénients. À partir de la version 16, rendre une entrée obligatoire est aussi simple que de fournir un objet de configuration dans les métadonnées de l'annotation d'entrée :

@Saisir({
 requis: vrai
}) nom!: chaîne;

5. Vite en tant que serveur de développement

Angular 14 a introduit un nouveau bundle JavaScript appelé EsBuild, qui a considérablement amélioré les temps de construction d'environ 40 %. Cependant, vous ne pourriez réaliser ce gain de performances que pendant la phase de construction et non pendant le développement avec le serveur de développement.

Dans la prochaine version d'Angular, l'outil de construction Vite permet également l'utilisation d'EsBuild pendant le développement.

Pour activer cette fonctionnalité, mettez à jour la configuration du générateur dans le fichier angular.json comme suit :

"architecte": {
"construire": {
"constructeur": "@angular-devkit/build-angular: navigateur-esbuild",
"options": {
 ...
 }
 }

Veuillez noter que cette fonctionnalité est encore expérimentale.

Amélioration de l'expérience et des performances de développement

Angular version 16 apporte des mises à jour intéressantes comme Angular Signals pour la gestion des données, projet autonome création, mappage automatique des paramètres de route, entrées requises et intégration de Vite pour une amélioration développement. Ces améliorations améliorent l'expérience de développement et augmentent les performances des applications.