<%= title %><\/title><br \/>\n<\/head><br \/>\n<\/html><br \/>\n<\/code><br \/>\nIn this way you can pass any important data from Server and access here. This is one of the coolest feature of EJS.<\/p>\n<h2>EJS partials: Dividing code into multiple parts<\/h2>\n<p>You can divide the EJS code into multiple files just like we do in PHP or Rails. You can include those partials files using <code><% include FILENAME %><\/code><br \/>\n<code lang=\"html\"><br \/>\n<html><br \/>\n <head><br \/>\n <% include('header.ejs') %><br \/>\n <\/head><br \/>\n <body><br \/>\n <% include('body.ejs') %><br \/>\n <\/body><br \/>\n<\/html><br \/>\n<\/code><\/p>\n<p>Here is header.ejs partial code.<br \/>\n<code lang=\"html\"><br \/>\n<title><br \/>\nHello World<br \/>\n<\/title><br \/>\n<script src=\"jquery.js\"><\/script><br \/>\n<script>\n...Your JavaScript code goes here.\n<\/script><br \/>\n<\/code><\/p>\n<p>Here is body.ejs partial code.<br \/>\n<code lang=\"html\"><\/p>\n<div id=\"login\">\n <input type=\"TEXT\" name=\"user_name\" value=\"\"><br \/>\n <input type=\"password\" name=\"password\" value=\"\"><br \/>\n <input type=\"button\" name=\"login\" value=\"Login\">\n <\/div>\n<p><\/code><\/p>\n<h2>EJS filters:<\/h2>\n<p>Ejs provides <strong>“filters”<\/strong> which helps to modify data without writing JavaScript. By using filter, you can perform various operations on data. Operations such as:<\/p>\n<ul>\n<li>Capitalise letter.<\/li>\n<li>Downcase letter.<\/li>\n<li>sort.<\/li>\n<li>size.<\/li>\n<li>length.<\/li>\n<\/ul>\n<p>You can view complete list of filters <a href=\"https:\/\/github.com\/tj\/ejs\" title=\"EJS filters.\" target=\"_blank\" rel=\"noopener\">here.<\/a><\/p>\n<p>In next tutorial i am going to explain how to handle router of Express web applications.<\/p>\n<div id=\"series\" style=\"background-color: #e74c3c;color: white;padding-left: 45px;padding-top: 10px;padding-bottom:38px;\">\n<h3 style=\"color:white;\">This post is part of Express Complete tutorial Series.<\/h3>\n<p><a href=\"https:\/\/codeforgeek.com\/express-complete-tutorial-part-1\/\" style=\"color:white;\">Part 1: Configuration of Express.<\/a><br \/>\n<a href=\"https:\/\/codeforgeek.com\/express-complete-tutorial-part-2\/\" style=\"color:white;\">Part 2: Templating Using EJS.<\/a><br \/>\n<a href=\"https:\/\/codeforgeek.com\/express-complete-tutorial-part-3\/\" style=\"color:white;\">Part 3: Handling routes.<\/a><br \/>\n<a href=\"https:\/\/codeforgeek.com\/express-complete-tutorial-part-4\/\" style=\"color:white;\">Part 4: Handling Session.<\/a><br \/>\n<a href=\"https:\/\/codeforgeek.com\/express-complete-tutorial-part-5\/\" style=\"color:white;\">Part 5: Finalising App.<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Front end is product for the user. Does’nt matter how complex and well designed back-end you have, if your front-end lacks the user expectations then at some point it’s gonna fail. In previous tutorial we have configured the express. In this tutorial i am going to explain how to use EJS to template your advanced […]<\/p>\n","protected":false},"author":1,"featured_media":699,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_surecart_dashboard_logo_width":"180px","_surecart_dashboard_show_logo":true,"_surecart_dashboard_navigation_orders":true,"_surecart_dashboard_navigation_invoices":true,"_surecart_dashboard_navigation_subscriptions":true,"_surecart_dashboard_navigation_downloads":true,"_surecart_dashboard_navigation_billing":true,"_surecart_dashboard_navigation_account":true,"_uag_custom_page_level_css":"","footnotes":""},"categories":[22,14,18],"tags":[],"class_list":["post-690","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-express","category-nodejs","category-tutorial"],"blocksy_meta":[],"uagb_featured_image_src":{"full":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner21.png",822,400,false],"thumbnail":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner21-150x150.png",150,150,true],"medium":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner21-300x146.png",300,146,true],"medium_large":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner21-768x374.png",768,374,true],"large":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner21.png",822,400,false],"1536x1536":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner21.png",822,400,false],"2048x2048":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner21.png",822,400,false]},"uagb_author_info":{"display_name":"Shahid","author_link":"https:\/\/codeforgeek.com\/author\/shahid\/"},"uagb_comment_info":0,"uagb_excerpt":"Front end is product for the user. Does’nt matter how complex and well designed back-end you have, if your front-end lacks the user expectations then at some point it’s gonna fail. In previous tutorial we have configured the express. In this tutorial i am going to explain how to use EJS to template your advanced…","_links":{"self":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts\/690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/comments?post=690"}],"version-history":[{"count":0,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts\/690\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/media\/699"}],"wp:attachment":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/media?parent=690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/categories?post=690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/tags?post=690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":690,"date":"2014-10-26T15:18:43","date_gmt":"2014-10-26T09:48:43","guid":{"rendered":"http:\/\/codeforgeek.com\/?p=690"},"modified":"2021-06-20T06:05:18","modified_gmt":"2021-06-20T00:35:18","slug":"express-complete-tutorial-part-2","status":"publish","type":"post","link":"https:\/\/codeforgeek.com\/express-complete-tutorial-part-2\/","title":{"rendered":"Express Complete Tutorial : Part 2"},"content":{"rendered":"

