Tutorialsteacher

Follow Us

Articles
  • C#
  • C# OOP
  • ASP.NET Core
  • ASP.NET MVC
  • LINQ
  • Inversion of Control (IoC)
  • Web API
  • JavaScript
  • TypeScript
  • jQuery
  • Angular 11
  • Node.js
  • D3.js
  • Sass
  • Python
  • Go lang
  • HTTPS (SSL)
  • Regex
  • SQL
  • SQL Server
  • PostgreSQL
  • MongoDB
  • Node.JS - Get Started
  • What is Node.js
  • Node.js Process Model
  • Install Node.js
  • Node.js Console/REPL
  • Node.js Basics
  • Node.js Modules
  • Local Modules
  • Export Module
  • Node Package Manager
  • Node.js Web Server
  • Node.js File System
  • Debugging Node.js
  • Node Inspector
  • Node.js EventEmitter
  • Frameworks for Node.js
  • Express.js
  • Express.js Web App
  • Serving Static Resources
  • Node.js Data Access
  • Access SQL Server
  • Access MongoDB
  • Template Engines for Node.js
  • Jade Template Engine
  • Vash Template Engine
  • GruntJS
Entity Framework Extensions - Boost EF Core 9
  Bulk Insert
  Bulk Delete
  Bulk Update
  Bulk Merge

Jade Template Engine

In this section, you will learn how to use Jade template engine in Node.js application using Express.js.

Jade is a template engine for Node.js. Jade syntax is easy to learn. It uses whitespace and indentation as a part of the syntax.

Install jade into your project using NPM as below.

npm install jade

Jade template must be written inside .jade file. And all .jade files must be put inside views folder in the root folder of Node.js application.

By default Express.js searches all the views in the views folder under the root folder, which can be set to another folder using views property in express e.g. app.set('views','MyViews').

The following is a simple jade template.

Example: Simple Jade Template
doctype html
html
    head
        title Jade Page
    body
        h1 This page is produced by Jade engine
        p some paragraph here..

The above example will produce following html.

Example: HTML Generated from Above Example
<!DOCTYPE html>
<html>
<head>
<title>Jade Page</title>
<meta property="og:title" content="Jade Page" />
</head>
<body>
    <h1>This page is produced by Jade engine</h1>
    <p>some paragraph here..</p>
</body>
</html>
Note:Please be careful while giving spaces and indentation in Jade. A small mistake can change the output.

Visit jade-lang.com to learn about jade syntax rules in detail.

Let's see how to use jade engine with express.js and render HTML.

Jade Engine with Express.js

Express.js can be used with any template engine. Here, we will use different Jade templates to create HTML pages dynamically.

In order to use Jade with Express.js, create sample.jade file inside views folder and write following Jade template in it.

Sample.jade
doctype html
html
    head
        title Jade Page
    body
        h1 This page is produced by Jade engine
        p some paragraph here..

Now, write the following code to render above Jade template using Express.js.

server.js
var express = require('express');
var app = express();

//set view engine
app.set("view engine","jade")

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

    res.render('sample');

});

var server = app.listen(5000, function () {
    console.log('Node server is running..');
});

As you can see in the above example, first we import express module and then set the view engine using app.set() method. The set() method sets the "view engine", which is one of the application setting property in Express.js. In the HTTP Get request for home page, it renders sample.jade from the views folder using res.render() method.

If you don't set view engine in Express.js then the extension of template must be specified explicitly to res.render() method e.g. res.render('view.jade', data);

Let's look at a complex example. We learned to access SQL server database in the previous section. So, let's fetch all the students' data from SQL Server and render it using jade template.

First of all, create StudentList.jade file inside views folder and write the following template in it.

StudentList.jade
doctype html
html
head
title=title
body
    h1 Student List using Jade engine

    ul
        each item in studentList
            li=item.StudentName

In the above jade template, it uses each loop to generate all the <li> dynamically. Now, render above template in home page request as shown below.

server.js
var express = require('express');
var app = express();

app.set("view engine","jade")

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


    var sql = require("mssql");

    var config = {
        user: 'sa',
        password: 'sjkaria',
        server: 'localhost',
        database: 'SchoolDB' 
    };

    sql.connect(config, function (err) {
        
        if (err) console.log(err);

        var request = new sql.Request();

        request.query('select * from Student', function (err, recordset) {
            
            if (err) 
                console.log(err)
            else
                res.render('StudentList', { studentList: recordset });
            
        });
    });
});

In the above example, we pass recordset array as an object to jade template. Jade engine will process HTML template and specified array and render the result.

Run the above example using node server.js command and point your browser to http://localhost:5000 and you will get the following result.

Example

Visit Jade Language Reference to learn more about Jade syntax.

TUTORIALSTEACHER.COM

TutorialsTeacher.com is your authoritative source for comprehensive technologies tutorials, tailored to guide you through mastering various web and other technologies through a step-by-step approach.

Our content helps you to learn technologies easily and quickly for learners of all levels. By accessing this platform, you acknowledge that you have reviewed and consented to abide by our Terms of Use and Privacy Policy, designed to safeguard your experience and privacy rights.

[email protected]

ABOUT USTERMS OF USEPRIVACY POLICY
copywrite-symbol

2024 TutorialsTeacher.com. (v 1.2) All Rights Reserved.