Jade Template Engine - TutorialsTeacher

In this section, you will learn how to use Jade template engine in Node.js application using Express.js. Jade is a template engine for Node.js. C# ASP.NETCore MVC IoC TypeScript Angular Python SQLServer MongoDB More ✕ .NETTutorials C# ASP.NETCore ASP.NETMVC IoC webapi LINQ ClientSide JavaScript jQuery Node.js D3.js TypeScript Angular11 AngularJS1 Sass ServerSide https Python SQL SQLServer PostgreSQL MongoDB SkillTests ASP.NETCore ASP.NETMVC LINQ C# webapi IoC TypeScript AngularJS Node.js jQuery JavaScript Articles Tests Node.jsTutorials Node.JS-GetStarted WhatisNode.js Node.jsProcessModel InstallNode.js Node.jsConsole/REPL Node.jsBasics Node.jsModules LocalModules ExportModule NodePackageManager Node.jsWebServer Node.jsFileSystem DebuggingNode.js NodeInspector Node.jsEventEmitter FrameworksforNode.js Express.js Express.jsWebApp ServingStaticResources Node.jsDataAccess AccessSQLServer AccessMongoDB TemplateEngine Jade Vash GruntJS UsefulResources Previous Next JadeTemplateEngine Inthissection,youwilllearnhowtouseJadetemplateengineinNode.jsapplicationusingExpress.js. JadeisatemplateengineforNode.js.Jadesyntaxiseasytolearn.Ituseswhitespaceandindentationasapartofthesyntax. InstalljadeintoyourprojectusingNPMasbelow. npminstalljade Jadetemplatemustbewritteninside.jadefile.Andall.jadefilesmustbeputinsideviewsfolderintherootfolderofNode.jsapplication. Note: BydefaultExpress.jssearchesalltheviewsintheviewsfolderundertherootfolder,whichcanbesettoanotherfolderusingviewspropertyinexpresse.g.app.set('views','MyViews'). Thefollowingisasimplejadetemplate. Example:SimpleJadeTemplateCopy doctypehtml html head titleJadePage body h1ThispageisproducedbyJadeengine psomeparagraphhere.. Theaboveexamplewillproducefollowinghtml. Example:HTMLGeneratedfromAboveExampleCopy

ThispageisproducedbyJadeengine

someparagraphhere..

Note: PleasebecarefulwhilegivingspacesandindentationinJade.Asmallmistakecanchangetheoutput. Visitjade-lang.comtolearnaboutjadesyntaxrulesindetail. Let'sseehowtousejadeenginewithexpress.jsandrenderHTML. JadeEnginewithExpress.js Express.jscanbeusedwithanytemplateengine.Here,wewillusedifferentJadetemplatestocreateHTMLpagesdynamically. InordertouseJadewithExpress.js,createsample.jadefileinsideviewsfolderandwritefollowingJadetemplateinit. Sample.jadeCopy doctypehtml html head titleJadePage body h1ThispageisproducedbyJadeengine psomeparagraphhere.. Now,writethefollowingcodetorenderaboveJadetemplateusingExpress.js. server.jsCopy varexpress=require('express'); varapp=express(); //setviewengine app.set("viewengine","jade") app.get('/',function(req,res){ res.render('sample'); }); varserver=app.listen(5000,function(){ console.log('Nodeserverisrunning..'); }); Asyoucanseeintheaboveexample,firstweimportexpressmoduleandthensettheviewengineusingapp.set()method. Theset()methodsetsthe"viewengine",whichisoneoftheapplicationsettingpropertyinExpress.js. IntheHTTPGetrequestforhomepage,itrenderssample.jadefromtheviewsfolderusingres.render()method. Note: Ifyoudon'tsetviewengineinExpress.jsthentheextensionoftemplatemustbespecifiedexplicitlytores.render()methode.g.res.render('view.jade',data); Let'slookatacomplexexample.WelearnedtoaccessSQLserverdatabaseintheprevioussection.So,let'sfetchallthestudents'datafromSQLServerandrenderitusingjadetemplate. Firstofall,createStudentList.jadefileinsideviewsfolderandwritethefollowingtemplateinit. StudentList.jadeCopy doctypehtml html head title=title body h1StudentListusingJadeengine ul eachiteminstudentList li=item.StudentName Intheabovejadetemplate,ituseseachlooptogenerateallthe

dynamically.Now,renderabovetemplateinhomepagerequestasshownbelow. server.jsCopy varexpress=require('express'); varapp=express(); app.set("viewengine","jade") app.get('/',function(req,res){ varsql=require("mssql"); varconfig={ user:'sa', password:'sjkaria', server:'localhost', database:'SchoolDB' }; sql.connect(config,function(err){ if(err)console.log(err); varrequest=newsql.Request(); request.query('select*fromStudent',function(err,recordset){ if(err) console.log(err) else res.render('StudentList',{studentList:recordset}); }); }); }); Intheaboveexample,wepassrecordsetarrayasanobjecttojadetemplate.JadeenginewillprocessHTMLtemplateandspecifiedarrayandrendertheresult. Runtheaboveexampleusingnodeserver.jscommandandpointyourbrowsertohttp://localhost:5000andyouwillgetthefollowingresult. Example VisitJadeLanguageReferencetolearnmoreaboutJadesyntax. Share Tweet Share Whatsapp WanttocheckhowmuchyouknowNode.js? StartNode.jsTest Previous Next