વેબ ડેવલપમેન્ટમાં, ઇન્ટરેક્ટિવ અને ડાયનેમિક વપરાશકર્તા અનુભવો બનાવવા માટે વેબ પૃષ્ઠો પર સર્વરમાંથી ડેટા પ્રદર્શિત કરવો મહત્વપૂર્ણ છે. આ તે છે જ્યાં 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 દ્વારા પેકેજ ઇન્સ્ટોલ કરવાની જરૂર છે.
રૂપરેખાંકિત કરો Template Engine: તમારી એપ્લિકેશનની રૂપરેખાંકન ફાઇલમાં(દા.ત. app.js
), Pug ને. તરીકે વ્યાખ્યાયિત કરો template engine.
પગ ટેમ્પલેટ બનાવો: ડિરેક્ટરીમાં પગ ફાઇલો બનાવો views
. ઉદાહરણ તરીકે, એક index.pug
ફાઇલ બનાવો:
રૂટ હેન્ડલિંગ અને ડેટા રેન્ડરીંગ: રૂટ હેન્ડલિંગમાં, તમે template engine ઉપયોગ કરીને ડેટા પાસ કરી શકો છો res.render()
.
EJS નો ઉપયોગ કરવો Template Engine
EJS ઇન્સ્ટોલ કરો: ejs
npm દ્વારા પેકેજ ઇન્સ્ટોલ કરો.
રૂપરેખાંકિત કરો Template Engine: template engine તમારી એપ્લિકેશનના રૂપરેખાંકનમાં EJS ને વ્યાખ્યાયિત કરો.
EJS ટેમ્પલેટ બનાવો: ડિરેક્ટરીમાં EJS ફાઈલો બનાવો views
. ઉદાહરણ તરીકે, એક index.ejs
ફાઇલ બનાવો:
રૂટ હેન્ડલિંગ અને ડેટા રેન્ડરિંગ: રૂટ હેન્ડલિંગમાં, template engine ઉપયોગ કરીને ડેટા પાસ કરો res.render()
.
નિષ્કર્ષ
Template Engine in નો ઉપયોગ કરવાથી Express.js તમે ગતિશીલ વેબ પૃષ્ઠો બનાવી શકો છો અને વપરાશકર્તાના બ્રાઉઝર પર સર્વરમાંથી માહિતી પ્રદર્શિત કરી શકો છો. Pug, EJS અથવા અન્યનો ઉપયોગ કરીને template engine, તમે ઇન્ટરેક્ટિવ અને લવચીક વેબ પૃષ્ઠો બનાવી શકો છો જે વધુ સારો વપરાશકર્તા અનુભવ પ્રદાન કરે છે અને HTML કોડ અને ડેટાના સંચાલનને ઑપ્ટિમાઇઝ કરે છે.