Nouveautés Angular 7

Nouveautés Angular 7

Nouveautés Angular 7

La dernière version majeure du Framework Angular est disponible depuis mi octobre 2018. Angular 7.0.0 met à jour la totalité de la plate-forme, du Framework, d'Angular Material et CLI, ainsi que de nouvelles fonctionnalités.


CLI

La nouvelle CLI est tout simplement fantastique pour les commandes telles que ng new ou ng add.
Vous pouvez installer la dernière version de la CLI de manière globale : "npm install -g @angular/cli@latest"
Avec CLI, Angular.io inclut désormais la documentation pour l'interface de ligne de commande(https://angular.io/cli)!

 

MATERIAL

Angular Material a eu du succès cette année avec de nombreuses nouvelles mises à jour, y compris la nouvelle page d’accueil pour material.io.
Si vous êtes un utilisateur de Angular Material, à partir de la V7, vous devriez remarquer quelques petites différences visuelles au fur et à mesure que la bibliothèque s'aligne sur la spécification mise à jour de la conception de Material.

 

CDK - MAINTENANT AVEC DEFILEMENT VIRUTEL ET GLISSER-DEPOSER

Défilement virtuel

Le CDK dispose désormais de fonctionnalités de défilement virtuel que vous pouvez utiliser en important le module "ScrollingModule" !
Le défilement virtuel consiste à charger / décharger des éléments DOM en fonction de l'emplacement de l'utilisateur dans une liste d'éléments. Cela signifie que vos énormes listes défilables sont beaucoup plus rapides !
Voici donc StackBlitz d'Angular Material créé pour jouer avec le défilement virtuel.

<cdk-virtual-scroll-viewport itemSize="20">
<div *cdkVirtualFor="let dog of dogsArray">{{dog}}</div>
</cdk-virtual-scroll-viewport>

Drag & Drop

Le CDK prend également en charge le glisser-déposer, qui inclut les fonctionnalités astucieuses suivantes :
- Rendu automatique lorsque l'utilisateur déplace des éléments
- Méthodes d'assistance pour réorganiser / transférer des éléments dans des listes : "moveItemInArray" et "transferArrayItem"

 

AMELIORER LA PERFORMANCE DES APPLICATIONS

Il est toujours intérressant d'avoir des garanties qui nous sauvent de nous-mêmes. C'est précisément ce que fait la prochaine fonctionnalité en avertissant les développeurs lorsqu'ils dépassent le budget avec la taille de leur lot ! Les valeurs par défaut sont un avertissement à 2 Mo et une erreur à 5 Mo. Mais ne soyez pas effrayé ! Ces valeurs par défaut peuvent être facilement modifiées dans votre fichier angular.json. Pour cela :

"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]

Les reflect-metadata de Polyfill ont été supprimés en production afin d'aléger l'application.

 

METTRE A JOUR VERS ANGULAR 7?

Depuis une application Anguler v6, c'est assez simple ; il suffit d'éxécuter la commande suivante :

ng update @angular/cli @angular/core

 

Si vous avez besoin de vous former sur Angular 7, suivez notre formation Angular 7 sur 3 jours


Cette actualité a été postée avec les tags angular, javascript, typescript, angular-cli, material, rxjs

Catégories

Articles récents

Tags

android Android angular angular-cli angular-cli azure stack C# cloud dot net ios IOS javascript material mobile rxjs typescript Visual-Studio web windows mobile Xamarin .Net angular angular js asp mvc azure javascript material xaramin