Front end is product for the user. Does’nt matter how complex and well designed back-end you have, if your front-end lacks the user expectations then at some point it’s gonna fail. In previous tutorial we have configured the express<\/a>.<\/p>\n

In this tutorial i am going to explain how to use EJS to template your advanced web applications. For those who are confuse with HTML and EJS. EJS parse complete HTML without any issue, with that it also provide some cool features which i am gonna explain below.<\/p>\n

Beauty of EJS is that you can use one template to perform multiple operations. For.eg if i create on EJS file and set the title, head, div ID etc coming from server. I can set it multiple times depending upon the routes call.<\/p>\n

Passing data to View:<\/h2>\n
Look on below code. This code is just for example. It’s not working code. Let’s say from Express i have pass this data.
\n`\napp.get('\/',function(req,res){<\/p>\n`
`res.render('index',{title:\"Home page\"});<\/p>\n`
}); \n<\/code> \nIn index.ejs i can simply do this to access title<\/strong> variable. \n \n \n \n<%= title %><\/title><br \/>\n<\/head><br \/>\n<\/html><br \/>\n<\/code><br \/>\nIn this way you can pass any important data from Server and access here. This is one of the coolest feature of EJS.<\/p>\n<h2>EJS partials: Dividing code into multiple parts<\/h2>\n<p>You can divide the EJS code into multiple files just like we do in PHP or Rails. You can include those partials files using <code><% include FILENAME %><\/code><br \/>\n<code lang=\"html\"><br \/>\n<html><br \/>\n <head><br \/>\n <% include('header.ejs') %><br \/>\n <\/head><br \/>\n <body><br \/>\n <% include('body.ejs') %><br \/>\n <\/body><br \/>\n<\/html><br \/>\n<\/code><\/p>\n<p>Here is header.ejs partial code.<br \/>\n<code lang=\"html\"><br \/>\n<title><br \/>\nHello World<br \/>\n<\/title><br \/>\n<script src=\"jquery.js\"><\/script><br \/>\n<script>\n...Your JavaScript code goes here.\n<\/script><br \/>\n<\/code><\/p>\n<p>Here is body.ejs partial code.<br \/>\n<code lang=\"html\"><\/p>\n<div id=\"login\">\n <input type=\"TEXT\" name=\"user_name\" value=\"\"><br \/>\n <input type=\"password\" name=\"password\" value=\"\"><br \/>\n <input type=\"button\" name=\"login\" value=\"Login\">\n <\/div>\n<p><\/code><\/p>\n<h2>EJS filters:<\/h2>\n<p>Ejs provides <strong>“filters”<\/strong> which helps to modify data without writing JavaScript. By using filter, you can perform various operations on data. Operations such as:<\/p>\n<ul>\n<li>Capitalise letter.<\/li>\n<li>Downcase letter.<\/li>\n<li>sort.<\/li>\n<li>size.<\/li>\n<li>length.<\/li>\n<\/ul>\n<p>You can view complete list of filters <a href=\"https:\/\/github.com\/tj\/ejs\" title=\"EJS filters.\" target=\"_blank\" rel=\"noopener\">here.<\/a><\/p>\n<p>In next tutorial i am going to explain how to handle router of Express web applications.<\/p>\n<div id=\"series\" style=\"background-color: #e74c3c;color: white;padding-left: 45px;padding-top: 10px;padding-bottom:38px;\">\n<h3 style=\"color:white;\">This post is part of Express Complete tutorial Series.<\/h3>\n<p><a href=\"https:\/\/codeforgeek.com\/express-complete-tutorial-part-1\/\" style=\"color:white;\">Part 1: Configuration of Express.<\/a><br \/>\n<a href=\"https:\/\/codeforgeek.com\/express-complete-tutorial-part-2\/\" style=\"color:white;\">Part 2: Templating Using EJS.<\/a><br \/>\n<a href=\"https:\/\/codeforgeek.com\/express-complete-tutorial-part-3\/\" style=\"color:white;\">Part 3: Handling routes.<\/a><br \/>\n<a href=\"https:\/\/codeforgeek.com\/express-complete-tutorial-part-4\/\" style=\"color:white;\">Part 4: Handling Session.<\/a><br \/>\n<a href=\"https:\/\/codeforgeek.com\/express-complete-tutorial-part-5\/\" style=\"color:white;\">Part 5: Finalising App.<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Front end is product for the user. Does’nt matter how complex and well designed back-end you have, if your front-end lacks the user expectations then at some point it’s gonna fail. In previous tutorial we have configured the express. In this tutorial i am going to explain how to use EJS to template your advanced […]<\/p>\n","protected":false},"author":1,"featured_media":699,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_surecart_dashboard_logo_width":"180px","_surecart_dashboard_show_logo":true,"_surecart_dashboard_navigation_orders":true,"_surecart_dashboard_navigation_invoices":true,"_surecart_dashboard_navigation_subscriptions":true,"_surecart_dashboard_navigation_downloads":true,"_surecart_dashboard_navigation_billing":true,"_surecart_dashboard_navigation_account":true,"_uag_custom_page_level_css":"","footnotes":""},"categories":[22,14,18],"tags":[],"class_list":["post-690","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-express","category-nodejs","category-tutorial"],"blocksy_meta":[],"uagb_featured_image_src":{"full":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner21.png",822,400,false],"thumbnail":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner21-150x150.png",150,150,true],"medium":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner21-300x146.png",300,146,true],"medium_large":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner21-768x374.png",768,374,true],"large":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner21.png",822,400,false],"1536x1536":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner21.png",822,400,false],"2048x2048":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner21.png",822,400,false]},"uagb_author_info":{"display_name":"Shahid","author_link":"https:\/\/codeforgeek.com\/author\/shahid\/"},"uagb_comment_info":0,"uagb_excerpt":"Front end is product for the user. Does’nt matter how complex and well designed back-end you have, if your front-end lacks the user expectations then at some point it’s gonna fail. In previous tutorial we have configured the express. In this tutorial i am going to explain how to use EJS to template your advanced…","_links":{"self":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts\/690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/comments?post=690"}],"version-history":[{"count":0,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts\/690\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/media\/699"}],"wp:attachment":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/media?parent=690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/categories?post=690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/tags?post=690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}