AngularJS Incluir

En AngularJS, puedes incluir archivos HTML dentro de HTML.

Incluir archivos HTML en HTML

Actualmente, HTML no admite la función de incluir archivos HTML.

Inclusión del lado del servidor

La mayoría de los scripts del servidor admiten la función de incluir archivos (SSI： Server Side Includes).

Con SSI, puedes incluir archivos HTML en HTML y enviarlos al navegador del cliente.

Ejemplo PHP

<?php require("navigation.php"); ?>

Inclusión del lado del cliente

Hay muchas formas de incluir archivos HTML en HTML mediante JavaScript.

Normalmente usamos solicitudes http (AJAX) para obtener datos del servidor; los datos devueltos podemos, mediante el usoinnerHTMLescribirlos en elementos HTML.

Incluir con AngularJS

Con AngularJS, puedes usarng-includela directiva para incluir contenido HTML:

Ejemplo

Pruébalo »

Los pasos son los siguientes:

Código del archivo ejemplo.htm:

<h1>Tutorial de Ejemplo</h1> <p>¡Esta es una página HTML incluida, implementada con la directiva ng-include!</p>

Incluir código AngularJS

Además de poder incluir archivos HTML, la directiva ng-include también puede incluir código AngularJS:

Código del archivo sites.htm:

El archivo incluido "sites.php" contiene código AngularJS que se ejecutará normalmente:

Ejemplo

<div ng-app="myApp" ng-controller="sitesCtrl"> <div ng-include="'sites.htm'"></div> </div> <script> var app = angular.module('myApp', []); app.controller('sitesCtrl', function($scope, $http) { $http.get("sites.php").then(function (response) { $scope.names = response.data.records; }); }); </script>

Pruébalo »

Inclusión de dominios cruzados

De forma predeterminada, la directiva ng-include no permite incluir archivos de otros dominios.

Si necesitas incluir archivos de otros dominios, debes configurar la lista blanca de acceso a dominios:

Código del archivo sites.htm:

<body ng-app="myApp"> <div ng-include="'https://c.example.com/ejemplotest/angular_include.php'"></div> <script> var app = angular.module('myApp', []) app.config(function($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist([ 'https://c.example.com/ejemplotest/**' ]); }); </script> </body>

Pruébalo »

Además, también debes configurar el servidor para permitir el acceso entre dominios. Consulta el método de configuración en:La mejor solución al problema de dominios cruzados en PHP Ajax.

Código del archivo angular_include.php:

<?php //Permitir que todos los dominios puedan acceder header('Access-Control-Allow-Origin:*'); echo '<b style="color:red">Soy contenido de dominio cruzado</b>'; ?>

Otras extensiones

AngularJS Instancia

AngularJS Manual de referencia

AngularJS Incluir

Incluir archivos HTML en HTML

Inclusión del lado del servidor

Ejemplo PHP

Inclusión del lado del cliente

Incluir con AngularJS

Ejemplo

Código del archivo ejemplo.htm:

Incluir código AngularJS

Código del archivo sites.htm:

Ejemplo

Inclusión de dominios cruzados

Código del archivo sites.htm:

Código del archivo angular_include.php: