Un des grands changement d’Angular 2 est l’abandon des controller pour l’utilisation de components. Afin de facilité la migration, la version 1.5 d’Angular a introduit une méthode component() permettant de créer des composants. Cette version introduit également les concepts de one-way data binding et de lifecycle hooks.
Création d’un component
La création d’un composant est très simple. il suffit de renvoyer un objet comme dans l’exemple ci dessous.
var ProductComponent = {
bindings: {
name: '=',
price: '='
},
template: `Name: {{$ctrl.name}}
Price: {{$ctrl.price}}`
};
angular
.module('app', [])
.component('productComponent', ProductComponent);
<product-component name="Nexus 5" qty="299"></product-component>
On peut voir dans l’exemple ci dessus:
- la déclaration des bindings via la propriété … bindings. Nous les déclarons de la même façon que pour les directives. Les bindings sont automatiquement bindés sur le controller (bindToController dans angular 1.4)
- la déclaration de notre template (j’utilise ici un template string ES6). Notez qu’il est possible d’utiliser un template via un fichier html via templateUrl (de la même façon que les directives).
- Les components utilisent des controller en ‘controller as‘ dont le nom par défaut est $ctrl. Vous pouvez bien entendu le modifier via la propriété controllerAs
Nous voyons que dans le cas de composants d’affichage, les composants sont beaucoup plus simple et concis.
One way data bindings
Une des nouveautés très intéressante de Angular 1.5 est l’apparition du one way binding via la notation ‘<‘. Les changements effectués sur une propriété bindée en one-way ne seront pas répercutés sur l’objet sur lequel il est bindé (sens component -> parent). Les mises à jour sur l’objet source sont répercutées sur le component (parent -> component). On gagne ainsi en performance et en maintenance.
Lifecycle hooks
La version 1.5 introduit également une notion de cycle de vie des components sur lequel nous allons pouvoir nous plugger.
Nous avons les événements suivant sur lesquels nous allons pouvoir nous abonner:
- onInit : à l’initialisation du component. Idéal pour initialiser notre composants, definir les valeurs par defauts, …
- onChanges: à chaque modification de valeur d’un binding one-way.
- onDestroy: lors de la destruction du composant. Idéal pour libérer les ressources …
Tests
Une des choses appréciables avec angular est la testabilité. Les components sont très simple à tester. Les tests d’un controller d’un component se feront via l’utilisation de $componentController inclut dans ngMock. L’avantage est qu’on n’a pas besoin de créer un élément.
Migration d’une directive vers un component
J’ai déjà parlé d’une directive gérant un select avec des valeur numérique. Voyons comment la migrer vers un composant.
Liens
- le guide sur les component sur le site d’angular
- Upgrade to angular components
- Série d’articles de Todd Motto:
- des articles sur les Lifecycle hooks :
Conclusion
L’arrivée des components dans la version 1.5 d’angular a modifié la façon de développer des applications angular 1.x. Je vous conseille vivement leur utilisation, qui plus est si vous souhaitez préparer la migration vers angular 2.
Tweet