Ng-include en AngularJS: Cómo incluir un archivo HTML (Ejemplo)

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 en 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 reutilizarse en varias aplicaciones con solo incluir ese archivo.

Este es normalmente el concepto de sentencias de inclusión 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.

En este tutorial, aprenderá:

• El lado del cliente incluye
• El lado del servidor incluye
• Cómo incluir un archivo HTML en AngularJS

El lado del cliente incluye

Una de las formas más comunes es incluir código HTML mediante Javascript. JavaScript es un lenguaje de programación que se puede utilizar para manipular el contenido de una página HTML sobre la marcha. Por lo tanto, Javascript también se puede utilizar para incluir código de otros archivos.

Los pasos siguientes muestran cómo se puede lograr.

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

Este es un archivo incluido

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

A continuación se muestran 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 que facilita aún más la manipulación del DOM.
3. En la función de Javascript, hay una declaración '$ ("# Content"). Load ("Sub.html");' lo que hace que el código en el archivo Sub.html se inyecte en la etiqueta div que tiene el ID de Content.

El lado del servidor incluye

Las inclusiones del lado del servidor también están disponibles para incluir un código común en todo el sitio. Esto se hace normalmente para incluir contenido en las siguientes partes 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 una inclusión del lado del servidor, los nombres de archivo 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 include;

• La directiva anterior permite incluir el contenido de un documento en otro.
• El comando "virtual" anterior al código se utiliza para especificar el destino 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 se necesita 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 include.

Cómo incluir un archivo HTML en AngularJS

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

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

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

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

El siguiente fragmento de código asume que hay una variable de alcance llamada "tutorial". Luego usa la directiva ng-repeat, que pasa por cada tema en la variable "Tutorial" y muestra los valores para el par clave-valor 'nombre' y 'descripción'.

 {{Topic.Name}}  {{Topic.Country}} 

Paso 2) escribamos el siguiente código 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á reemplazada 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. Descripción: proporciona una descripción de cada tema.

También se accede a la variable del tutorial en el archivo 'Table.html'.

Evento global Guru99
 

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

Salida :

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 mejor opción para incrustar contenido HTML de otros archivos.
• Otra forma de incluir contenido HTML de otros archivos es 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 desde archivos externos directamente en el archivo HTML principal.