The easiest way to understand the Node js View Engine is like the Blade in Laravel. So the most basic definition, the view engine is the tool that helps us write HTML code in a shorter and simpler way than it normally can and reuse. In addition, it can import data from the server side and render the final HTML. Some common package view engines in the project NodeJS / Express can be listed as follows:

What is the view of setting up the Node js View Engine?

EJS

Pug (Formerly Jade)

Handlebars

Haml.js

Nunjucks

…

Today I will try some of the templates above to see which one is easier to use. Let’s start…

EJS

First to create a demo for this article we need to create a project base with ExpressJS. To create the fastest I use express-generator.

sudo npm install express - generator - g

express - - view = ejs Demo_EJS



When running the command to create the project with the Node js View Engine, ejs we have the project with the following directory structure:

So with the above command, we have created a Project Express using available EJS view engine. This view engine is setup in the app.js file:

From development to deployment part 1: Backend, NodeJS, API

/ / . . .

/ / view engine setup

app . set ( 'views' , path . join ( __dirname, 'views' ) ) ;

app . set ( 'view engine' , 'ejs' ) ;



/ / . . .



Next to illustrate how to use it, I will perform the basic layout of the site and render the data from the server. First we try to render the data from the server.

Edit routes/index.js file routes/index.js:

var express = require ( 'express' ) ;

var router = express . Router ( ) ;



/ * GET home page . * /

router . get ( '/' , function ( req, res, next ) {



let list = & # 9 1 ;

{ name : 'PHP' } ,

{ name : 'Ruby' } ,

{ name : 'Java' } ,

{ name : 'Python' } ,

{ name : 'dotNet' } ,

{ name : 'C#' } ,

{ name : 'Swift' } ,

{ name : 'Pascal' } ,

]

res . render ( 'index' , { title : 'Demo Ejs' , list : list } ) ;

} ) ;



module . exports = router;



File views/index.ejs:

< ! DOCTYPE html >

< html >

< head >

< title > < % = title % > < / title >

< link rel = 'stylesheet' href = '/stylesheets/style.css' / >

< / head >

< body >

< header >

< h3 > This is header < / h3 >

< / header >

< main >

< h1 > < % = title % > < / h1 >

List of programming languages

< ul >

< % list . forEach ( function ( item ) { % >

< li > < % = item . name % > < / li >

< % } ) ; % >

< / ul >

< / main >

< footer >

< h3 > This is footer < / h3 >

< / footer >

< / body >

< / html >



So we have implemented data transfer from server to view and rendered. In addition we can split the header, footer by adding header.ejs files, footer.ejs then include as follows:

< ! DOCTYPE html >

< html >

< head >

< title > < % = title % > < / title >

< link rel = 'stylesheet' href = '/stylesheets/style.css' / >

< / head >

< body >

< header >

< % include header % >

< / header >

< main >

< h1 > < % = title % > < / h1 >

List of programming languages

< ul >

< % list . forEach ( function ( item ) { % >

< li > < % = item . name % > < / li >

< % } ) ; % >

< / ul >

< / main >

< footer >

< % include footer % >

< / footer >

< / body >

< / html >



Pug – Node js View Engine

Pug – formerly known as Jade, is also a popular Node js View Engine project. To use it make the view engine set up as follows:

/ / view engine setup

app . set ( 'views' , path . join ( __dirname, 'views' ) ) ;

app . set ( 'view engine' , 'pug' ) ;



With the above example, we create pug files with the following content:

/ / file layout . pug

doctype html

html

head

title = title

link ( rel = 'stylesheet' , href = '/stylesheets/style.css' )

body

include header

block content

include footer



/ / file index . pug

extends layout



block content

h1 = title

| List of programming languages

ul

each item in list

li = item . name



So with the same content we see how Pug’s writing is clear, concise and easy to understand. Pug works in much the same way as Python programming language ie using indent or white space. We don’t need to care if the card is open / closed because Pug will replace you. Create API server on Node.js with Express and MongoDB (part 2)

Hbs (Handlebars.js)

To use this template we set the engine view to hbs. At the same time we have to register the blocks (in handlebarjs called partial) as follows:

var hbs = require ( 'hbs' ) ;

hbs . registerPartials ( __dirname + '/views/partials' ) ;

app . set ( 'views' , path . join ( __dirname, 'views' ) ) ;

app . set ( 'view engine' , 'hbs' ) ;



With the above problem we will also create hbs files with the following content:

/ / file layout . hbs

< ! DOCTYPE html >

< html >

< head >

< title > { { title } } < / title >

< link rel = 'stylesheet' href = '/stylesheets/style.css' / >

< / head >

< body >

{ { > header } }

{ { { body } } }

{ { > footer } }

< / body >

< / html > < code class = "language-javascript" >



/ / file / views / partials / header . hbs

< h3 > This is header < / h3 >



/ / file / views / partials / footer . hbs

< h3 > This is footer < / h3 >



/ / file index . hbs

< h1 > { { title } } < / h1 >

List of programming languages

< ul >

{ { #each list } }

< li > { { name } } < / li >

{ { / each } }

< / ul >



Conclude

So I have tried to use a few popular view engines in Nodejs project. If you choose to develop a product, you choose Pug because it is very simple and easy to understand.

Source: techtalk.vn

Share This:



































Like this: Like Loading...