How To Using Razor Template For Nodejs

Vash Template Engine

In this section, yous volition learn about Vash template engine and how to use information technology in Node.js using Express.js.

Vash is a template view engine that uses Razor Syntax. And so, this template engine will wait familiar to people who accept experience in ASP.Net MVC.

Install Vash using NPM equally below.

npm install vash --save

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

Commencement of all, create index.vash file under views folder and write the post-obit HTML content.

                          <!              DOCTYPE              html              >              <              html              >              <              head              >              <              title              >              @model.title</championship>              </              caput              >              <              body              >              <              p              >              @model.content</p>              </              trunk              >              </              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 in a higher place template expects an object with two properties: title and content.

At present, create server.js and write following express.js to render the in a higher place vash template.

                          var              limited = require('limited');              var              app = limited();  app.fix("view engine","vash")  app.get('/',              role              (req, res) {      res.render('alphabetize', { title:              'Vash Template Demo',                            content:'This is dummy paragraph.'});  });              var              server = app.listen(5000,              function              () {     console.log('Node server is running..'); });

Every bit 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 indicate your browser to http://localhost:5000 and you will get the following upshot.

Layout Folio

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

The vash engine allows y'all to create a layout page. The following is a unproblematic layout.vash page.

                          <!              DOCTYPE              html              >              <              html              >              <              head              >              <              title              >              @model.title</title>              </              head              >              <              torso              >              @html.cake('trunk')              </              body              >              </              html              >

In the above layout page, @html.block('body') defines the block called "torso". So, any vash template can now be injected within this trunk block. For example, the following index.vash template injects some HTML into body cake of the in a higher place layout.vash.

                          @html.extend('layout',part(model){              @html.cake('trunk',function(model){              <              h1              >              @model.championship</h1>              <              p              >              @model.content</p>      });  });

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

                          var              express = crave('express');              var              app = express();  app.set up("view engine","vash")  app.get('/',              function              (req, res) {                              res.render('index', { championship:                '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 go the following result.

Visit Github to acquire vash template syntax in detail.

Want to cheque how much you know Node.js?