Category Archives: node-js

jade templating engine

Getting started with jade

Introduction

Jade is a high performance and feature-rich templating engine heavily influenced by Haml and implemented with JavaScript for node.Jade is a clean, whitespace sensitive syntax for writing html.This a tutorial to get started with jade.

Basic Syntax and command line

Please install node-js for making use of jade.

Run this to install jade globally

npm install -g jade

Fire up your favourite text editor and type this

p.
 Hello World

and save it as hello.jade.

Then from the command line navigate to the directory where you have saved hello.jade and then run jade hello.jade

This will create a new file as hello.html and if you open that in a text editor then it will give :-

<p>Hello World</p>

Be careful not to use spaces and tabs both at the same time :-

Similarly :

this :-

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) {
         bar(1 + 5)
      }
  body
    h1 Jade - node template engine
    #container.col
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!
      p.
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.
      p.Hello Hello World

will get converted to

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Jade</title>
		<script type="text/javascript">
			if (foo) {
				bar(1 + 5)
			}
		</script>
	</head>
	<body>
		<h1>Jade - node template engine</h1>
		<div id="container" class="col">
			<p>You are amazing</p>
			<p>
				Jade is a terse and simple
				templating language with a
				strong focus on performance
				and powerful features.
			</p>
			<p class="Hello">Hello World</p>
		</div>
	</body>
</html>

Using jade with express

To understand how to use jade we will have to install node-js and its popular framework express-js.

npm install -g express

Express is bundled with an executable, aptly named express. If you install express globally with npm you’ll have

it available from anywhere on your machine.This tool provides a simple way to get an application skeleton going, but has limited scope, for example it supports only a few template engines, whereas Express itself supports virtually any template engine built for node.

Usage: express [options]

Options:

  -h, --help          output usage information
  -V, --version       output the version number
  -s, --sessions      add session support
  -e, --ejs           add ejs engine support (defaults to jade)
  -J, --jshtml        add jshtml engine support (defaults to jade)
  -H, --hogan         add hogan.js engine support
  -c, --css   add stylesheet  support (less|stylus) (defaults to plain css)
  -f, --force         force on non-empty directory

Then run

express jadedemo

This will create all the essential files for a node-js application like app.js and package.json.

After that ,

cd jadedemo && npm install

This is will install all the dependencies required for the application.

Sources and important Links

  1. Jade Official

    [snap url="http://jade-lang.com/" alt="jade official"]

  2. Jade Github

    [snap url="https://github.com/visionmedia/jade" alt="jade github"]

  3. Interactive Tutorial :

    [snap url="http://naltatis.github.io/jade-syntax-docs/" alt="jade github"]