<commit_before>---
date: "2016-04-12"  
title: "Angular 1.5 : un pas de plus vers les web-components"  
tags:
  - javascript
  - angular
  - web-component  
authors:
  - Freezystem
---

Ce post est écrit à la lumière du 
[changelog d'Angular 1.5.0 rc1](https://github.com/angular/angular.js/blob/master/CHANGELOG.md#150-rc1-quantum-fermentation-2016-01-15).  
Toutes information est succeptible d'évoluer au cours des publications de 
nouvelles versions du framework.

## Le petit nouveau : `.component()`

Avec l'arrivée imminente de la version 2, Angular commence lentement à préparer la
transition et apporte de nombreux changements à la v1 pour tenter de 
combler l'écart entre les deux et rendre les changements moins pénibles.  

On voit donc progressivement apparaitre de nouvelles fonctionnalités comme :
 - ~~un [nouveau router](https://angular.github.io/router/) ?~~ 
 - la possibilité d'[annuler une resource](https://docs.angularjs.org/api/ngResource/service/$resource#cancelling-requests)
 - les transclusions multiples
 - la compilation paresseuse des transclusions

Mais le point qui nous intéresse particulièrement ici n'est autre que 
le nouveau _helper_ permettant la déclaration de similis 
(composants web)[https://fr.wikipedia.org/wiki/Composants_web], aka web-components.

Les habitués connaissaient déjà [`angular.directive()`](https://docs.angularjs.org/api/ng/service/$compile), 
un _helper_ permettant la déclaration de composants réutilisables. 
`angular.directive()` s'est donc enrichi au cours des années en faisant un atout 
incontournable du framework de par sa flexibilité et sa simplicité.  

Mais toutes ces possibilités de déclaration n'étaient plus vraiment en phase avec 
les spécifications du W3C, `angular.component()` se présente donc un retour aux sources.

## De `.directive()` à `.component()`

Pour comprendre à quoi on arrive, il faut savoir de quoi on est parti.
De toute évidence vous ne pourrez pas transformer toutes vos vieilles directives
en composants web, du moins, pas sans compromis. 

Pour rappel une directive Angular est définie par un objet JavaScript pouvant comporter
les attributs suivants :

```js
var directiveObj = {
  template          : '<div></div>',
  transclude        : false,
  restrict          : 'EA',
  scope             : false,
  bindToController  : false,
  controller        : function () { },
  controllerAs      : 'stringIdentifier',
}
```
<commit_msg>Article « Angular 1.5 [...] » : correction d'un lien Markdown mal formaté (#656)<commit_after>---
date: "2016-04-12"  
title: "Angular 1.5 : un pas de plus vers les web-components"  
tags:
  - javascript
  - angular
  - web-component  
authors:
  - Freezystem
---

Ce post est écrit à la lumière du 
[changelog d'Angular 1.5.0 rc1](https://github.com/angular/angular.js/blob/master/CHANGELOG.md#150-rc1-quantum-fermentation-2016-01-15).  
Toutes information est succeptible d'évoluer au cours des publications de 
nouvelles versions du framework.

## Le petit nouveau : `.component()`

Avec l'arrivée imminente de la version 2, Angular commence lentement à préparer la
transition et apporte de nombreux changements à la v1 pour tenter de 
combler l'écart entre les deux et rendre les changements moins pénibles.  

On voit donc progressivement apparaitre de nouvelles fonctionnalités comme :
 - ~~un [nouveau router](https://angular.github.io/router/) ?~~ 
 - la possibilité d'[annuler une resource](https://docs.angularjs.org/api/ngResource/service/$resource#cancelling-requests)
 - les transclusions multiples
 - la compilation paresseuse des transclusions

Mais le point qui nous intéresse particulièrement ici n'est autre que 
le nouveau _helper_ permettant la déclaration de similis 
[composants web](https://fr.wikipedia.org/wiki/Composants_web), aka web-components.

Les habitués connaissaient déjà [`angular.directive()`](https://docs.angularjs.org/api/ng/service/$compile), 
un _helper_ permettant la déclaration de composants réutilisables. 
`angular.directive()` s'est donc enrichi au cours des années en faisant un atout 
incontournable du framework de par sa flexibilité et sa simplicité.  

Mais toutes ces possibilités de déclaration n'étaient plus vraiment en phase avec 
les spécifications du W3C, `angular.component()` se présente donc un retour aux sources.

## De `.directive()` à `.component()`

Pour comprendre à quoi on arrive, il faut savoir de quoi on est parti.
De toute évidence vous ne pourrez pas transformer toutes vos vieilles directives
en composants web, du moins, pas sans compromis. 

Pour rappel une directive Angular est définie par un objet JavaScript pouvant comporter
les attributs suivants :

```js
var directiveObj = {
  template          : '<div></div>',
  transclude        : false,
  restrict          : 'EA',
  scope             : false,
  bindToController  : false,
  controller        : function () { },
  controllerAs      : 'stringIdentifier',
}
```

{'fraction_non_alphanumeric': 0.08858706669369552, 'fraction_numerical': 0.01277113318467464, 'mean_word_length': 3.9838383838383837, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '669969', 'n_tokens_mistral': 1577, 'n_tokens_neox': 1498, 'n_words': 537}