La version d’Angular 6 est sortie ! Pour plus d’information c’est ici
Le 23 mars est sortie la nouvelle version majeure d’Angular : la 4.0 !
Pas de changement radical pour le développeur, les nouveautés se trouvent plutôt sous le capot : une réduction de poids pour vos projets et des améliorations de performance, le tout compatible avec vos anciens projets Angular 2.
Bref on ne va pas se plaindre… enfin un peu si, car le rythme effréné des versions sur Angular peut vite faire perdre la tête aux développeurs.
Au passage, nous organisons en France, en Suisse, au Luxembourg et en Belgique des formations Angular Ready !
Google prévoit déjà de sortir une version 5.0 de son framework d’ici octobre prochain, annonçant ainsi un cycle de développement de six mois.
Pourquoi pas 3.0 ?
Tout simplement pour normaliser les versions et repartir du bon pied !
En effet un seul package @angular/router était en 3.0, pendant que tous les autres étaient en 2.0.
L’équipe a donc naturellement tout renommé en 4.0, pour éviter les confusions.
Plus petit et plus rapide
AOT (Ahead of Time compilation) – View Engine
C’est peut-être le plus gros changement, et pourtant il ne se voit presque pas pour le développeur.
En effet la compilation anticipée permet une réduction drastique de vos projets web, en atteignant 60% de taille en moins.
Animation Package
Le package Animation ne fait plus partie d’@angular/core.
Ce qui rend vos projets plus modulables et plus légers, surtout si vous n’avez pas l’utilité de ce package.
L’autocomplétion en est améliorée et la documentation est plus lisible grâce à cette dissociation !
Vous pouvez ajouter des animations vous-même à votre NgModule en important BrowserAnimationsModule depuis @angular/platform-browser/animations
Nouvelles fonctionnalités pour les développeurs
TypeScript 2.1 : le passage obligé
Avec Angular 2, Google a été réécrit son framework avec le surensemble JavaScript typé de Microsoft : TypeScript.
L’un des objectifs de l’équipe Angular pour cette version 4.0 était donc de passer de TypeScript 1.8 à TypeScript 2.x.
C’est chose faite, et cela permet du coup au framework de Google de profiter de certains avantages : meilleure vérification de type et de meilleures performances pour ngc (compilateur des templates).
Angular Universal
Universal est devenue un projet supporté officiellement par l’équipe d’Angular !
Il vous permet l’exécution d’angular côté serveur (server-side rendering).
La majorité du code se trouve dans @angular/platform-server.
Pour en savoir plus sur l’utilisation d’Angular Universal, consultez la nouvelle méthode renderModuleFactory du package @angular/platform-server, ou bien le dépôt de démonstration de Rob Wormald.
Templates
template devient ng-template
La balise de modèle est maintenant obsolète: vous devez dès maintenant utiliser la balise ng-template.
Ce changement de nom a pour but d’éviter la confusion avec la nouvelle balise template HTML5.
Aider-vous des warnings lors de la migration de votre projet afin de faire la transition en douceur.
Amélioration de *ngIf and *ngFor
Quelques changements utiles qui se faisaient attendre sont apparus :
Vous pouvez désormais utiliser une syntaxe de if / else mais aussi affecter des variables locales sur un observable.
ngIf avec else
<div *ngIf="personnes.length > 0; else empty"> <h2>personnes</h2> </div> <ng-template #empty> <h2>Pas de personne.</h2> </ng-template>
as
<div *ngIf="personne | async as personneModel">
<h2>{{ personneModel.nom }}</h2>
<small>{{ personneModel.age }}</small>
</div>
Pipes
Titlecase
Angular 4 a introduit un nouveau Pipe pour les chaines de caractère. Il change la première lettre de chaque mot en majuscules:
<p>{{ 'ambient academy' | titlecase }}</p>
<!-- Affichage : 'Ambient Academy' -->
Http
L’ajout de paramètres pour la recherche à une requête HTTP a été simplifié avec cette syntaxe :
http.get(`${baseUrl}/api/formations`, { params: { sort: 'ascending' } });
Test
L’overriding d’un modèle dans un test a également été simplifiée avec cette nouvelle syntaxe :
TestBed.overrideTemplate(PersonneComponent, '<h2>{{personne.nom}}</h2>');
Forms
Validators : email
Un nouveau validateur rejoint les valeurs existantes minLength, maxLength et pattern.
email vous aide à valider la bonne saisie d’un mail.
Directive : compareWith
Une nouvelle directive a été ajoutée pour vous aider à comparer lors d’une sélection : compareWith.
<select [compareWith]="byId" [(ngModel)]="selectedPersonne">
<option *ngFor="let personne of listpersonnes" [ngValue]="personne">{{personne.nom}}</option>
</select>
byId(p1: PersonneModel, p2: PersonneModel) {
return p1.id === p2.id;
}
Router
ParamMap
Une nouvelle interface a été introduite pour représenter les paramètres d’une URL: ParamMap. Au lieu d’utiliser params ou queryParams, vous devez maintenant utiliser paramMap ou queryParamMap, car ils offrent le choix entre get() pour obtenir une valeur ou getAll() pour obtenir toutes les valeurs (les paramètres de requête peuvent avoir plusieurs valeurs par exemple).
const id = this.route.snapshot.paramMap.get('personneId');
this.personneService.get(id).subscribe(personne => this.personne = personne);
Ou bien en mode Observable :
this.route.paramMap
.map((params: ParamMap) => params.get('personneId'))
.switchMap(id => this.personneService.get(id))
.subscribe(personne => this.personne = personne);
CanDeactivate
L’interface CanDeactivate dispose maintenant d’un paramètre supplémentaire (optionnel), contenant l’état suivant (où vous allez naviguer). Vous pouvez maintenant implémenter une logique lorsque votre utilisateur navigue loin du composant actuel, selon l’endroit où il va.
Pour Aller plus loin
Vous pouvez retrouver une liste des ressources disponibles sur Angular dans notre Article comment se former à Angular. Il vous aidera à vous informer des nouveautés et à vous former dessus ou à perfectionner vos connaissances.
