Par défaut, HTML ne permet pas d'inclure du code côté client à partir d'autres fichiers. C'est normalement une bonne pratique dans n'importe quel langage de programmation de distribuer des fonctionnalités sur divers fichiers pour n'importe quelle application.
Par exemple, si vous aviez une logique pour les opérations numériques, vous voudriez normalement que cette fonctionnalité soit définie dans un fichier séparé. Ce fichier séparé pourrait ensuite être réutilisé dans plusieurs applications en incluant simplement ce fichier.
C'est normalement le concept d' instructions Include qui sont disponibles dans des langages de programmation tels que .Net et Java.
Ce didacticiel examine d'autres manières d'inclure des fichiers (fichiers contenant du code HTML externe) dans le fichier HTML principal.
Dans ce didacticiel, vous apprendrez-
- Le côté client comprend
- Côté serveur comprend
- Comment inclure un fichier HTML dans AngularJS
Le côté client comprend
L'une des méthodes les plus courantes consiste à inclure du code HTML via Javascript. JavaScript est un langage de programmation qui peut être utilisé pour manipuler le contenu d'une page HTML à la volée. Par conséquent, Javascript peut également être utilisé pour inclure du code à partir d'autres fichiers.
Les étapes ci-dessous montrent comment cela peut être accompli.
Étape 1) Définissez un fichier appelé Sub.html et ajoutez le code suivant au fichier.
Ceci est un fichier inclus
Étape 2) Créez un fichier appelé Sample.html, qui est votre fichier d'application principal et ajoutez l'extrait de code ci-dessous.
Voici 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ù le code du fichier externe «Sub.html» sera inséré.
- Il y a une référence à un script jquery. JQuery est un langage de script construit au-dessus de Javascript qui rend la manipulation DOM encore plus facile.
- Dans la fonction Javascript, il y a une instruction '$ ("# Content"). Load ("Sub.html");' ce qui provoque l'injection du code du fichier Sub.html dans la balise div qui a l'id de Content.
Côté serveur comprend
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 Server Side includes, les noms de fichier ont des extensions spéciales. Ils sont généralement acceptés par le serveur Web tels que .shtml, .stm, .shtm, .cgi.
La directive utilisée pour inclure le contenu est la "directive inclure". Un exemple de la directive include est présenté ci-dessous;
- La directive ci-dessus permet d'inclure le contenu d'un document dans un autre.
- La commande "virtual" ci-dessus code est utilisée pour spécifier la cible par rapport à la racine de domaine de l'application.
- En outre, pour le paramètre virtuel, il y a aussi le paramètre de fichier qui peut être utilisé. Les paramètres "fichier" sont utilisés lorsque l'on a besoin de spécifier le chemin relatif au répertoire du fichier courant.
Noter:
Le paramètre virtuel est utilisé pour spécifier le fichier (page HTML, fichier texte, script, etc.) à inclure. 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
Angular fournit la fonction pour inclure les fonctionnalités d'autres fichiers AngularJS à l'aide de la directive ng-include.
Le but principal de la "directive ng-include" est utilisé pour récupérer, compiler et inclure un fragment HTML externe dans l'application principale AngularJS.
Examinons la base de code ci-dessous et expliquons comment cela peut être réalisé en utilisant Angular.
É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 qu'il existe une variable d'étendue appelée «tutoriel». Il utilise ensuite la directive ng-repeat, qui parcourt chaque rubrique de la variable "Tutorial" et affiche les valeurs de la paire clé-valeur "nom" et "description".
| {{Topic.Name}} | {{Topic.Country}} |
Étape 2) écrivons le code ci-dessous dans un fichier appelé Main.html. Ceci est une application angular.JS simple qui présente les aspects suivants
- 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. Ainsi, la balise div ' ' sera remplacée par le code entier dans le fichier 'Table.html'.
- Dans le contrôleur, une variable "tutorial" est créée dans le cadre de l'objet $ scope. Cette variable contient une liste de paires clé-valeur.
Dans notre exemple, les paires valeur / clé sont
- Nom - Ceci indique le nom d'un sujet tel que les contrôleurs, les modèles et les directives.
- Description - Cela donne une description de chaque sujet
La variable du didacticiel est également accessible dans le fichier 'Table.html'.
Inscription à l'événement Événement mondial Guru99
Lorsque vous exécutez le code ci-dessus, vous obtiendrez la sortie suivante.
Sortie :
Résumé:
- Par défaut, nous savons que HTML ne fournit pas un moyen direct d'inclure du contenu HTML à partir d'autres fichiers comme d'autres langages de programmation.
- Javascript avec JQuery est la meilleure option pour incorporer du contenu HTML à partir d'autres fichiers.
- Une autre façon d'inclure du contenu HTML à partir d'autres fichiers consiste à utiliser la directive
et le mot clé de paramètre virtuel. Le mot-clé de paramètre virtuel est utilisé pour désigner le fichier qui doit être incorporé. Ceci est connu sous le nom d'inclusions côté serveur. - Angular fournit également la possibilité d'inclure des fichiers à l'aide de la directive ng-include. Cette directive peut être utilisée pour injecter du code à partir de fichiers externes directement dans le fichier HTML principal.