close

Template Engine میں استعمال کرنا Express.js

ویب ڈویلپمنٹ میں، ویب صفحات پر سرور سے ڈیٹا کی نمائش انٹرایکٹو اور متحرک صارف کے تجربات بنانے کے لیے بہت ضروری ہے۔ یہ وہ جگہ ہے Template Engine جہاں سے Express.js بچاؤ آتا ہے۔ A Template Engine ایک ایسا ٹول ہے جو آپ کو سرور سے ڈیٹا کو HTML کوڈ میں انجیکشن کرکے متحرک HTML ٹیمپلیٹس بنانے کی اجازت دیتا ہے۔

کیوں استعمال کریں Template Engine ؟

Template Engine سرور سے آنے والے ڈیٹا سے HTML مارک اپ کو الگ کرنے میں مدد کریں۔ یہ آپ کو کوڈ کی ہر لائن میں ڈیٹا کو سرایت کیے بغیر HTML کوڈ کو زیادہ آسانی سے منظم کرنے کی اجازت دیتا ہے۔ اس کے بجائے، آپ ایچ ٹی ایم ایل کوڈ کے اندر "پلیس ہولڈرز" یا "ٹیگز" بنائیں گے، جسے Template Engine بعد میں سرور سائڈ ڈیٹا سے بھر دیا جائے گا۔

Template Engine میں استعمال کرنا Express.js

Express.js مختلف کو سپورٹ کرتا ہے template engine ، جیسے پگ(پہلے جیڈ کے نام سے جانا جاتا تھا) اور EJS(ایمبیڈڈ جاوا اسکرپٹ)۔ ذیل میں پگ اور ای جے ایس کے استعمال کی مثالیں ہیں Express.js:

پگ کا استعمال Template Engine

پگ انسٹال کریں: آپ کو pug npm کے ذریعے پیکیج انسٹال کرنے کی ضرورت ہے۔ 

npm install pug --save

کنفیگر کریں Template Engine: اپنی ایپلیکیشن کی کنفیگریشن فائل میں(مثال کے طور پر app.js)، Pug کی وضاحت کریں 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 });  
});

EJS استعمال کرنا Template Engine

EJS انسٹال کریں: ejs پیکج کو npm کے ذریعے انسٹال کریں۔ 

npm install ejs --save

کنفیگر کریں: EJS کو اپنی ایپلیکیشن کی کنفیگریشن میں Template Engine بطور ڈیفائن کریں ۔ template engine 

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

EJS ٹیمپلیٹ بنائیں: views ڈائریکٹری میں EJS فائلیں بنائیں۔ مثال کے طور پر، ایک فائل بنائیں 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 in کا ​​استعمال Express.js آپ کو متحرک ویب صفحات بنانے اور صارف کے براؤزر پر سرور سے معلومات ظاہر کرنے کی اجازت دیتا ہے۔ Pug، EJS، یا دیگر کو استعمال کرکے template engine ، آپ انٹرایکٹو اور لچکدار ویب صفحات بنا سکتے ہیں جو صارف کو بہتر تجربہ فراہم کرتے ہیں اور HTML کوڈ اور ڈیٹا کے انتظام کو بہتر بناتے ہیں۔