close

Template Engine में उपयोग करना Express.js

वेब विकास में, इंटरैक्टिव और गतिशील उपयोगकर्ता अनुभव बनाने के लिए वेब पेजों पर सर्वर से डेटा प्रदर्शित करना महत्वपूर्ण है। यहीं बचाव के लिए आते Template Engine हैं । Express.js ए Template Engine एक उपकरण है जो आपको सर्वर से डेटा को HTML कोड में इंजेक्ट करके गतिशील HTML टेम्पलेट बनाने की अनुमति देता है।

क्यों उपयोग करें Template Engine ?

Template Engine सर्वर से आने वाले डेटा से HTML मार्कअप को अलग करने में सहायता करें। यह आपको कोड की प्रत्येक पंक्ति में डेटा एम्बेड किए बिना HTML कोड को अधिक आसानी से प्रबंधित करने की अनुमति देता है। इसके बजाय, आप HTML कोड के भीतर "प्लेसहोल्डर" या "टैग" बनाएंगे, जो Template Engine बाद में सर्वर-साइड डेटा से भर जाएगा।

Template Engine में उपयोग करना Express.js

Express.js template engine पग(पहले जेड के नाम से जाना जाता था) और ईजेएस(एम्बेडेड जावास्क्रिप्ट) जैसे विभिन्न का समर्थन करता है । नीचे पग और ईजेएस का उपयोग करने के उदाहरण दिए गए हैं Express.js:

पग का उपयोग करना Template Engine

पग इंस्टॉल करें: आपको pug एनपीएम के माध्यम से पैकेज इंस्टॉल करना होगा। 

npm install pug --save

कॉन्फ़िगर करें Template Engine: अपने एप्लिकेशन की कॉन्फ़िगरेशन फ़ाइल(उदाहरण के लिए, app.js) में, पग को परिभाषित करें template engine । 

app.set('view engine', 'pug');

views एक पग टेम्पलेट बनाएं: निर्देशिका में पग फ़ाइलें बनाएं । उदाहरण के लिए, एक फ़ाइल बनाएँ index.pug:

doctype html  
html  
  head  
    title My Express App  
  body  
    h1 Welcome to My Express App  
    p #{message}

रूट हैंडलिंग और डेटा रेंडरिंग: रूट हैंडलिंग में, आप template engine उपयोग करने वाले को डेटा पास कर सकते हैं res.render() । 

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

ईजेएस का उपयोग करना Template Engine

ईजेएस स्थापित करें: ejs एनपीएम के माध्यम से पैकेज स्थापित करें। 

npm install ejs --save

कॉन्फ़िगर करें Template Engine: template engine अपने एप्लिकेशन के कॉन्फ़िगरेशन में ईजेएस को परिभाषित करें। 

app.set('view engine', 'ejs');

एक ईजेएस टेम्पलेट बनाएं: views निर्देशिका में ईजेएस फ़ाइलें बनाएं। उदाहरण के लिए, एक फ़ाइल बनाएँ index.ejs:

<!DOCTYPE html>  
<html>  
<head>  
  <title>My Express App</title>  
</head>  
<body>  
  <h1>Welcome to My Express App</h1>  
  <p><%= message %></p>  
</body>  
</html>

रूट हैंडलिंग और डेटा रेंडरिंग: रूट हैंडलिंग में, डेटा को template engine उपयोग करने वाले को पास करें res.render() । 

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

 

निष्कर्ष

Template Engine इसका उपयोग Express.js आपको गतिशील वेब पेज बनाने और उपयोगकर्ता के ब्राउज़र पर सर्वर से जानकारी प्रदर्शित करने की अनुमति देता है। पग, ईजेएस, या अन्य का उपयोग करके template engine, आप इंटरैक्टिव और लचीले वेब पेज बना सकते हैं जो बेहतर उपयोगकर्ता अनुभव प्रदान करते हैं और HTML कोड और डेटा के प्रबंधन को अनुकूलित करते हैं।