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.
