Partie 1 : Découvrir Angular
Partie 2 : Acquérir les bases sur Angular
Partie 3 : Aller plus loin avec Angular
1 de 2

5. Les imports HTML

Les imports HTML sont le dernier standard qu’il nous manque pour pouvoir développer de véritables composants web dans un fichier dédié, fonctionnant indépendamment du reste de la page.

Ils rendent désormais possible d’importer un fichier HMTL en utilisant la balise <link> dans un autre document HTML :

<link rel='import' href='un-autre-fichier.html'>

En fait, on peut importer du HTML dans du HTML, et le fichier importé fonctionne en autonomie, il contient son propre HTML, CSS et JavaScript et ne vient pas interférer avec votre DOM !

Certains sites proposent même des composants prêts à l’emploi ! Il y a également des bibliothèques connues qui ont été conçu pour faciliter l’intégration des Web Composants, comme la librairie Polymer de Google, et qui vous permet de faire ça :

<!-- Polyfill pour les Composants Web, afin de supporter les navigateurs plus anciens --> 
<script src="components/webcomponentsjs/webcomponents-lite.min.js"></script> 

<!-- Un import de HTML --> 
<link rel="import" href="components/google-map/google-map.html"> 

<!-- On utilise l'élément personnalisé importé ! --> 
<google-map latitude="37.790" longitude="-122.390"></google-map>

Le code parle de lui-même, et il vous affichera une Google map centrée sur San Francisco, rien que ça !

Bon je pense que je vous en ai déjà pas mal dit, n’hésitez pas à continuer à voir ce que sont les Composants Web si le sujet vous intéresse !

Voici un lien sur lequel vous pouvez voir quelles spécifications sont actuellement supportées par les navigateurs les plus populaires.