AngularJS ng-include : Inclure des fichiers HTML avec exemple
James Hartmann
⚡ Résumé intelligent
La directive ng-include d'AngularJS récupère, compile et injecte un fragment HTML externe dans la page principale, de sorte que les éléments de balisage partagés tels qu'un tableau, un en-tête ou un pied de page résident dans un seul fichier partiel réutilisable.
Par défaut, HTML ne permet pas d'inclure du code côté client provenant d'autres fichiers. C'est normalement une bonne pratique dans n'importe quel langage de programmation de répartir les fonctionnalités sur différents fichiers pour n'importe quelle application.
Par exemple, si vous disposez d'une logique pour les opérations numériques, vous souhaiterez normalement que cette fonctionnalité soit définie dans un fichier distinct. Ce fichier séparé pourrait ensuite être réutilisé dans plusieurs applications en incluant simplement ce fichier.
C'est normalement le concept de Inclure des déclarations qui sont disponibles en langages de programmation tels que .Net et Java.
Ce tutoriel examine d'autres méthodes pour traiter les fichiers (fichiers contenant des données externes). HTML Le code) peut être inclus dans le fichier HTML principal.
Côté client
L'une des méthodes les plus courantes pour inclure du code HTML est via JavaScénario. Javascénario est un langage de programmation qui peut être utilisé pour manipuler le contenu d'une page HTML à la volée. Ainsi, JavaLe script peut également être utilisé pour inclure du code provenant d'autres fichiers.
Les étapes ci-dessous montrent comment y parvenir.
Étape 1) Définissez un fichier appelé Sub.html et ajoutez le code suivant au fichier.
<div> This is an included file </div>
Étape 2) Créez un fichier appelé Sample.html, qui est votre fichier d'application principal et ajoutez l'extrait de code ci-dessous.
Vous trouverez ci-dessous les principaux aspects à noter concernant le code ci-dessous,
- Dans la balise body, il y a une balise div qui a un identifiant Content. C'est l'endroit où sera inséré le code du fichier externe 'Sub.html'.
- Il est fait référence à un script jQuery. jQuery est un langage de script basé sur… JavaScript qui simplifie encore plus la manipulation du DOM.
- Dans l' JavaDans la fonction de script, il y a une instruction '$(“#Content”).load(“Sub.html”);' qui provoque l'injection du code du fichier Sub.html dans la balise div qui a l'id Content.
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
Server Side Includes
Les inclusions côté serveur sont également disponibles pour inclure un morceau de code commun sur un site. Ceci est normalement fait pour inclure du contenu dans les parties ci-dessous d'un document HTML.
- En-tête de page
- Pied de page
- Le menu de navigation.
Pour qu'un serveur web reconnaisse un fichier inclus côté serveur (SCI), son nom doit comporter une extension spécifique. Ces extensions sont généralement acceptées par le serveur web, telles que .shtml, .stm, .shtm et .cgi.
La directive utilisée pour inclure du contenu est la « directive include ». Un exemple de la directive include est présenté ci-dessous :
<!--#include virtual="navigation.cgi" -->
- La directive ci-dessus permet d'inclure le contenu d'un document dans un autre.
- La commande « virtuelle » ci-dessus est utilisée pour spécifier la cible par rapport à la racine du domaine de l'application.
- De plus, au paramètre virtuel, il existe également le paramètre file qui peut être utilisé. Les paramètres « file » sont utilisés lorsqu'il faut préciser le chemin relatif au répertoire du fichier courant.
Remarque:
Le paramètre virtual permet de spécifier le fichier (page HTML, fichier texte, script, etc.) qui doit être inclus. Si le processus du serveur Web n'a pas accès pour lire le fichier ou exécuter le script, la commande include échouera. Le mot « virtuel » est un mot-clé qui doit être placé dans la directive d'inclusion.
Comment inclure un fichier HTML dans AngularJS
AngularJS permet d'inclure des fonctionnalités provenant d'autres fichiers AngularJS en utilisant la directive ng-include. directive.
La fonction principale de la directive « ng-include » est de récupérer, compiler et inclure un fragment HTML externe dans l'application AngularJS principale.
Note de version : AngularJS 1.x n'est plus pris en charge à long terme depuis le 31 décembre 2021, et l'équipe du framework indique que Le support d'AngularJS a officiellement pris fin. En janvier 2022, aucune mise à jour ni correctif de sécurité n'a été publié depuis. Chaque étape et chaque bloc de code ci-dessous restent identiques à la version publiée, servant de référence historique. Angular moderne ne propose aucun remplacement direct : le balisage est composé de composants, et un fragment sélectionné à l'exécution est rendu avec ng-conteneur et ngComponentOutlet.
Examinons le code source ci-dessous et expliquons comment cela peut être réalisé à l'aide d'AngularJS.
Étape 1) écrivons le code ci-dessous dans un fichier appelé Table.html. C'est le fichier qui sera injecté dans notre fichier d'application principal à l'aide de la directive ng-include.
L'extrait de code ci-dessous suppose l'existence d'une variable de portée appelée « tutorial ». Il utilise ensuite… ng-répétition directive, qui parcourt chaque sujet de la variable « tutorial » et affiche les valeurs de « Name » et « Descriptpaire clé-valeur « ion ».
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
Étape 2) Écrivons le code ci-dessous dans un fichier nommé Main.html. Il s'agit d'une application AngularJS simple présentant les caractéristiques suivantes :
- Utilisez la « directive ng-include » pour injecter le code dans le fichier externe 'Table.html'. La déclaration a été mise en évidence en gras dans le code ci-dessous. Donc la balise div ' ' sera remplacé par l'intégralité du code dans le fichier 'Table.html'.
- Dans l' contrôleurUne variable « tutoriel » est créée dans le cadre de l’objet $scope. Cette variable contient une liste de paires clé-valeur.
Dans notre exemple, les paires clé-valeur sont
- Nom – Ceci indique le nom d'un sujet tel que les contrôleurs, les modèles et les directives.
- Description – Ceci donne une description de chaque sujet
La variable du didacticiel est également accessible dans le fichier 'Table.html'.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="AngularController">
<h3> Guru99 Global Event</h3>
<div ng-include="'Table.html'"></div>
</div>
<script>
var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('AngularController', function($scope) {
$scope.tutorial =[
{Name: "Controllers" , Description : "Controllers in action"},
{Name: "Models" , Description : "Models and binding data"},
{Name: "Directives" , Description : "Flexibility of Directives"}
];
});
</script>
</body>
</html>
Lorsque vous exécutez le code ci-dessus, vous obtiendrez le résultat suivant.
Sortie:
La capture d'écran ci-dessous montre le résultat rendu : l'onglet du navigateur affiche le titre « Inscription à l'événement », l'en-tête se situe au-dessus du tableau inséré, et les trois lignes proviennent du tableau « tutorial » du fichier Main.html via le modèle partiel. La capture d'écran annotée affiche l'en-tête « Gur99 », tandis que le code affiche : Guru99.
Attributs de ng-include : src, onload et autoscroll
Outre le nom de fichier, la directive accepte deux attributs optionnels et peut être écrite de trois manières : comme attribut sur n’importe quel élément, comme un <ng-include> élément, ou en tant que classe CSS. La référence ci-dessous suit la documentation officielle. documentation ngInclude.
| Attribut | Requis | Ce qu'il fait |
|---|---|---|
| src, ou ng-include | Oui | Expression qui s'évalue au modèle URL |
| en charge | Non | L'expression est évaluée à chaque fois qu'une nouvelle partie a fini de charger |
| défilement automatique | Non | Appelle $anchorScroll après le chargement du contenu ; omettre l’attribut désactive le défilement |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
L'erreur la plus courante découle de la première ligne : src prend un expression, et non une simple chaîne de caractères. Un chemin littéral nécessite donc ses propres guillemets à l'intérieur de l'attribut, ce qui explique pourquoi l'exemple ci-dessus se lit comme suit : ng-include="'Table.html'". L'écriture ng-include="Table.html" fait évaluer AngularJS Table En tant que propriété de portée, ne rien trouver et laisser l'élément vide.
Pourquoi ng-include crée une nouvelle portée enfant
La directive n'insère pas de balisage dans la portée environnante. Chaque inclusion crée un nouvel enfant portée qui hérite de manière prototypale de la portée dans laquelle elle a été déclarée, et ce fait explique la plupart des surprises liées à la liaison.
La lecture fonctionne comme prévu. Le texte partiel ci-dessus se lit comme suit : tutorial directement des parents, c'est pourquoi ng-repeat trouve le tableau. C'est à l'écriture que ça coince : lorsqu'une variable partielle est assignée à une primitive, comme avec ng-model="topic"AngularJS crée topic au niveau de la portée enfant et la copie parente ne change jamais.
Deux habitudes permettent d'éviter le piège :
- Lier par l'intermédiaire d'un objet, comme dans
ng-model="data.topic", de sorte que le parent et l'enfant atteignent la même référence. - Stockez l'état dans un contrôleur ou un service et exposez des fonctions plutôt que des primitives brutes.
L'inclusion émet également $includeContentRequested, $includeContentLoaded et $includeContentError, afin qu'un parent puisse réagir par le biais de $scope.$on sans pour autant empiéter sur le domaine de l'enfance.
Comment corriger un fichier ng-include vide ou ayant échoué
Une inclusion qui ne produit aucun résultat échoue généralement pour l'une des quelques raisons suivantes. Examinez-les dans cet ordre.
- Vérifiez les devis. Un nom de fichier littéral doit être entouré de guillemets simples dans la valeur de l'attribut. Sans guillemets, l'expression est indéfinie et aucune requête n'est envoyée.
- Servez la page via HTTP. La directive émet une requête XHR pour la page partielle ; par conséquent, l’ouverture directe de Main.html depuis le disque via une adresse de fichier échoue dans la plupart des navigateurs. Tout serveur web local résout ce problème.
- Vérifiez que le chemin d'accès est résolu. Surveillez le panneau réseau pour la requête. Une erreur 404 signifie que le chemin est relatif à la page qui contient l'inclusion, et non à la vue partielle qui y fait référence.
- Respectez la règle de l'origine identique. Par défaut, le modèle URL doit correspondre au domaine et au protocole du document de l'application, car AngularJS le transmet. $sce.getTrustedResourceUrlUn modèle provenant d'une autre source doit figurer dans la ressource de confiance. URL une liste, ou un wrapper trustAsResourceUrl explicite, et le serveur distant doit toujours envoyer des en-têtes CORS.
- Soyez attentif aux signes d'échec. L'erreur $includeContentError se produit chaque fois que le statut de la réponse sort de la plage 200 à 299, transformant une zone silencieusement vide en un message digne d'être consigné.
Une autre cause, facile à oublier, est qu'AngularJS conserve chaque vue partielle récupérée dans `$templateCache`. Par conséquent, un fichier modifié peut continuer à afficher un balisage obsolète jusqu'à ce que l'entrée du cache soit supprimée ou que la page soit rechargée depuis la source. Lorsqu'un fragment nécessite un comportement spécifique plutôt qu'un simple balisage, un directive personnalisée Avec son propre modèle et son périmètre isolé, c'est le meilleur outil.
