ng-include en AngularJS: Cómo incluir un archivo HTML [Ejemplo]

Por: james hartman james hartman
Hours Actualizado

De forma predeterminada, HTML no ofrece la posibilidad de incluir código del lado del cliente de otros archivos. Normalmente es una buena práctica en cualquier lenguaje de programación distribuir la funcionalidad entre varios archivos para cualquier aplicación.

Por ejemplo, si tuviera lógica para operaciones numéricas, normalmente querría tener esa funcionalidad definida en un archivo separado. Ese archivo separado podría luego reutilizarse en múltiples aplicaciones con solo incluirlo.

Este es normalmente el concepto de Incluir declaraciones que están disponibles en lenguajes de programación como .Net y Java.

Este tutorial analiza otras formas en que los archivos (archivos que contienen código HTML externo) se pueden incluir en el archivo HTML principal.

El lado del cliente incluye

Una de las formas más comunes es incluir código HTML a través de Javascript. JavaGuión es un lenguaje de programación que se puede utilizar para manipular el contenido de una página HTML sobre la marcha. Por eso, Javascript También se puede utilizar para incluir código de otros archivos.

Los pasos siguientes muestran cómo se puede lograr esto.

Paso 1) Defina un archivo llamado Sub.html y agregue el siguiente código al archivo.

<div>
	This is an included file
</div>

Paso 2) Cree un archivo llamado Sample.html, que es el archivo principal de su aplicación y agregue el siguiente fragmento de código.

A continuación se detallan los aspectos principales a tener en cuenta sobre el siguiente código,

  1. En la etiqueta del cuerpo, hay una etiqueta div que tiene una identificación de Contenido. Este es el lugar donde se insertará el código del archivo externo 'Sub.html'.
  2. Hay una referencia a un script jquery. JQuery es un lenguaje de scripting construido sobre Javascript lo que hace que la manipulación de DOM sea aún más fácil.
  3. En la casilla Javascript función, hay una declaración '$(“#Content”).load(“Sub.html”);' lo que hace que el código del archivo Sub.html se inyecte en la etiqueta div que tiene la identificación de Contenido. 
    <html> 
	  <head> 
	    <script src="jquery.js"></script> 
	    <script> 
	    $(function(){
	      $("#Content").load("Sub.html"); 
	    });
    </script> 
  </head> 

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

ARTÍCULOS RELACIONADOS

El lado del servidor incluye

Las inclusiones del lado del servidor también están disponibles para incluir un fragmento de código común en todo un sitio. Normalmente, esto se hace para incluir contenido en las partes siguientes de un documento HTML.

  1. Encabezado de página
  2. Pie de página
  3. Menú de Navegación.

Para que un servidor web reconozca un Server Side Incluye, los nombres de los archivos tienen extensiones especiales. Generalmente son aceptados por el servidor web, como .shtml, .stm, .shtm, .cgi.

La directiva utilizada para incluir contenido es la "directiva de inclusión". A continuación se muestra un ejemplo de la directiva de inclusión;

<!--#include virtual="navigation.cgi" -->
  • La directiva anterior permite incluir el contenido de un documento en otro.
  • El comando "virtual" anterior al código se utiliza para especificar el objetivo en relación con la raíz del dominio de la aplicación.
  • Además, para el parámetro virtual, también existe el parámetro de archivo que se puede utilizar. Los parámetros de "archivo" se utilizan cuando es necesario especificar la ruta relativa al directorio del archivo actual.

Nota:

El parámetro virtual se utiliza para especificar el archivo (página HTML, archivo de texto, script, etc.) que debe incluirse. Si el proceso del servidor web no tiene acceso para leer el archivo o ejecutar el script, el comando de inclusión fallará. La palabra "virtual" es una palabra clave que debe colocarse en la directiva de inclusión.

Cómo incluir un archivo HTML en AngularJS

Angular proporciona la función para incluir la funcionalidad de otros archivos AngularJS mediante la directiva ng-include.

El propósito principal de la "directiva ng-include" se utiliza para buscar, compilar e incluir un fragmento HTML externo en la aplicación principal AngularJS.

Veamos el código base a continuación y expliquemos cómo se puede lograr esto usando Angular.

Paso 1) Escribamos el siguiente código en un archivo llamado Table.html. Este es el archivo que se inyectará en el archivo de nuestra aplicación principal mediante la directiva ng-include.

El siguiente fragmento de código supone que hay una variable de alcance llamada "tutorial". Luego utiliza la directiva ng-repeat, que analiza cada tema en la variable "Tutorial" y muestra los valores del par clave-valor "nombre" y "descripción".

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

Paso 2) Escribamos el código a continuación en un archivo llamado Main.html. Esta es una aplicación angular.JS simple que tiene los siguientes aspectos

  1. Utilice la "directiva ng-include" para inyectar el código en el archivo externo 'Table.html'. La declaración se ha resaltado en negrita en el siguiente código. Entonces la etiqueta div ' ' será reemplazado por el código completo en el archivo 'Table.html'.
  2. En el controlador, se crea una variable "tutorial" como parte del objeto $scope. Esta variable contiene una lista de pares clave-valor.

En nuestro ejemplo, los pares clave-valor son

  1. Nombre: indica el nombre de un tema, como controladores, modelos y directivas.
  2. Description – Esto proporciona una descripción de cada tema.

También se accede a la variable del tutorial en el archivo '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>

Cuando ejecute el código anterior, obtendrá el siguiente resultado.

Salida:

Incluir archivo HTML en AngularJS

Resumen

  • De forma predeterminada, sabemos que HTML no proporciona una forma directa de incluir contenido HTML de otros archivos como otros. lenguajes de programación.
  • Javascript junto con JQuery es la opción preferida para incrustar contenido HTML de otros archivos.
  • Otra forma de incluir HTML El contenido de otros archivos debe utilizar la directiva y la palabra clave del parámetro virtual. La palabra clave del parámetro virtual se utiliza para indicar el archivo que debe incrustarse. Esto se conoce como inclusiones del lado del servidor.
  • Angular también ofrece la posibilidad de incluir archivos mediante la directiva ng-include. Esta directiva se puede utilizar para inyectar código de archivos externos directamente en el archivo HTML principal.