Interprétation détaillée des nouvelles fonctionnalités d'Angular5.1

Cet article présente principalement les nouvelles fonctionnalités d'Angular5.1 et l'utilisation associée. Les amis dans le besoin peuvent s'y référer.

Cet article partage avec vous en détail les améliorations et ajouts d'Angular 5.1 en présentant les nouvelles fonctionnalités d'Angular 5.1. Voici le contenu complet :

Nouvelles fonctionnalités

. Version stable d'Angular Material et CDK

Service Worker pris en charge dans CLI

Support universel et AppShell amélioré dans CLI

Messages d'erreur améliorés pour les décorateurs

Support TypeScript2.5

Pour une liste complète des fonctionnalités et des corrections de bugs, veuillez consulter le journal des modifications pour Angular, Material et CLI.

Angular Material et CDK Stable

Après 11 versions alpha, 12 versions bêta et 3 versions candidates, nous sommes ravis de marquer désormais 5.0 pour Angular Material et Angular CDK .0 version stable. Basé sur le langage de conception visuelle Material Design de Google, Angular Material fournit 30 composants d'interface utilisateur pour vos applications Angular. Combiné avec Angular CDK, Angular CDK (Component Development Kit) fournit un ensemble de blocs de construction qui vous aident à créer vos propres composants personnalisés sans avoir à résoudre à nouveau les problèmes courants. Ces composants sont déjà utilisés en production par de nombreuses applications Google, notamment la suite Google Analytics, la console développeur Google Cloud Platform et Google Shopping Express.

À partir de cette version, Angular Material suivra la même philosophie sémantique qu'Angular, et la version principale d'Angular Material et Angular CDK seront publiées en même temps en tant que version principale des autres plateformes. Les versions de correction de bugs seront publiées par itérations hebdomadaires, tandis que des versions mineures seront publiées au fur et à mesure que les fonctionnalités seront complétées.

Visitez matrial.angular.io pour la documentation, les démos et notre guide de démarrage. Vous pouvez également suivre nos progrès sur Github à mesure que nous continuons à ajouter de nouvelles classes au framework. Dans les mois à venir, gardez un œil sur des éléments tels que le nouveau mat-tree, le défilement virtuel, les suites de tests de composants et la fonctionnalité glisser-déposer.

Support Worker pour CLI1.6

Les performances ont toujours été un objectif important pour les développeurs Web, et dans les événements LAN WIFI et réseaux mobiles d'aujourd'hui, les performances ont toujours été un objectif important. Les navigateurs modernes disposent d'une nouvelle API pour créer des sites fiables et à chargement rapide appelée API Service Worker.

Angular 5.0.0 est livré avec une nouvelle implémentation de Service Worker personnalisée pour les applications Angular, et Angular CLI 1.6 inclut la prise en charge de la création d'applications qui tirent parti de cette nouvelle fonctionnalité. L'utilisation de @angular/service-worker peut améliorer les performances de chargement de votre application dans les navigateurs prenant en charge cette API et rendre l'expérience de chargement de votre application plus proche d'une application native.

CLI1.6 améliore la prise en charge d'Universal et d'App Shell

De plus, avec la sortie d'Angular CLI1.6, il est encore mieux d'ajouter Universal à vos projets existants via Schematics et de fournir App Shell fournit une prise en charge .

Angular Universal

Pour ajouter Universal à votre projet CLI actuel, vous pouvez utiliser la commande suivante dans le répertoire de votre projet :

npm generate universal <name>

Remplacer 8a11bc632ea32a57b3e3693c7987c420 avec le nom que vous souhaitez donner à votre application. Cela prendra votre application adoptée, créera un module commun et configurera automatiquement votre fichier angulaire-cli.json pour vous. Vous pouvez ensuite passer à l’étape 4 de notre guide d’utilisation d’Universal.

Pour créer votre application universelle, exécutez simplement la commande suivante :

ng build --app=<name>

App Shell

Une fonctionnalité supplémentaire est la prise en charge d'App Shell. Vous pouvez désormais générer et créer un shell d'application qui utilise Universal pour créer un premier rendu statique pour votre application dans votre page index.html. Cela donne à l'utilisateur une meilleure expérience lors du lancement de votre application.

Tout d'abord, assurez-vous qu'il existe un module RouterModule importé dans le NgModule de votre application et qu'il existe un module b06060c1b765d597eda031c226772d27d643f9f2456fe4db0e530134a61924e2 App Shell utilise le routage pour afficher votre application.

Exécutez la commande suivante :

ng generate app-shell [ --universal-app <universal-app-name>] [ --route <route>]

Ajoutez la prise en charge de tous les shells de l'application principale à votre fichier angulaire-cli.json en passant le paramètre app-shell. Si l’application universelle échoue, une application universelle sera créée lors de la première exécution d’Universal Schematic. Les paramètres de routage spécifient la configuration de routage générée lors de la création de l'application. (App Shell nécessite la prise en charge du routage). La valeur par défaut est /shell.

Après avoir terminé cette étape, utilisez simplement ng build pour construire l'application normalement, et le fichier index.html contiendra les routes automatiquement rendues.

Messages d'erreur du décorateur améliorés

Les diagnostics générés par le compilateur ont été considérablement améliorés, notamment lorsque les décorateurs contiennent des expressions de formule non prises en charge ou incorrectes.

Exemple : l'appel d'une fonction pour traiter un modèle n'est pas pris en charge.

@Component({
 template: genTemplate()
})

Voici l'erreur qui se produisait auparavant :

Error encountered resolving symbol values statically. Calling function ‘genTemplate', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol MyComponent in components.ts, resolving symbol MyComponent in components.ts

Cette erreur a été améliorée et la source et la nature du problème ont été clarifiées.

component.ts(9,16): Error during template compile of 'MyComponent'.
 Function calls are not supported in decorators but 'genTemplate' was called.

Prise en charge de TypeScript 2.5

Nous avons ajouté la prise en charge de TypeScript 2.5, qui est recommandé par tous les développeurs. Cette version de TypeScript comprend plusieurs fonctionnalités avancées utiles.

Vous pouvez mettre à niveau votre Typescript en ajoutant un typescript@'~2.5.3' ou npm install typescript@'~2.5.3'.

Cette mise à jour est facultative, TypeScript 2.4 continue de prendre en charge Angular 5.X Nous ne prenons pas encore en charge TypeScript 2.6. Notre plan est d'ajouter le support dans une future version mineure.

a7d71c5568cd0c774b4c2d188d23325cRemarque importante : a76bcb5cf2f22c4f8daeb0ab5ac42844Si votre code utilise injector.get(Token) et que Token a des membres statiques, vous rencontrerez des problèmes TypeScript et le type renvoyé est {} Au lieu de Token . Vous pouvez utiliser Injector.get42e4dd2825ec91a3f52b146cc8a24e44(Token) pour obtenir la valeur de retour souhaitée.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Utilisation connexe de js array réduire

Comment utiliser la fonction de remplacement en javascript

Comment implémenter la fonction de lecture audio à l'aide de JavaScript

Comment implémenter la fonction de copie à l'aide du code js

Comment implémenter js en utilisant la classe de la bibliothèque tangram.js

Comment implémenter le chargement différé d'images qui ne sont pas sur le premier écran dans JS

Comment empêcher le rendu répété en utilisant React

Comment implémenter la fonction directive dans vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!