An Interest In:
Web News this Week
- March 3, 2024
- March 2, 2024
- March 1, 2024
- February 29, 2024
- February 28, 2024
- February 27, 2024
- February 26, 2024
November 11, 2022 06:32 am GMT
Original Link: https://dev.to/akshdesai1/handlebars-for-beginners-150p
Handlebars for Beginners
What is Handlebars?
Handlebars is one of the most used templating engines for web applications competing with other well-known ones like Mustache js, Pug, EJS and others. It's especially used on the server side along with the express js framework.
Official Documentation:- Handlebars
Folder Structure Image:-
Package.json Structure:-
App.js Code:-
const express = require("express");const handlebars = require('express-handlebars');const path = require("path");const helpers = require("handlebars-helpers")();const app = express();const PORT = 8000;const hbs = handlebars.create({ extname: "hbs", defaultLayout: "main", layoutsDir: path.join(__dirname, 'views/layout'), helpers: helpers, partialsDir: path.join(__dirname, 'views/partials')});app.engine("hbs", hbs.engine);app.set('view engine', 'hbs');app.set('views', path.join(__dirname, "views"));// Custom Helper helpers.makeBold = function (aString) { return '<strong style="color:red">' + aString.toUpperCase() + '</strong>';};app.get("/", (req, res) => { res.render("home", { title: "Express", peoples: ["salman", "sharukh", "amitabh"], products: [ { name: "mobile", category: "Electronics", stock: 1000 }, { name: "Electronics", category: "Electronics", stock: 0 }, { name: "mobile", category: "Electronics", stock: 1000 } ] })})app.get("/about", (req, res) => { res.render("about", { title: "about", layout: "second" });})app.listen(PORT, () => { console.log(`Server is Listening at ${PORT} Port.`);})
main.hbs Code:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{title}}</title> </head> <body> <h1>home</h1> {{{body}}} </body></html>
second.hbs:-
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{title}}</title> </head> <body> <h1>second</h1> {{{body}}} </body></html>
productloop.hbs Code:-
<hr><h1>products - {{#each products}} <span style="color: red;"> {{@index}} </span> - {{this.name}} {{#eq this.name "mobile"}} common {{else}} not common {{/eq}} {{#if this.stock}} {{this.stock}} {{else}} (zero) {{/if}} {{/each}}</h1><hr>
home.hbs code:-
<h1>home - {{title}}</h1><h1>peoples - {{peoples}}</h1>{{add 20 30}}<h1>divide {{floor (divide 20 12)}}</h1>{{!-- {{/add}} --}}<h1>makebold {{#makeBold "aksh"}} {{/makeBold}}</h1>{{#contains peoples "salman1"}}salman is there{{else}}salman is not there{{/contains}}<h1>peoples - {{#each peoples}} {{this}} {{/each}}</h1><hr><h1>products - {{#each products}} <span style="color: red;"> {{@index}} </span> - {{this.name}} {{#eq this.name "mobile"}} common {{else}} not common {{/eq}} {{#if this.stock}} {{this.stock}} {{else}} (zero) {{/if}} {{/each}}</h1><hr>{{> productloop}}
about.hbs code:-
<h1>About - {{title}}</h1>
Output Image of Home Page:-
Output Image of About Page:-
Original Link: https://dev.to/akshdesai1/handlebars-for-beginners-150p
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To