Depuis ce jeudi 23 mars 2017, Angular 4 ... ou plutôt Angular V4.0.0 est en version finale. Comme annoncé, les changements sont sans commune mesure avec ceux que nous avons vécus en passant d'AngularJS à Angular V2.
Très peu de breaking changes
Migrer une application d'Angular V2.x à Angular V4.0.0 devrait se fera sans soucis (très peu de breaking changes). Certains packages - comme 'Renderer' - apparaîtront en 'deprecated' mais continueront à être utilisables jusqu'à Angular V5.0, où il faudra alors obligatoirement utiliser Renderer2.
Mise à jour de TypeScript requise
Pour passer à Angular V4.0, il faudra mettre à jour TypeScript afin de passer à TypeScript 2.1 ou 2.2.1, ce qui impliquera la disparitions de quelques interfaces.
Les animations ont leur propre package
Les animations ont droit à leur propre package. Ainsi vous importerez animate, state, style, transition et trigger depuis '@angular/animations' plutôt que depuis '@angular/core'. Du coup, si vous n'utilisez pas d'animations, la version 4.0 d' '@angular/core' n'embarquera plus des modules que vous n'utilisiez probablement pas. En revanche, si vous avez besoin de créer des animations, vous devrez importer dans app.module.ts le nouveau module 'BrowserAnimationsModule'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
//...
imports: [
BrowserAnimationsModule
]
})
export class AppModule {}
*ngIf est complété d'un else
*ngIf se voit compléter d'un 'else'
<p *ngIf="isFun; else elsePart">on s'amuse bien</p>
<ng-template #elsePart>
<p>pas marrant : je m'affiche</p>
</ng-template>
A noter ce nouveau 'ng-template', à utiliser en lieu et place du 'template' de HTML.
Le validator 'email'
Pour valider une adresse email, une nouvelle directive du même nom remplacera 'pattern' auquel on passait une expression régulière :
<input type="email" ngModel name="email" required email>
De nouveau, aucune obligation d'abandonner 'pattern', mais la directive 'email' devrait être adoptée facilement.
Plus anecdotique , le nouveau pipe 'titlecase'
<div>'code concept' | titlecase</div>
// resultat : 'Code Concept'
Amélioration des performances
Il y a bien évidemment eu de nombreuses autres modifications dans cette version d'Angular, afin d'améliorer performances et taille de l'application buildée - nouveau View Engine, FESM (Flattened ECMAScript Module) ... etc... - , Universal (qui permet le server side rendering) n'est plus maintenu par la communauté mais par l'équipe officielle d'Angular. Toutefois, ces modifications ne vous impacteront pas directement, étant donnée qu'elles n'impliquent pas d'actions particulières de votre part : vous en bénéfierez en tâche de fond si l'on peut dire.
Migration
Sous Windows
npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save
Sous Linux/Mac
npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save
En résumé
Angular V4.0.0 n'est PAS une réécriture complète comme l'a été Angular V2.0.0 par rapport à Angular V1.0.0 (AngularJS). Vous pouvez être tranquille jusqu'à l'automne et Angular V5.0.0.
Vous pouvez également sereinement continuer à étudier "Angular 2 par la pratique", le cours demeurant pertinant en cette version 4. De nouvelles vidéos seront en outre ajoutées pour illustrer les nouveautés citées plus haut propres à Angular V4.0.0
inscrivez vous à la newsletter de meanjs.fr