ng-include dans AngularJS : Comment inclure un fichier HTML [Exemple]

Par : James Hartmann James Hartmann
Hours Le kit de préparation mis à jour

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 dans des langages de programmation tels que .Net et Java.

Ce didacticiel examine d'autres façons dont les fichiers (fichiers contenant du code HTML externe) peuvent être inclus dans le fichier HTML principal.

Le côté client comprend

L'un des moyens les plus courants consiste à inclure du code HTML via Javascript. Javascénario est un langage de programmation qui peut être utilisé pour manipuler le contenu d'une page HTML à la volée. Ainsi, Javascript peut également être utilisé pour inclure du code provenant 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.

<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,

  1. 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'.
  2. Il y a une référence à un script jquery. JQuery est un langage de script construit sur Javascript ce qui rend la manipulation du DOM encore plus facile.
  3. Dans l' Javascript fonction, 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'identifiant de Content. 
    <html> 
	  <head> 
	    <script src="jquery.js"></script> 
	    <script> 
	    $(function(){
	      $("#Content").load("Sub.html"); 
	    });
    </script> 
  </head> 

<body> 
     <div id="Content"></div>
  </body> 
</html>

ARTICLES LIÉS

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.

  1. En-tête de page
  2. Pied de page
  3. Le menu de navigation.

Pour qu'un serveur Web reconnaisse un Server Side Include, les noms de fichiers 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 du contenu est la « directive include ». Un exemple de 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

Angular fournit la fonction permettant d'inclure les fonctionnalités d'autres fichiers AngularJS en utilisant la directive ng-include.

L'objectif 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 de portée appelée « didacticiel ». Il utilise ensuite la directive ng-repeat, qui parcourt chaque sujet dans la variable « Tutoriel » et affiche les valeurs de la paire clé-valeur « nom » et « description ».

<table>
    <tr ng-repeat="Topic in tutorial">
        <td>{{ Topic.Name }}</td>
        <td>{{ Topic.Country }}</td>
    </tr>
</table>

Étape 2) écrivons le code ci-dessous dans un fichier appelé Main.html. Il s'agit d'une simple application angulaire.JS qui présente les aspects suivants

  1. 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'.
  2. Dans le contrôleur, une 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

  1. Nom – Ceci indique le nom d'un sujet tel que les contrôleurs, les modèles et les directives.
  2. 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:

Inclure un fichier HTML dans AngularJS

Résumé

  • Par défaut, nous savons que HTML ne fournit pas de moyen direct d'inclure le contenu HTML d'autres fichiers comme les autres langages de programmation.
  • Javascript avec JQuery, c'est l'option la plus préférée pour intégrer du contenu HTML à partir d'autres fichiers.
  • Une autre façon d'inclure HTML le contenu d'autres fichiers consiste à utiliser le directive et le mot-clé du paramètre virtuel. Le mot-clé de paramètre virtuel est utilisé pour désigner le fichier qui doit être intégré. C’est ce qu’on appelle les inclusions côté serveur.
  • Angular offre également la possibilité d'inclure des fichiers à l'aide de la directive ng-include. Cette directive peut être utilisée pour injecter du code provenant de fichiers externes directement dans le fichier HTML principal.

Résumez cet article avec :