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.
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'));{% embed url="https://stenciljs.com/" caption="" %}
https://github.com/Polymer/lit-element
{% embed url="https://github.com/Polymer/lit-element" caption="" %}
Les composants permettent une meilleure décomposition de l'application, facilitent le refactoring et le testing.
Chaque composant est isolé des autres composants. Il n'hérite pas implicitement des attributs des composants parents.