Angular 6 et ses nouvelles fonctionnalités - expliquées en trois minutes

Angular a sorti quelques nouvelles fonctionnalités étonnantes dans la version 6.0.0, en particulier dans Angular-cli. Désormais, avec Angular 6, vous pouvez facilement mettre à jour vos anciens packages, créer des éléments Web natifs à l'aide d'Angular Elements et bien d'autres choses. Nous allons jeter un coup d'oeil!

ng ajouter

ng addest une nouvelle commande dans Angular-cli qui vous aide à installer et télécharger de nouveaux packages dans vos applications angulaires. Il fonctionne de la même manière que npm, mais il ne le remplace pas.

mise à jour ng

ng updateest également une nouvelle commande Angular-cli. Il est utilisé pour mettre à jour et mettre à niveau vos packages. C'est vraiment utile, par exemple, lorsque vous souhaitez mettre à niveau Angular 5 vers Angular 6, ou tout autre package dans votre application Angular.

Déclarer les fournisseurs à l'intérieur du service lui-même

Avant cette mise à jour, vous deviez déclarer le tableau des fournisseurs dans app.module.ts

Désormais, avec Angular 6, vous pouvez fournir votre service à l'intérieur du superviseur lui-même en plaçant la providedIn:rootpropriété dans le « décorateur » @injectable" .

Utilisez ng-template au lieu de la directive template

Vous pouvez utiliser ng-templatepour rendre le HTML au lieu de la templatebalise dans la nouvelle version d'Angular. ng-templateest un élément angulaire, et il fonctionne lorsqu'il est utilisé avec une directive structurelle telle que *ngForet*ngIf

Éléments angulaires

Angular 6 nous a présenté les éléments angulaires. Vous pouvez rendre vos éléments angulaires en tant qu'éléments Web natifs et ils sont interprétés comme des éléments HTML de confiance.

Vous pouvez ajouter des éléments angulaires en exécutant la commande ci-dessous:

Importez createCustomElementdans votre composant.

Créez ensuite votre élément personnalisé!

MyElemComponent.ts

Le résultat:

Remarque: vous devez implémenter la DomSanitizerméthode from @angular/platform-browserpour faire de votre élément personnalisé une balise HTML de confiance.

Vous pouvez en savoir plus sur les éléments angulaires ici

Mise à niveau vers RxJS 6.0.0

Angular 6 utilise la dernière version de la bibliothèque Rxjs. Vous pouvez maintenant profiter des dernières fonctionnalités de RxJS 6 dans votre application Angular :)

Emballer

Angular lui-même n'a pas beaucoup de changements révolutionnaires dans le noyau angulaire, mais Angular-cli est vraiment excitant. L'équipe Angular se concentre davantage sur les performances, créant facilement des PWA, offrant un bon environnement de travail dans lequel travailler avec Angular de manière simple.

Vous pouvez me trouver sur Twitter.

En passant, j'ai récemment travaillé avec un groupe d'ingénieurs logiciels pour l'une de mes applications mobiles. L'organisation était formidable et le produit a été livré très rapidement, beaucoup plus rapidement que les autres entreprises et indépendants avec lesquels j'ai travaillé, et je pense que je peux honnêtement les recommander pour d'autres projets. Envoyez-moi un e-mail si vous souhaitez me contacter - [email protected]