Apprendre à programmer avec le framework Angular

De la théorie à la pratique

William KOZA

Première introduction au framework Angular. Après une rétrospective des technologies Web ayant marqué l'univers JavaScript, l'accent est mis sur la notion de Web Component et son implémentation dans le framework Angular.

Commentez

- Titre : Apprendre à programmer avec le framework Angular

- Auteur : William KOZA

- Parution : 19 novembre 2016

- Mise à jour : 19 novembre 2016

- Public visé :

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2016 William KOZA. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Un peu d'histoire…

- I-A. Côté HTML

- I-B. Côté JavaScript

- I-C. HTML & JavaScript

- II. De la théorie à la pratique

- II-A. Le Component Angular, c'est quoi en pratique ?

- II-B. Écrivons notre premier component

- II-C. Utilisons notre premier Component

- III. Pour aller plus loin …

I - Un peu d'histoire…

I-A - Côté HTML

La norme HTML 5 a été finalisée en octobre 2014. Elle a mis beaucoup de temps à accoucher (pour mémoire, HTML 4 date de 1997), mais HTML 5 n'est pas une simple évolution du HTML mais plus une Révolution ! Il a permis d'étendre le HTML et ainsi de créer ses propres balises HTML. Une Révolution ? Mais oui, car cela ouvre la porte à un rêve pour les développeurs front : pouvoir créer des composants graphiques réutilisables et totalement indépendants. Et ces composants ont un nom : les Web components.

Pour parvenir à ce miracle, plusieurs technologies du W3C sont utilisées :

- Les customs Elements : API permettant de déclarer de nouveaux éléments HTML.

- Les imports HTML : permet d'importer des fichiers HTML dans un autre.

- Les templates : permet de charger une portion de HTML sans l'afficher tout de suite.

- Le shadow DOM : permet de masquer la complexité d'un composant et d'isoler plus facilement les composants entre eux via un système d'encapsulation.

C'est ce savant mélange qui permet la création de composants Web réutilisables et totalement étanches entre eux.

I-B - Côté JavaScript

Parallèlement aux travaux sur le HTML, le JavaScript a, lui aussi, subi de multiples transformations au fil du temps. La maturité du langage l'a fait passer de l'EcmaScript 3 à l'époque IE6 à l'ES6 en 2016. Avec les années, de nombreux frameworks JavaScript ont vu le jour.

Quelques années se démarquent :

- 2006 fut une année charnière avec l'arrivée du Framework JQuery qui a permis de manipuler brillamment le DOM HTML.

- 2009 a été l'année d'introduction de framework AngularJS qui a introduit la démocratisation du data binding 2-way et de la SPA.

- 2013 signe l'entrée de Facebook dans l'open source JavaScript avec son Framework React.JS.

- 2014 pose les fondations d'une nouvelle technologie avec Polymer (année de finalisation du HTML 5).

- Et 2016… c'est au tour d'Angular 2 d'arriver.

Dans la suite des tutoriels, nous ne parlons plus d'Angular 2, mais d'Angular. La version d'Angular devrait changer deux fois par an et suivre le « semantic versionning ». Il ne faut donc par confondre AngularJS (le premier) et Angular (anciennement Angular 2).

I-C - HTML & JavaScript

Mais peut-on vraiment utiliser les Web Components aujourd'hui ? Eh bien, pas forcément. À ce jour, tout n'est pas encore tout rose malheureusement. Peu de navigateurs supportent les Web Components, principalement à cause du shadow DOM qui n'est réellement supporté que par les navigateurs Chrome et Opera. Développer une application dans ces conditions ne serait pas réaliste aujourd'hui.

Mais côté JavaScript, ça bouge plus rapidement et il y a quelques projets pionniers qui nous ont développé des polyfills afin de pallier aux lacunes des navigateurs, dont le projet initié par Google :

Ces polyfills permettent de s'abstraire des limitations liées aux navigateurs afin de proposer les fonctionnalités manquantes pour réaliser des Web components. Il s'agit donc du premier Framework JavaScript permettant de créer et manipuler les composants à la manière « Web Component ». Évidemment, si je vous parle de Web Component depuis le début, c'est bien pour introduire le framework Angular qui est résolument orienté Component.

II - De la théorie à la pratique

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 a vocation à être réutilisable.

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

II-A - 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 !

II-B - Écrivons 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 :

Exemple de component

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

3. @Component({

4. selector: 'mon-premier-component',

5. template: `

6. <h2>Mon premier Component</h2>

7. <img src="http://gabarit.developpez.be/images/logo.png" />

8. `

9. })

10. export class MonPremierComponent  {

11. }

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 « Decorator ». 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 la partie précédente.

- 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.

II-C - Utilisons notre premier Component

Une fois notre component instancié, il ne reste plus qu'a 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.

index.html

<html>

...

<body>

<h1>Test de mon premier Component</h1>

<!-- Ajout de mon premier component -->
<mon-premier-component>Loading...</mon-premier-component>

</body>
</html>

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

:

III - Pour aller plus loin …

Vous pouvez consulter mes autres tutoriels à partir de ma Home Page https://wkoza.developpez.com.