17 novembre 2012

Jade Template Engine

Utilizzare Jede template engine con express

Nel post precedente abbiamo visto come iniziare ad usare Express, ora vediamo come usare un template engine: Jade.

Jade non è un template engine classico, non dobbiamo scrivere i tag html ma dobbiamo usare una nuova sintassi (basata sull'indentazione e non tanto difficile da imparare), con questo sistema diventa impossibile commettere errori di sintassi durante la scrittura dell'html e ciò ci permetterà anche di evitare errori 'invisibili' su IE quando sviluppiamo applicazioni.

Prima cosa configuriamo le nostre dipendenze, modifichiamo il file package.json

{
  "name": "my-app",
  "description": "Un'app incredibile",
  "version": "0.0.1",
  "dependencies": {
    "express": ">=3.x",
    "jade": "*"
  }
}

Diamo il comando per risolvere le dipendenze

> npm install

Ora diciamo alla nostra applicazione che deve usare jade come template engine, configuriamo il path che conterrà le view e creaimo una action che usa un template utilizzando la funzione res.render

app.set('views', __dirname + '/views');
app.set('view engine', 'jade');

app.get('/hello', function(req, res) {
  res.render('hello', {name: req.param('name')});
});

A questo punto possiamo creare all'interno della root del progetto una direcotry views che conterrà i file layout.jade, hello.jade e inc/footer.jade

layout.jade

doctype 5
html(lang="it")
  head
    title Hello World
  body
    #container
      block content
    include inc/footer

hello.jade

extends layout

block content
  h1.hello Hello 
    if name
      small= name
        i !
    else
      small world!

inc/footer.jade

p#footer
  | An example of an 
  a(href='#') inline
  |  link.

Visitiamo col browser la pagina http://localhost:3000/hello?name=antonio il risultato sarà il seguente html

<!DOCTYPE html>
<html lang="it">
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <div id="container">
      <h1 class="hello">Hello <small>antonio<i>!</i></small>
      </h1>
    </div>
    <p id="footer">An example of an <a href="#">inline</a> link.</p>
  </body>
</html>

Per maggiori informazioni sulla sintassi di jade vedere la documentazione.

Nel caso in cui non piaccia si può sempre usare un altro template engine più classico come ad esempio ejs, i passi da seguire sono sempre gli stessi basta solo importare nel progetto ejs ed usare file .ejs.

programmazione e web

Antonio Salvati

Jade Template Engine