Archives mensuelles : juillet 2015

Angular : Utiliser les classes ES6

JavaScript,

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 :

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.


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)]);

view raw

ES6 Angular Directive with injection

hosted with ❤ by GitHub

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

Angular 2 :