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

Vash Template Engine

In this section, you will learn about Vash template engine and how to use it in Node.js using Express.js.

Vash is a template view engine that uses Razor Syntax. So, this template engine will look familiar to people who have experience in ASP.Net MVC.

Install Vash using NPM as below.

npm install vash --save

Now, let's see how to render simple vash template using Express.js.

First of all, create index.vash file under views folder and write the following HTML content.

Example: vash template
<!DOCTYPE html>

<html>
<head>
<title>@model.title</title>
<meta property="og:title" content="@model.title" />
</head>
<body>
    <p>@model.content</p>
</body>
</html>

In the above vash template, the model object is @model and properties are title and content. @model in razor syntax represents an object which will be supplied from the server while rendering this template. So, the above template expects an object with two properties: title and content.

Now, create server.js and write following express.js to render the above vash template.

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

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

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

    res.render('index', { title: 'Vash Template Demo', 
                          content:'This is dummy paragraph.'});

});

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

As you can see, we have specified an object with title and content properties in the res.render() method while rendering index.vash. Now, run the above application using node server.js command and point your browser to http://localhost:5000 and you will get the following result.

Vash Template Engine

Layout Page

Layout page includes static part of your application which remains the same throughtout your application e.g. header, footer etc. It provides a mechanism to add dynamic content along with the static content.

The vash engine allows you to create a layout page. The following is a simple layout.vash page.

layout.vash
<!DOCTYPE html>

<html>
<head>
<title>@model.title</title>
<meta property="og:title" content="@model.title" />
</head>
<body>
    @html.block('body')
</body>
</html>

In the above layout page, @html.block('body') defines the block called "body". So, any vash template can now be injected inside this body block. For example, the following index.vash template injects some HTML into body block of the above layout.vash.

index.vash
@html.extend('layout',function(model){

	@html.block('body',function(model){

            <h1>@model.title</h1>
            <p>@model.content</p>

    });

});

Now, render above vash layout using Express.js as shown below.

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

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

app.get('/', function (req, res) {
    
    res.render('index', { title: 'Vash Template Demo', 
                          content:'This is dummy paragraph.'});

});

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

Now, run the above application using node server.js command and point your browser to http://localhost:5000 and you will get the following result.

Vash Template Engine

Visit Github to learn vash template syntax in detail.

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.