Nous connaissions AngularJS, le fameux framework de Google permettant la réalisation d’applications web dites « SPA » pour Single Page Application.

 

Pour ceux qui seraient passés à côté de ce concept, une SPA est une application ne disposant que d’une seule page : index.html. Ce type d’architecture Web permet d’améliorer l’expérience utilisateur en favorisant les interactions rapides avec l’utilisateur. Pour parvenir à ce résultat, toutes les ressources CSS, JavaScript et index.html sont téléchargées au premier appel de l’application, puis les interactions se font en JavaScript. C’est ce dernier qui modifiera le contenu de la page, et ce, sans rechargement. Il n’y a donc pas d’effet « F5 » entre chaque page.

 

On ne va pas entrer dans les détails d’AngularJS, mais il faut retenir trois choses pour bien comprendre la suite :

• AngularJS utilise un router JavaScript pour fournir les contenus à travers la déclaration de « routes ».

• Une route est définie par un template HTML pour décrire la vue et d’un controller pour décrire le comportement associé à cette vue.

• Un template s’appuie sur des directives qui permettent d’ajouter du comportement à des éléments du DOM. Elles peuvent posséder leurs propres template et controller. La directive à vocation à être réutilisable.

Angular reste sur ce concept de SPA, mais il a amené un nouveau concept au framework : le Component.

  

Le Component Angular, c’est quoi en pratique ?

Le component est issu de la mouvance « Web components » comme vous pouvez vous en douter. Les Components reposent sur un certain nombre de règles :

• Un component ne gère que sa vue et ses données. Il n’a pas à modifier les données ou le DOM qui est en dehors de son scope.

• Chaque component a son propre cycle de vie.

• Les components communiquent entre eux via les évènements, il n’y a pas d’interactions directes.

 

Les dernières releases d’AngularJS ont introduit ce concept dans le framework et cela n’a finalement pas été trop dur puisqu’un component n’est autre qu’un fragment HTML et un controller pour interagir avec. Mais ce « component » est loin d’être aussi poussé que chez son successeur. Point de shadow DOM à l’horizon. Il faut plutôt voir ça comme une façon d’aider les développeurs AngularJS à aller vers Angular. Dans Angular, les components sont partout : l’application est un component qui affiche des components contenant des components… Bref, Angular, c’est des components, components et des components !

 

Ecrivons notre premier component

 

Angular a adopté dès le début les standards ES6, mais a souhaité ajouter une « surcouche » JavaScript permettant le typage des variables via des annotations. Après avoir penché un certain temps vers AtScript, Google a finalement choisi le langage TypeScript de Microsoft.
TypeScript est devenu le langage de prédilection dans Angular ! Bon, il est tout à fait possible de développer une application sans ES6 et sans TypeScript si cela vous chante… mais pourquoi ?

Dès lors, même si la syntaxe peut effrayer au premier abord, la déclaration d’un component dans Angular, dans la pure tradition du TypeScript, se résume à très peu de code :

 

import { Component } from '@angular/core';

@Component({
    selector: 'mon-premier-component',
    template: 'Mon premier Component'
})
export class MonPremierComponent  {
}

 

Ce premier exemple décrit très bien la structure de tous les Components Angular. On y retrouve :

• Un espace réservé aux importations de code d’autres modules. Dans notre exemple, cet espace nous sert à charger la classe « Component » du module @angular/core qui n’est autre que le module « cœur » d’Angular ;

• @Component est ce que l’on appelle un décorateur. Les décorateurs sont issus du langage TypeScript. Ils permettent de rajouter du comportement à une classe et ses membres (à l’origine, TypeScript n’incorporait pas la notion de « décorateur ». Cela a fait l’objet d’un travail collaboratif entre Google et Microsoft). Ce décorateur ajoute donc un ensemble de propriétés à la classe MonPremierComponent pour la « transformer » en Web Component Angular. Cet ensemble s’appelle les MetaDatas. On y retrouve notre template HTML (l’Import HTML W3C) et le selector (le Custom Element W3C) dont nous parlions dans l’article précédent.

• Une classe qui contrôle l’apparence et le comportement de notre Component. Cette classe est exportée pour pouvoir être utilisée par l’application.

La notion de classe est une notion qui existe nativement en JavaScript depuis l’ES6. TypeScript propose cette notion de classe et vous permet ainsi de l’utiliser sur d’anciens navigateurs.

Si nous devions résumer finalement ce qu’est techniquement un component Angular : une simple class avec un décorateur @Component.

 

Utilisons notre premier Component

 

Une fois notre component instancié, il ne reste plus qu’à l’utiliser directement dans notre page index.html. Cela fonctionne exactement de la même façon qu’une directive AngularJS de type element « E ». Il suffit de déclarer une balise HTML avec le nom du selector qui a été défini lors de la création du @Component.

 

...



Test de mon premier Component
 


Loading...

 

Après rechargement de la page, voici le résultat tant attendu :

 

Mon premier Component

 

Angular a parsé le DOM HTML et a remplacé la balise par le contenu du template de notre @Component.

 

 

Angular vous intéresse ? Lisez l’e-book Learn-Angular – Maîtriser les concepts du framework Angular pour développer des applications robustes !