AngularJS (12) directiva ng-include
Hasta ahora cuando queríamos hacer una web modular había que utilizar un lenguaje de servidor como PHP y utilizar includes o requires para poder hacerlo. Pero ahora podemos hacerlo también desde el lado del cliente con la directiva ng-include.
¿Para que sirve una web modular?
Si ya has hecho algún proyecto de desarrollo WEB te habrás dado cuenta de que cada página debe de tener su cabecera, pie, cuerpo, menús, asides… y si queremos por ejemplo cambiar un correo electrónico que se encontrase en el pie debíamos de ir cambiando archivo tras archivo.
Aunque eso con lenguajes como PHP podía hacerse desde el lado del servidor, AngularJS nos ofrece una forma sencilla de hacerlo desde el cliente por medio de la directiva ng-include que como veremos se utiliza igual que una etiqueta.
¿Cómo hacer una web modular con la directiva ng-include?
Para empezar a analizar el uso básico de esta directiva, tenemos que pensar en que módulos vamos a separar nuestra web, por ejemplo podemos pensar en una cabecera, un cuerpo y un pie. (Ya se que es muy simple pero nos viene genial para entenderlo)
En este ejemplo podemos ver claramente como ni la cabecera ni el pie deberían de cambiar en toda nuestra aplicación, pero el contenido si varía en cada página del sitio. De esta forma haríamos dos archivos html que tuvieran el contenido de la cabecera y del pie, como por ejemplo:
cabecera.html
<h2>esto es la cabecera</h2>
pie.html
<h2>esto es el pie</h2>
Ahora debemos de crear el archivo html de nuestra página de la siguiente forma:
<!DOCTYPE html> <html ng-app="app"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script> <script src="script.js"></script> </head> <body ng-controller="controlador"> <ng-include src="'cabecera.html'"></ng-include> Esto esta en la pagina principal <ng-include src="'pie.html'"></ng-include> </body> </html>
Como vemos en este ejemplo, se enlaza con la librería de angularJS y con nuestro script, que veremos más abajo, y luego aparece la etiqueta con la directiva ng-include con un atributo src el cual apunta a nuestros archivos cabecera y pie.
Pero todo esto no funciona si no ponemos este simple script JS donde se activa la directiva ng-include:
script.js
var app = angular.module("app", []);
app.controller("controlador", function($scope) {
});
De esta forma tan sencilla obtenemos el resultado siguiente al ejecutarlo:
esto es la cabecera
Esto esta en la pagina principal
esto es el pie
Naturalmente todas las páginas de nuestro sitio deben de tener la misma estructura y estar enlazas de la misma forma, de lo contrario no serviría de nada.
Modificando secciones de una web modular
Para modificar secciones de una web modular como esta y que los cambios tengan efecto en todas las páginas del sitio, es tan fácil como modificar el archivo del modulo que queremos cambiar. Por ejemplo, supongamos que queremos cambiar el pie y poner un correo electrónico:
pie.html cambiado:
<h2>miguel@mialtoweb.es</h2>
y ahora al ejecutarlo nos aparece:
esto es la cabecera
Esto esta en la pagina principal
miguel@mialtoweb.es
Conclusiones
En mi opinión el utilizar la directiva ng-include es todo ventajas a la hora de hacer el diseño y el mantenimiento de una web, ya que se puede hacer una web modular con un funcionamiento muy sencillo introduciendo los módulos en un carpeta aparte para poder tenerlo todo mejor gestionado.
Naturalmente todo esto depende del proyecto y las tecnologías utilizadas, ya que si se esta trabajando en una aplicación producida mayormente con PHP no recomiendo usarla, pero si se trata de una web que puede estar gestionada desde la parte del cliente, es algo que no debe de dejarse de tener en cuenta.
There is One Comment.