close

Template Engine માં ઉપયોગ કરીને Express.js

વેબ ડેવલપમેન્ટમાં, ઇન્ટરેક્ટિવ અને ડાયનેમિક વપરાશકર્તા અનુભવો બનાવવા માટે વેબ પૃષ્ઠો પર સર્વરમાંથી ડેટા પ્રદર્શિત કરવો મહત્વપૂર્ણ છે. આ તે છે જ્યાં Template Engine બચાવમાં Express.js આવે છે. A Template Engine એ એક સાધન છે જે તમને સર્વરમાંથી ડેટાને HTML કોડમાં દાખલ કરીને ડાયનેમિક HTML ટેમ્પલેટ્સ બનાવવા દે છે.

શા માટે ઉપયોગ Template Engine ?

Template Engine સર્વરમાંથી આવતા ડેટાથી અલગ HTML માર્કઅપ કરવામાં મદદ કરે છે. આ તમને કોડની દરેક લાઇનમાં ડેટા એમ્બેડ કર્યા વિના વધુ સરળતાથી HTML કોડનું સંચાલન કરવાની મંજૂરી આપે છે. તેના બદલે, તમે HTML કોડની અંદર "પ્લેસહોલ્ડર્સ" અથવા "ટેગ્સ" બનાવશો, જે Template Engine પછીથી સર્વર-સાઇડ ડેટાથી ભરશે.

Template Engine માં ઉપયોગ કરીને Express.js

Express.js વિવિધને સપોર્ટ કરે છે template engine, જેમ કે Pug(અગાઉ જેડ તરીકે ઓળખાતું હતું) અને EJS(એમ્બેડેડ JavaScript). નીચે Pug અને EJS નો ઉપયોગ કરવાના ઉદાહરણો છે Express.js:

Pug નો ઉપયોગ 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

રૂપરેખાંકિત કરો Template Engine: template engine તમારી એપ્લિકેશનના રૂપરેખાંકનમાં EJS ને વ્યાખ્યાયિત કરો.

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

EJS ટેમ્પલેટ બનાવો: ડિરેક્ટરીમાં 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 in નો ઉપયોગ કરવાથી Express.js તમે ગતિશીલ વેબ પૃષ્ઠો બનાવી શકો છો અને વપરાશકર્તાના બ્રાઉઝર પર સર્વરમાંથી માહિતી પ્રદર્શિત કરી શકો છો. Pug, EJS અથવા અન્યનો ઉપયોગ કરીને template engine, તમે ઇન્ટરેક્ટિવ અને લવચીક વેબ પૃષ્ઠો બનાવી શકો છો જે વધુ સારો વપરાશકર્તા અનુભવ પ્રદાન કરે છે અને HTML કોડ અને ડેટાના સંચાલનને ઑપ્ટિમાઇઝ કરે છે.