Composants

Le concept

L'un des principaux concepts d'Angular est de voir une application comme une arborescence de composants.

A Component controls a patch of screen real estate that we could call a view, and declares reusable UI building blocks for an application.

Custom Elements

C'est d'ailleurs un concept que l'on retrouve dans tous les frameworks modernes et même nativement avec les Custom Elements : https://developers.google.com/web/fundamentals/web-components/customelements​

Exemple à essayer dans la console de votre navigateur :

/* The custom element definition. */
class HelloElement extends HTMLElement {
connectedCallback() {
this.textContent = 'Hello 🌍';
}
}
​
/* Registering the custom element. */
customElements.define('wt-hello', HelloElement);
​
/* Injecting the element using innerHTML... */
document.body.innerHTML = '<wt-hello></wt-hello>';
​
/* ... or using appendChild & createElement. */
document.body.appendChild(document.createElement('wt-hello'));

Custom Elements & Web Components Tooling

​https://stenciljs.com/​

​https://github.com/Polymer/lit-element​

Separation of Concerns

Les composants permettent une meilleure décomposition de l'application, facilitent le refactoring et le testing.

Isolement

Chaque composant est isolé des autres composants. Il n'hérite pas implicitement des attributs des composants parents.