Al igual que en cualquier proyecto de desarrollo de software, en un proyecto web también es una buena práctica el hecho de estructurar el código en distintos componentes. Esto ayuda al mantenimiento de los mismos haciéndolo más sencillo a la vez que hace que estos componentes sean reutilizables. En un entorno web, esto se puede hacer incrustando una página dentro de otra. Es decir, cargando fragmentos de HTML depositados en distintos ficheros dentro de otro que haga de contenedor. Para este fin está la directiva ng-include en Angular.
Un ejemplo típico de uso es en el caso de la cabecera (header) y pie (footer) de la web. Lo normal es que se quiera la misma cabecera y pie en todas las páginas del sitio web o aplicación web. Para conseguir que todos sean idénticos y modificando sólo un fichero se modifique en todas las páginas, puede hacerse de una de las dos siguientes maneras. Ambas usando la directiva ng-include para llamar un html desde otro html.
Usando la directiva ng-include de Angular en un controlador
De esta forma se puede definir el html que se cargará fuera del html contenedor, como cualquier otro controlador en AngularJS. Por lo tanto, puede definirse en otro fichero para separar la lógica de la presentación y también puede ser reutilizado inyectando este controlador en el controlador de cada página.
Si se decide hacerlo así, el controlador quedaría de una forma similar a la siguiente.
var app = angular.module("app", []);
app.controller("PruebaController", function($scope) {
$scope.urlPie="pie.html"
});
Y en el HTML contenedor, se define la directiva ng-include, como cualquier otra directiva estándar de HTML. Ésta contendrá el atributo src con el nombre del elemento definido en el controlador dentro del ámbito (scope): urlPie.
<ng-include src="urlPie"></ng-include>
Usando la directiva ng-include referenciando directamente al HTML
La otra forma para cargar una página dentro de otra es más sencilla aunque quizás un poco menos estructurada, ya que queda mezclada en el HTML del contenedor y no sería reutilizable. Se trata de definir directamente el HTML a incrustar en el atributo src de ng-include. Para que se reconozca como un literal y no una expresión de Angular, debe ir entre comillas simples (‘) dentro de las comillas dobles («).
<ng-include src="'cabecera.html'"></ng-include>
