AngularJS ng-include: Incluir archivos HTML con un ejemplo
james hartman
⚡ Resumen inteligente
En AngularJS, ng-include obtiene, compila e inyecta un fragmento HTML externo en la página principal, de modo que el marcado compartido, como una tabla, un encabezado o un pie de página, reside en un único archivo parcial reutilizable.
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 examina otras formas de archivos (archivos que contienen archivos externos) HTML El código) puede incluirse en el archivo HTML principal.
El lado del cliente incluye
Una de las formas más comunes de incluir código HTML es mediante JavaGuión. JavaScript es un lenguaje de programación que se puede utilizar para manipular el contenido de una página HTML sobre la marcha. Por eso, JavaTambién se puede utilizar un script 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.
<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,
- 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'.
- 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.
- En la sección JavaFunción de script, hay una instrucción '$(“#Content”).load(“Sub.html”);' que hace que el código del archivo Sub.html se inyecte en la etiqueta div que tiene el id Content.
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
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.
- Encabezado de página
- Pie de página
- Menú de Navegación.
Para que un servidor web reconozca un Server Side Include, los nombres de archivo deben tener extensiones especiales. Generalmente, el servidor web acepta extensiones como .shtml, .stm, .shtm y .cgi.
La directiva que se utiliza para incluir contenido es la directiva “include”. A continuación se muestra un ejemplo de la directiva include:
<!--#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
AngularJS Proporciona la función para incluir la funcionalidad de otros archivos AngularJS mediante el uso de ng-include. Directivas.
El objetivo principal de la directiva “ng-include” es obtener, compilar e incluir un fragmento HTML externo en la aplicación principal de AngularJS.
Nota de versión: AngularJS 1.x dejó de tener soporte a largo plazo el 31 de diciembre de 2021, y el equipo del framework afirma que El soporte para AngularJS ha finalizado oficialmente. en enero de 2022, por lo que no hay lanzamientos ni parches de seguridad posteriores. Cada paso y bloque de código a continuación permanece exactamente como se publicó, como referencia histórica. Angular moderno no incluye un reemplazo directo: el marcado se compone de componentes y un fragmento seleccionado en tiempo de ejecución se renderiza con ng-contenedor y ngComponentOutlet.
Analicemos el siguiente código fuente y expliquemos cómo se puede lograr esto utilizando AngularJS.
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 asume que existe una variable de ámbito llamada "tutorial". Luego utiliza la ng-repetir directiva, que recorre cada tema en la variable “tutorial” y muestra los valores para 'Name' y 'DescriptPar clave-valor de ion.
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
Paso 2) Escribamos el siguiente código en un archivo llamado Main.html. Esta es una aplicación AngularJS simple que tiene los siguientes aspectos.
- 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'.
- En la sección controladorSe crea una variable llamada “tutorial” como parte del objeto $scope. Esta variable contiene una lista de pares clave-valor.
En nuestro ejemplo, los pares clave-valor son
- Nombre: indica el nombre de un tema, como controladores, modelos y directivas.
- 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.
Resultado:
La captura a continuación muestra el resultado renderizado: la pestaña del navegador lleva el título Registro de eventos, el encabezado se encuentra encima de la tabla inyectada y las tres filas se extraen del array del tutorial en Main.html a través de la parcial. La captura de pantalla anotada deletrea el encabezado Gur99 mientras que el código escribe Guru99.
Atributos de ng-include: src, onload y autoscroll
Más allá del nombre del archivo, la directiva acepta dos atributos opcionales y se puede escribir de tres maneras: como un atributo en cualquier elemento, como un <ng-include> elemento, o como una clase CSS. La referencia a continuación sigue la oficial Documentación de ngInclude.
| Atributo | Obligatorio | ¿Qué hace? |
|---|---|---|
| src o ng-include | Sí: | Expresión que se evalúa según la plantilla URL |
| onload | No | La expresión se evalúa cada vez que finaliza la carga de un nuevo fragmento. |
| desplazamiento automático | No | Llama a $anchorScroll después de que se carga el contenido; omitir el atributo desactiva el desplazamiento. |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
El error más común se deduce de la primera fila: src toma un expresión, no una cadena simple. Por lo tanto, una ruta literal necesita sus propias comillas dentro del atributo, razón por la cual el ejemplo anterior se lee ng-include="'Table.html'". Escritura ng-include="Table.html" hace que AngularJS evalúe Table Como propiedad de ámbito, no encuentra nada y deja el elemento vacío.
¿Por qué ng-include crea un nuevo ámbito secundario?
La directiva no pega marcado en el ámbito circundante. Cada inclusión crea un nuevo elemento hijo. global que hereda prototípicamente del ámbito en el que fue declarado, y ese hecho explica la mayoría de las sorpresas vinculantes.
La lectura funciona como se esperaba. El fragmento anterior dice: tutorial directamente de los padres, por eso ng-repeat encuentra el array. El problema surge al escribir: cuando una asignación parcial se realiza a un tipo primitivo, como con ng-model="topic"AngularJS crea topic en el ámbito secundario y la copia principal nunca cambia.
Dos hábitos evitan la trampa:
- Vincular a través de un objeto, como en
ng-model="data.topic", de modo que padre e hijo llegan a la misma referencia. - Mantén el estado en un controlador o un servicio y expón funciones en lugar de simples primitivas.
El incluido también emite $includeContentRequested, $includeContentLoaded y $includeContentError, para que un padre pueda reaccionar a través de $scope.$on sin acceder en absoluto al ámbito secundario.
Cómo solucionar un error de ng-include o un error en este archivo.
Una inclusión que no produce ningún resultado suele fallar por alguna de las siguientes razones. Analícelas en este orden.
- Comprueba las cotizaciones. Un nombre de archivo literal necesita comillas simples dentro del valor del atributo. Sin ellas, la expresión se resuelve como indefinida y no se envía ninguna solicitud.
- Sirva la página a través de HTTP. La directiva realiza una solicitud XHR para el archivo parcial, por lo que abrir Main.html directamente desde el disco mediante una ruta de archivo falla en la mayoría de los navegadores. Cualquier servidor web local soluciona este problema.
- Confirme que la ruta se resuelve. Observa el panel de red para ver la solicitud. Un error 404 significa que la ruta es relativa a la página que aloja la inclusión, no a la plantilla parcial que la referencia.
- Respetar la regla del mismo origen. Por defecto la plantilla URL debe coincidir con el dominio y el protocolo del documento de la aplicación, porque AngularJS lo pasa a través de $sce.getTrustedResourceUrlUna plantilla de otro lugar necesita una entrada en el recurso de confianza. URL lista, o un contenedor trustAsResourceUrl explícito, y el servidor remoto aún tiene que enviar encabezados CORS.
- Presta atención al fallo. La excepción $includeContentError se activa siempre que el estado de la respuesta se encuentre fuera del rango 200 a 299, convirtiendo un área silenciosamente en blanco en un mensaje que merece ser registrado.
Otra causa es fácil de pasar por alto. AngularJS guarda cada parcial obtenido en $templateCache, por lo que un archivo editado puede seguir sirviendo marcado obsoleto hasta que se elimine la entrada de caché o se vuelva a cargar la página desde el origen. Cuando un fragmento necesita un comportamiento propio en lugar de solo marcado, directiva personalizada Con su propia plantilla y alcance aislado, es la mejor herramienta.
