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

De forma predeterminada, HTML no proporciona 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 funcionalidad a través de varios archivos para cualquier aplicación.

Por ejemplo, si tiene lógica para operaciones numéricas, normalmente desea tener esa funcionalidad definida en un archivo separado. Ese archivo separado podría ser reutilizado en varias aplicaciones simplemente incluyendo ese archivo.

Este es normalmente el concepto de declaraciones Include 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, usted aprenderá –

El lado del cliente incluye

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

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

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

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

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

  1. En la etiqueta body, 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 hace que la manipulación DOM sea aún más fácil.
  3. En la función Javascript, hay una declaración ‘$ (” #Content “) .load (“sub.html”); ‘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 incluciones del lado del servidor también están disponibles para incluir un fragmento de código común en un sitio. Esto se hace normalmente 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 servidor incluye, 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 de inclusión;

  • La directiva anterior permite incluir el contenido de un documento en otro.
  • El comando “virtual” anterior código se utiliza para especificar el destino relativo a la raíz del dominio de la aplicación.
  • Además, para el parámetro virtual, también está el parámetro de archivo que se puede utilizar. Los parámetros “file” 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 se debe incluir. Si el proceso del servidor web no tiene acceso para leer el archivo o ejecutar el script, el comando include fallará. La palabra ‘virtual’ es una palabra clave que se requiere para ser colocado 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 utiliza 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 esto se puede lograr usando Angular.

Paso 1) vamos a escribir 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 ámbito llamada “tutorial”. A continuación, utiliza 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’.

Paso 2) vamos a escribir el siguiente código en un archivo llamado Main.html. Esta es una aplicación Angular.js simple que tiene los siguientes aspectos

  1. Use 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. Por lo tanto, la etiqueta div <div ng-include=”‘Table.html'”></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 de valores clave son

  1. Nombre: indica el nombre de un tema como Controllers, Models y Directives.
  2. Descripción — Esto da una descripción de cada tema

También se accede a la variable de aprendizaje en el archivo ‘table.html’.

Cuando ejecuta el código anterior, obtendrá la siguiente salida.

Salida:

Resumen:

  • Por defecto, 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 contenido HTML de otros archivos es usar la <include> directiva y la palabra clave del parámetro virtual. La palabra clave de parámetro virtual se utiliza para denotar el archivo que necesita ser incrustado. Esto se conoce como server-side includes.
  • Angular también proporciona la facilidad de incluir archivos mediante el uso de la directiva ng-include. Esta directiva se puede utilizar para inyectar código de archivos externos directamente en el archivo HTML principal.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *