Esta directiva a diferencia de otra que hemos visto se puede usar directamente como un tag HTML en vez de como un atributo HTML. Su utilidad es para cargar trozos de HTML en la página. Es como los include de la parte de servidor pero ahora desde JavaScript.

Dispone de un atributo llamado src en el que indicar la url del fragmento de página a cargar. Destacar que el valor del atributo src es una expresión del $scope. Si queremos que sea un literal deberemos incluir la url entre comillas.

Veamos un ejemplo en el que vamos a cargar 2 páginas html , una en la cabecera y otra en el pie.

var app = angular.module("app", []);
  
app.controller("PruebaController", function($scope) {
  $scope.urlPie="pie.html"
});

• Línea 4: La propiedad urlPie del $scope contiene la URL de una página web que cargaremos en el pie

<!DOCTYPE html>
<html ng-app="app">
 
<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
  <script src="script.js"></script>
</head>
 
<body ng-controller="PruebaController">
<ng-include src="'cabecera.html'"></ng-include>
Esto esta en la pagina principal
<ng-include src="urlPie"></ng-include>
</body>
 
</html>

• Línea 10: Cargamos la página cabecera.html y en el atributo src está directamente la URL por lo que el texto está entre comillas.
• Línea 12: Cargamos la página pie.html pero en el atributo src está el valor de la propiedad urlPie del $scope

Personalmente me sigue sorprendiendo lo fácil que es hacer modificaciones en el DOM solamente modificando información desde JavaScript. En este caso ha sido el estilo CSS, pero con ng-if , ng-repeat o ng-options también es muy sencillo hacer modificaciones en el DOM. Con herramientas así usar jQuery para modificar el DOM parece cosa del siglo pasado.

• ng-include