J’ai présenté dans un article précédent comment utiliser Babel afin de coder en ES6/ES2015 et transpiler vers ES5.
Angular 2 a été annoncé il y a 1 an à la ng-conf Europe et est aujourd’hui en version bêta. Cette nouvelle version est une réécriture complète qui va changer beaucoup de choses (plus de scope, controlleur, angular.modules, …). La version 1.x d’Angular a 5 ans et beaucoup de choses ont évolués depuis. 3 changements majeurs expliquent ce choix :
- Object.observe() (abordé dans cet article)
- La nouvelle version de ECMAScript ES6 / ES2015 (notamment les classes et les modules abordés dans cet article)
- Web Components (Introduction aux Web Components)
Pour info, il sera possible de coder pour la version 2 en ES5, ES6 ou TypeScript (et même dart).
Si vous décider de coder en ES6 ou Typescript, vos services ou vos composants seront des classes ES6. Celles-ci simplifient grandement l’écriture et leur utilisation dans Angular 1.x facilitera la migration vers la version 2.
Voyons maintenant comment utiliser les classes ES6 pour Angular. Les exemples suivants proviennent de mon application de Volley disponible sur github.
Commun
Vos services, controller, directives vont être définis comme des classes et l’injection va se passer par le constructeur. Il va falloir « enregistrer » vos dépendances sur votre objet (sur this) afin de pouvoir les utiliser dans vos méthodes. Attention, on oublie facilement le this !!
Controller
L’utilisation des classes ES6 n’empêchent pas d’utiliser $scope mais la migration en classe est un bon moyen de migrer vers la syntaxe « controller as ». Cette syntaxe n’utilise pas le scope qui n’existe pas en Angular 2.
Avant
Après
Services
Vous savez qu’il y a différent types de service en Angular : services, factory, provider.
Les services de type service sont conçus pour définir un service sous forme de classe (ou comme type instantiable)
Si vous avez des factory, le plus simple est de les convertir en service.
Dans le cas d’un provider, il faut que la classe contienne une propriété nommée $get, qui doit être une fonction qui retourne une factory.
Avant
Après
Directives
Les directives sont les éléments les plus complexes et les plus difficiles à appréhender en Angular 1.x. Attention contrairement aux autres types, il vous faudra instancier vous même vos services.
Avant
Après
Cet exemple n’a aucune dépendance injectée. Si votre directive contient des dépendances il faut les passer en paramètre lors de instanciation de votre directive.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class myDirective { | |
constructor(userService) { | |
this.template = `<div>{{fullName}}</div>`; | |
this.restrict = 'E'; | |
this.scope = { | |
user: '=' | |
}; | |
this.link = function(scope, element) { | |
scope.fullName = userService.getFullName(scope.user); | |
}; | |
} | |
} | |
angular.module('myApp').directive('myDirective', ['userService', | |
(userService) => new myDirective(userService)]); |
Conclusion
Les classes ES6/2015 permettent de simplifier le code et facilitera une potentielle migration vers Angular 2.
Cet article n’utilise que les classes ES6 mais il est possible d’utiliser d’autres nouveautés comme les modules ou les décorateurs par exemple. Vous trouverez plus d’informations dans les liens ci dessous.
Liens
- ng6 Why You Should Use ES6 with Angular Today : une video à la conférence angular U
- All things Angular 2.0 – Preparing for the transition
- Exploring ES6 Classes In AngularJS 1.x
- Using ES6 with Angular today
- Writing angularjs apps using ES6
- Angular 1.4 et ES7
Angular 2 :
Tweet