How to NodeJS- Jade Templating Engine explained
In this tutorial, we are going to learn everything about jade templating engine. Jade separate the HTML code from dynamic content. Jade templating engine is for Node.js which compiles into basic HTML.
Jade is an elegant templating engine, primarily used for server-side templating in NodeJS. Generating HTML using preprocessor code provide more readable code and easier to maintain. It gives you a powerful new way to write markup. Let’s see some basic jade with corresponding HTML markup.
In our Node.js Express project, we already have a home page which is templated by index.jade and layout.jade. The layout.jade is extended by index.jade file.
Let’s see the most important features of the Jade templating language and rendering of corresponding HTML markup language.
The <!DOCTYPE> declaration must be the very first thing in HTML document. Using jade, doctypes are just simple shorthands on a single line. Following table shows you jade template and corresponding HTML tag
Tags and Text
There are no “closing” tags in Jade templating. Instead, Jade uses white space to determine how tags are nested. Let’s look at HTML simple tags and corresponding jade code. To add text inside the tags, simply add it after the word preceded by a space.
Jade has several ways of writing comments. using simple way, comments are like typical programming comments with double slashes. let’s see the example.
Nesting just requires new lines and a tab per nest level. Jade uses white space to determine how tags are nested. In the following example, the paragraph tags are indented, inside the div tags.
Attributes provide additional information about HTML elements. It starts and ends with parentheses. Multiple attributes are separated with commas. The following example shows you the type and placeholder attribute in an input field.
To iterate the sequences and objects you would use the “each” or “for” keyword. Unlike other programming languages, there is no need to parentheses or curly braces for iteration.
Conditionals are simple if/else statements or case statements. For conditional statements in jade, no need for parentheses or braces.
jade is a powerful template language and allows extending other templates and defining blocks. This is exactly how you can define a default layout and use it in other templates on Express app.