ng-include

Syntaxe

Paramètres

Description

Cette directive permet d'indiquer qu'il faut inclure la page HTML spécifié dans la page HTML courante.

Remarques

• Chargement de contenu dynamique : La directive ng-include permet d'insérer dynamiquement des fragments HTML dans une application AngularJS. Elle est particulièrement utile pour réutiliser des morceaux d'interface utilisateur comme des entêtes, des pieds de page ou des barres de navigation. Le contenu est chargé via une URL et inséré dans le DOM à l'emplacement de la directive.
• Désynchronisée par défaut : Le contenu référencé par ng-include est chargé de manière asynchrone à l'aide d'une requête HTTP. Cela signifie que le rendu peut être retardé si le fichier demandé met du temps à se charger. Pour améliorer l'expérience utilisateur, il est possible de gérer un état de chargement avec ng-show ou des animations.
• Expressions dynamiques pour l'URL : L'attribut src de ng-include peut accepter une expression AngularJS, ce qui permet de charger dynamiquement différents fichiers en fonction des variables d'étendue. Cette fonctionnalité est particulièrement utile pour construire des applications modulaires ou basées sur des états.
• Création d'étendue enfants : Chaque instance de ng-include crée un nouveau étendu enfant, ce qui peut être un avantage pour encapsuler les données spécifiques au fragment inclus. Cependant, cela peut aussi entraîner des problèmes de performances ou des fuites de mémoire si un grand nombre d'inclusions sont utilisées sans gestion adéquate.
• Répétition du contenu statique : Si le contenu inclus est statique, il est préférable d'utiliser un système de compilation ou d'intégration statique plutôt que ng-include. Les fichiers HTML chargés dynamiquement consomment des ressources supplémentaires en raison des requêtes HTTP et du traitement AngularJS.
• Gestion des erreurs de chargement : Lorsque le fichier référencé par ng-include n'est pas disponible ou que la requête HTTP échoue, aucune exception explicite n'est levée. Cependant, il est possible d'utiliser l'événement $includeContentError pour détecter ces erreurs et fournir un comportement de repli ou des messages d'erreur personnalisés.
• Compatibilité avec les directives enfant : Les éléments inclus via ng-include peuvent contenir leurs propres directives AngularJS, étant évaluées après le chargement du contenu. Cela permet une composition puissante des interfaces, mais il faut s'assurer que les dépendances des directives sont correctement gérées pour éviter des comportements inattendus.
• Impact sur les performances globales : L'utilisation excessive de ng-include peut ralentir une application en augmentant le nombre de requêtes HTTP et la complexité du DOM. Pour optimiser les performances, il est recommandé de mettre en cache les fichiers inclus à l'aide de $templateCache. Cela réduit les allers-retours réseau et accélère le rendu.