Angular 4 - Aperçu

Il existe trois versions majeures d'Angular. La première version publiée est Angular1, également appelée AngularJS. Angular1 a été suivi par Angular2, qui a apporté de nombreux changements par rapport à Angular1.

La structure d'Angular est basée sur l'architecture des composants / services. AngularJS était basé sur le contrôleur de vue modèle.Angular 4 publié en mars 2017 s'avère être une avancée majeure et est la dernière version de l'équipe Angular après Angular2.

Angular 4 est presque identique à Angular 2. Il a une compatibilité descendante avec Angular 2. Les projets développés dans Angular 2 fonctionneront sans aucun problème avec Angular 4.

Voyons maintenant les nouvelles fonctionnalités et les modifications apportées à Angular 4.

Pourquoi Angular4 et pas Angular3?

L'équipe Angular a été confrontée à des problèmes de version en interne avec ses modules et en raison du conflit, elle a dû passer à autre chose et publier la prochaine version d'Angular - l'Angular4.

Voyons maintenant les nouvelles fonctionnalités ajoutées à Angular 4 -

ngIf

Angular2 ne prend en charge que le ifétat. Cependant, Angular 4 prend en charge leif elseétat aussi. Voyons comment cela fonctionne en utilisant le ng-template.

<span *ngIf="isavailable; else condition1">Condition is valid.</span>
<ng-template #condition1>Condition is invalid</ng-template>

comme mot-clé dans la boucle for

Avec l'aide de as mot-clé, vous pouvez stocker la valeur comme indiqué ci-dessous -

<div *ngFor="let i of months | slice:0:5 as total">
   Months: {{i}} Total: {{total.length}}
</div>

La variable total stocke la sortie de la tranche en utilisant le as mot-clé.

Package d'animation

L'animation dans Angular 4 est disponible en tant que package séparé et doit être importée depuis @ angular / animations. Dans Angular2, il était disponible avec @angular/core. Il est toujours le même pour son aspect de compatibilité descendante.

Modèle

Angular 4 les usages <ng-template> comme balise au lieu de <template>;ce dernier a été utilisé dans Angular2. La raison pour laquelle Angular 4 a changé<template> à <ng-template> est à cause du conflit de nom du <template> tag avec le html <template>étiquette standard. Cela deviendra complètement obsolète. C'est l'un des changements majeurs dans Angular 4.

TypeScript 2.2

Angular 4 est mis à jour vers une version récente de TypeScript, qui est la 2.2. Cela permet d'améliorer la vitesse et de mieux vérifier le type dans le projet.

Cas de titre de tuyau

Angular 4 a ajouté une nouvelle casse de titre de pipe, qui change la première lettre de chaque mot en majuscule.

<div>
   <h2>{{ 'Angular 4 titlecase' | titlecase }}</h2>
</div>

La ligne de code ci-dessus génère la sortie suivante - Angular 4 Titlecase.

Paramètres de recherche HTTP

Les paramètres de recherche de l'API http get sont simplifiés. Nous n'avons pas besoin d'appelerURLSearchParams pour la même chose que ce qui était fait dans Angular2.

Applications plus petites et plus rapides

Les applications Angular 4 sont plus petites et plus rapides par rapport à Angular2. Il utilise la version 2.2 de TypeScript, la dernière version qui rend la compilation finale de petite taille.