In this session,we will learn how to use template engines,how to convert HTML files to pug ,working with handlebars,working with EJS.And finally in MVC we will learn about Adding the controllers and how can we fetch or store the data using model.

1. Presented By: Aanchal Agarwal and Anirudh Singh Chauhan
Working with Dynamic Content
and Adding Templating
Engines, MVC

2. Lack of etiquette and manners is a huge turn off.
Session Etiquettes
Punctuality
Respect Knolx session
timings, you are requested not
to join sessions after a 5
minutes threshold post the
session start time.
Feedback
Make sure to submit a
constructive feedback for all
sessions as it is very helpful
for the presenter.
Silent Mode
Keep your mobile devices in
silent mode, feel free to move
out of session in case you need
to attend an urgent call.
Avoid Disturbance
Avoid unwanted chit chat
during the session.

3. Agenda
Overview
01
02
03
04
05
Using Dynamic content with Templating Engines
MVC(Model View Controller)
Templating Engines
Installation

4. Overview

5. MVC(Model View Controller)
Separation of Concern
Model
Connecting your model and
views
Controller
View
Represent the data in your
code.
What the user sees
Contains “in-between” logic
Work with your Data
{eg:-save,fetch}
Decoupled from your
applications code.

6. MVC Structure

7. Templating Engines
Template engine helps us to create an HTML template with
minimal code. Also, it can inject data into HTML template at
client side and produce the final HTML.

8. ● Client-side browser loads HTML template, JSON/XML data
and template engine library from the server.
● Template engine produces the final HTML using template and
data in client's browser. However, some HTML templates
process data and generate final HTML page at server side also.
How it Works?

9. Available Templating Engines
● The most popular and free templating engines are EJS, handlebars ,
pug.
● These are the templating engines which have different set of syntax
and different set of features,which is used to create these templating
engines.
Some list of engines are:-
● Jade
● Vash
● EJS
● Mustache
● Dust.js
● Nunjucks
● Handlebars
● atpl

10. Installation of Templating Engines
We will be using some popular and free templating engines i.e. pug,
handlebars, EJS
pug: npm install -- save pug
handlebars: npm install -- save express-handlebars
EJS: npm install -- save ejs

11. Basics about the Templating Engines
EJS pug(Jade) handlebars
p #{name} <p>{{name}}</p>
<p><%= name %></p>
Use normal HTML and
custom template
language.
Use normal HTML and
plain javascript in your
templates
Use minimal HTML and
custom template
language

12. pug - Templating Engine
● Pug is available via npm:
$ npm install --save pug
● Pug fully integrates with Express, a popular Node.js web
framework, as a supported view engine.
1. Install Pug into your project: npm install pug -- save pug
2. Set up your view engine: app.set(‘view engine’, ‘pug’)
3. Create a .pug file

13. Handlebars- Templating Engine
Installation CLI command
● npm install -- save express-handlebars
● Handlebars is a simple templating language.
● It uses a template and an input object to generate HTML or other
text formats. Handlebars templates look like regular text with
embedded Handlebars expressions.

14. EJS-Templating Engine
Installation CLI command
npm install -- save ejs
● EJS or Embedded Javascript Templating is a templating engine
used by Node.js.
● Template engine helps to create an HTML template with minimal
code. Also, it can inject data into HTML template at the client side
and produce the final HTML.
● EJS is a simple templating language which is used to generate
HTML markup with plain JavaScript. It also helps to embed
JavaScript to HTML pages.

15. DEMO

16. ● https://nodejs.org/en/docs
● https://ejs.co/#docs
● https://www.tutorialsteacher.com/nodejs/template-engines-for-nodejs
● https://handlebarsjs.com/installation/#npm-or-yarn-recommended
● https://pugjs.org/api/getting-started.html
References

17. Thank You !
Get in touch with us:
Lorem Studio, Lord Building
D4456, LA, USA