Successfully reported this slideshow.
Your SlideShare is downloading. ×

Working with Dynamic Content and Adding Templating engines, MVC

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 17 Ad

Working with Dynamic Content and Adding Templating engines, MVC

Download to read offline

In this session,we will learn how to use template engines,how to convert HTML files to pug ,working with handlebars,working with EJS.And finally in MVC we will learn about Adding the controllers and how can we fetch or store the data using model.

In this session,we will learn how to use template engines,how to convert HTML files to pug ,working with handlebars,working with EJS.And finally in MVC we will learn about Adding the controllers and how can we fetch or store the data using model.

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Similar to Working with Dynamic Content and Adding Templating engines, MVC (20)

Advertisement

Recently uploaded (20)

Advertisement

Working with Dynamic Content and Adding Templating engines, MVC

  1. 1. Presented By: Aanchal Agarwal and Anirudh Singh Chauhan Working with Dynamic Content and Adding Templating Engines, MVC
  2. 2. Lack of etiquette and manners is a huge turn off. Session Etiquettes Punctuality Respect Knolx session timings, you are requested not to join sessions after a 5 minutes threshold post the session start time. Feedback Make sure to submit a constructive feedback for all sessions as it is very helpful for the presenter. Silent Mode Keep your mobile devices in silent mode, feel free to move out of session in case you need to attend an urgent call. Avoid Disturbance Avoid unwanted chit chat during the session.
  3. 3. Agenda Overview 01 02 03 04 05 Using Dynamic content with Templating Engines MVC(Model View Controller) Templating Engines Installation
  4. 4. Overview
  5. 5. MVC(Model View Controller) Separation of Concern Model Connecting your model and views Controller View Represent the data in your code. What the user sees Contains “in-between” logic Work with your Data {eg:-save,fetch} Decoupled from your applications code.
  6. 6. MVC Structure
  7. 7. Templating Engines Template engine helps us to create an HTML template with minimal code. Also, it can inject data into HTML template at client side and produce the final HTML.
  8. 8. ● Client-side browser loads HTML template, JSON/XML data and template engine library from the server. ● Template engine produces the final HTML using template and data in client's browser. However, some HTML templates process data and generate final HTML page at server side also. How it Works?
  9. 9. Available Templating Engines ● The most popular and free templating engines are EJS, handlebars , pug. ● These are the templating engines which have different set of syntax and different set of features,which is used to create these templating engines. Some list of engines are:- ● Jade ● Vash ● EJS ● Mustache ● Dust.js ● Nunjucks ● Handlebars ● atpl
  10. 10. Installation of Templating Engines We will be using some popular and free templating engines i.e. pug, handlebars, EJS pug: npm install -- save pug handlebars: npm install -- save express-handlebars EJS: npm install -- save ejs
  11. 11. Basics about the Templating Engines EJS pug(Jade) handlebars p #{name} <p>{{name}}</p> <p><%= name %></p> Use normal HTML and custom template language. Use normal HTML and plain javascript in your templates Use minimal HTML and custom template language
  12. 12. pug - Templating Engine ● Pug is available via npm: $ npm install --save pug ● Pug fully integrates with Express, a popular Node.js web framework, as a supported view engine. 1. Install Pug into your project: npm install pug -- save pug 2. Set up your view engine: app.set(‘view engine’, ‘pug’) 3. Create a .pug file
  13. 13. Handlebars- Templating Engine Installation CLI command ● npm install -- save express-handlebars ● Handlebars is a simple templating language. ● It uses a template and an input object to generate HTML or other text formats. Handlebars templates look like regular text with embedded Handlebars expressions.
  14. 14. EJS-Templating Engine Installation CLI command npm install -- save ejs ● EJS or Embedded Javascript Templating is a templating engine used by Node.js. ● Template engine helps to create an HTML template with minimal code. Also, it can inject data into HTML template at the client side and produce the final HTML. ● EJS is a simple templating language which is used to generate HTML markup with plain JavaScript. It also helps to embed JavaScript to HTML pages.
  15. 15. DEMO
  16. 16. ● https://nodejs.org/en/docs ● https://ejs.co/#docs ● https://www.tutorialsteacher.com/nodejs/template-engines-for-nodejs ● https://handlebarsjs.com/installation/#npm-or-yarn-recommended ● https://pugjs.org/api/getting-started.html References
  17. 17. Thank You ! Get in touch with us: Lorem Studio, Lord Building D4456, LA, USA

×