This post will give you a very basic information about usage of Jade with Express framework for node.js. After giving a brief introduction about Jade and what it offers we will design a simple page using some of the cool features of Jade.
What is Jade
Jade is a high performance template engine for node.js. It offers a wide variety of features to us. --> Jade
What it offers
The default template in ExpressJs is Jade. Jade offers a great alternative to raw Html. The Jade code which we write will inturn be converted to Html by the engine. Some of the cool features in offer include ,
What is Jade
Jade is a high performance template engine for node.js. It offers a wide variety of features to us. --> Jade
What it offers
The default template in ExpressJs is Jade. Jade offers a great alternative to raw Html. The Jade code which we write will inturn be converted to Html by the engine. Some of the cool features in offer include ,
- Html tags can be avoided.
<html>
<head>
<title>
Jade Introduction
</title>
</head>
<body>
</body>
</html>
Can be done using,
html
head
title Jade Introduction
body
How Cool is that !!
- Helps us add dynamic content to a page. Objects can be passed to a Jade page which can then be iterated through to display the content. Among the features are Switch Case, Each (for loop) and mixins. Jade Github Page gives you the whole bunch of features that are available in Jade. We will implement some of them.
A Jade Page using Switch and Each
- Go to some folder of your liking and type out the following to create a base version of the app.
express --session --css stylus jadeintro
This creates our app with sessions enabled, using stylus for css and using Jade. And ofcourse you could see our app folder as jadeintro.
- The next step would be to install the dependencies. Get into the folder jadeintro and type out npm install.
cd jadeintro
npm install
- You could see that in views/ directory, there are two Jade files. One would be layout.jade and other would be index.jade. Layout contains the main layout of the page that index is going to use.
- You could see already that a value is passed to the Jade page that is being displayed as #{title} in index.jade
- In app.js by default / is directed to routes.index. That is index function exported in index.js file.
app.get('/', routes.index);
The line says to call routes.index function when a get request for the root page is received. In index exported at index.js file we see just a single line ,
res.render('index', { title: 'Express' });
res.render is calling index , which would call index.jade and it is passed an object title. This title is going to be used in index.jade page.
- Lets pass something other than the simple title object that is being passed. Lets pass an object which contains a list which we will display in our page.
exports.index = function(req, res){
var obj1 = {
key : 'Point 1',
value : ' Jade is Awesome '
};
var obj2 = {
key : 'Point 2 ',
value :' Jade is cool '
};
var arr = [] ;
arr.push(obj1);
arr.push(obj2);
res.render('index', {title: 'Express', data: arr});
};
- Lets now modify the index.jade file to print the stuff we just passed to it.
extends layout
block content
h1= title
p Welcome to #{title}
ul
each item in data
li #{item.key} ------------- #{item.value}
Easily done. Output looks something like this in my chrome browser.
Well that ends out Jade introduction. Just a quick reminder on how Jade works. Its based on indentation. You can use either spaces or tabs and not both. Mostly we use tabs and its a bit easier that way. But by default it would be using spaces. Change accordingly. Have fun trying out Jade now!!
No comments:
Post a Comment