angular con dinosaurios 5: templateUrl y express

Cómo levantar un servidor express para nuestras aplicaciones angular

De Kooning

archivado en: JavaScript / 21 noviembre, 2014 / taller:

Seguimos con las directivas. En la entrada anterior de esta serie vimos que en template podemos definir un fragmento html que reemplace o se inserte en el tag de la vista donde hayamos incluido la directiva. Sin embargo, a la que la directiva sea un poco compleja, necesitaremos incluir desarrollos extensos que conviene escribir en una subplantilla aparte. Y eso es tan sencillo como definir un templateUrl en lugar de template.

miAplicacion.directive('directivaTemplate', function() {

return {

restrict: 'AE',

replace: false,

scope: { parametro: '@'},

templateUrl: 'views/plantilla.html'

}

});

Ahora bien, si intentamos hacer esto sin más en local nos dará un problema de cross-domain, por lo que debemos hacer un apaño si queremos probar las cosas antes de subirlas al server. La solución más sencilla es instalar el XAMPP, pero ya que estamos con javaScript podemos buscar otra solución más chula y es levantar un servidor con node y express js. El mecanismo es sencillo.

Un primer server en node

Con node instalado, nos vamos por consola al directorio donde vamos a crear nuestra aplicación angularesca y antes que nada vamos a levantar un servidor muy sencillo que nos permita entrar en materia. En un archivo que podemos llamar server.js escribimos esto:

var http = require('http');

var server = http.createServer();

function controlador(req, resp) {

resp.writeHead(200, {'content-type':'text/plain'});

resp.write('Hola mundo');

resp.end();

}

server.on('request', controlador);

server.listen(3000);

console.log("Servidor Iniciado");

Ahora podemos ejecutar ese archivo con node escribiendo esto en la consola:

node server.js

y, ale op, si vamos a http://localhost:3000/ ahí tenemos nuestro servidor operativo mostrando un Hola mundo de lo más sofisticado.

Sin entrar en detalle, lo que hemos ahí es cargar el módulo http de node; luego hemos llamado al método createServer(), que hemos vinculado líneas más abajo al evento request. Y en ese evento llamamos a la función controlador, que recibe dos parámetros, uno para las llamadas al server, que he denominado req; y otro para las respuestas del servidor (resp). Por último, indicamos que el server se ponga a la escucha en el puerto 3000.

Todo esto no nos sirve en nuestro caso, pero es una manera de ver, aunque sea muy por encima, cómo funciona node. Vamos ahora con express.

Un primer server express

Nos vamos al directorio de nuestra aplicación, guardamos toda nuestra aplicación en un directorio llamado public y escribimos esto para instalar express.

$ npm install express --save

Y luego cambiamos el código de server.js por este otro

/* Cargamos express */

var express = require("express");

var app = express();

/* Permitimos el cors */

app.all('/*', function(req, res, next) {

res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Headers", "X-Requested-With");

next();

});

/* En public guardamos nuestra aplicación */

app.use(express.static(__dirname + '/public'));

app.get("/", function(req, res) {

res.sendfile('index.html');

});

var port = 3000;

app.listen(port, function() {

console.log("servidor iniciado en " + port);

});

Ejecutamos de nuevo node server.js y ya tendríamos un server funcionando con el cross domain permitido. Ahora sí que podemos utilizar templateUrl sin problemas.

Bueno, soy consciente de que toda esta entrada necesitaría una explicación mucho más detallada, pero de momento vamos a dejarlo aquí y, recordad, si esto de node y express resulta un lío, no os compliquéis, os instaláis un xampp y a correr.

Nota avanzada: $templateCache

Hay otra manera de evitar el cross-domain y, al menos para mí, que he trabajado mucho con handelbars, no me resulta chocante, aunque no es muy limpia, y consiste en incorporarla a la caché de plantillas o, dicho en angularesco, a la $templateCache. Cada vez que angular renderiza una plantilla en una directiva o en un ng-include, la almacena en este objeto para que la siguiente vez se cargue más rápido. Y lo chulo es que podemos forzar esta carga de la siguiente manera:

1) Como se hace en handelbars, en un tag script indicamos que el tipo es de "text/ng-template" y le asignamos un id. Algo así:

<script type="text/ng-template" id="miPlantilla.html">

<p>Soy el contenido de la plantilla</p>

</script>

Y luego podemos usarla en templateUrl y en los ng-include referenciando su id:

miAplicacion.directive('directivaTemplate', function() {

return {

restrict: 'AE',

replace: false,

scope: { parametro: '@'},

templateUrl: 'miPlantilla.html'

}

});

|| Tags: , ,

valoración de los lectores sobre angular con dinosaurios 5: templateUrl y express

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (1 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.