Curso de AngularJS y REST

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== 4.8 ng-include ======
Esta directiva, a diferencia de otra que hemos visto, se puede usar directamente como un tag HTML en vez de como un atributo HTML. SE usa 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'' que indica la url del fragmento la 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.

<sxh js;highlight: [4];>
var app = angular.module("app", []);
  
app.controller("PruebaController", function($scope) {
  $scope.urlPie="pie.html"
});
</sxh>
  * Línea 4: La propiedad ''urlPie'' del ''$scope'' contiene la URL de una página web que cargaremos en el pie

<sxh html;highlight: [10,12]>
<!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>
</sxh>
  * 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''


===== Ejemplo =====
{{url>http://embed.plnkr.co/oh3TiR}}


===== Referencias =====
  * [[https://docs.angularjs.org/api/ng/directive/ngInclude|ng-include]]