मैं एक्सप्रेस में दृश्य इंजन के रूप में HTML का उपयोग कैसे करूं?


130

मैंने बीज से इस सरल बदलाव की कोशिश की और संबंधित .html फाइलें (जैसे index.html) बनाईं।

//app.set('view engine', 'jade');
app.set('view engine', 'html');

और यह फाइल वही रही:

exports.index = function(req, res){
  res.render('index');
};

लेकिन दौड़ते समय मैं मिलता हूं

500 त्रुटि: मॉड्यूल 'html' नहीं ढूँढ सकता

क्या मेरा एकमात्र विकल्प 'ईजे' का उपयोग करना है? मेरा इरादा AngularJS के साथ सादा HTML का उपयोग करना था।


7
एक जवाब के लिए इस विषय देखें: stackoverflow.com/questions/4529586/... आशा इस, में मदद करता है
रॉलेंड

3
app.engine ('html', की आवश्यकता है ('ejs')। renderFile);
दिनेश कानिवू

जवाबों:


91

अन्य लिंक पर उत्तर काम करेंगे, लेकिन HTML की सेवा करने के लिए, एक दृश्य इंजन का उपयोग करने की कोई आवश्यकता नहीं है, जब तक कि आप फंकी रूटिंग स्थापित नहीं करना चाहते हैं। इसके बजाय, केवल स्थैतिक मिडलवेयर का उपयोग करें:

app.use(express.static(__dirname + '/public'));

3
मैंने आगे बढ़कर app.set ('view engine', html) के संदर्भ में टिप्पणी की। मुझे तब एक त्रुटि संदेश मिला कि "कोई डिफ़ॉल्ट इंजन निर्दिष्ट नहीं किया गया था और कोई एक्सटेंशन प्रदान नहीं किया गया था", जो अपेक्षित है। लेकिन जब मैंने res.render ("index") को res.render ("index.html") में बदल दिया, तो मुझे निम्न त्रुटि मिली: TypeError: संपत्ति 'इंजन' का ऑब्जेक्ट # <View> कोई फ़ंक्शन नहीं है।
जूलियो

4
कोई और अधिक दृश्य इंजन नहीं है, इसलिए मुझे नहीं लगता कि res.render()कोई और काम करेगा। इसके बजाय, अपनी कच्ची एचटीएमएल फाइलों को अंदर रखें publicऔर फाइलों को सीधे परोसने के साथ स्टेटिक मिडलवेयर डील करें। यदि आपको इससे बेहतर मार्ग की आवश्यकता है, तो आप संभवतः अपना स्वयं का HTML दृश्य इंजन सेट कर सकते हैं।
निक मैक्किरी

6
तो आप app.get () कॉल में क्या लिखते हैं?
अंजुब्रास a

5
@ajbraus आप भी एक app.get () कॉल की जरूरत नहीं है। यह सीधे / सार्वजनिक फ़ोल्डर में आपके पास जो भी HTML फाइलें हैं उनकी सेवा करेगा। इसलिए ब्राउज़र में, आप सीधे html को इंगित करते हैं और यह बात है ... मूल रूप से कोई रूटिंग नहीं है
dm76

इसके साथ मुझे जो समस्या हो रही है वह यह है कि यदि आप पेज को लोड करने के बाद उसे रिफ्रेश करते हैं तो आपको एरर कहते हैं एरर: कोई डिफ़ॉल्ट इंजन निर्दिष्ट नहीं किया गया था और न ही कोई एक्सटेंशन दिया गया था। तब यदि आप Auth, {provide: LocationStrategy, useClass: HashLocationStrategy}] का उपयोग करते हैं, तो यह आपके url के लिए एक हैश का विज्ञापन करता है जो अन्य कारणों से एक दर्द है। क्या इसके चारों ओर एक रास्ता है?
वुनो

33

जेड के बजाय HTML के रेंडर इंजन को स्वीकार करने के लिए आप निम्नलिखित चरणों का पालन कर सकते हैं;

  1. अपनी निर्देशिका में समेकित और स्वाइप स्थापित करें ।

     npm install consolidate
     npm install swig
    
  2. अपने app.js फ़ाइल में निम्न पंक्तियाँ जोड़ें

    var cons = require('consolidate');
    
    // view engine setup
    app.engine('html', cons.swig)
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'html');
    
  3. "व्यू" फ़ोल्डर के अंदर। आप नोड सर्वर को पुनरारंभ करें और ब्राउज़र में ऐप शुरू करें।

यद्यपि यह html को बिना किसी समस्या के रेंडर करेगा, लेकिन मैं आपको इसे सीखकर JADE का उपयोग करने की सलाह दूंगा। जेड एक अद्भुत टेम्पलेट इंजन है और इसे सीखने से आपको बेहतर डिजाइन और मापनीयता हासिल करने में मदद मिलेगी।


कोई विधि 'इंजन' नहीं है - सभी चरणों के बाद
इमराननक्वी

आप किस संस्करण का उपयोग कर रहे हैं? एक्सप्रेस 4.x में app.engine API है। अधिक जानकारी @ expressjs.com/en/api.html#app.engine
आनंदभान

बढ़िया काम किया! मैं प्यार करता हूँ जब एक साल पुराना जवाब पहली बार काम करता है।
मैथ्यू स्नेल

कारण है कि यह अब भी नहीं कर सकते मेरी सीएसएस और अन्य प्रस्तुत करना
exe

23

अपने apps.js में बस जोड़ें

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

अब आप अपने व्यू फाइल्स को .html के रूप में रखते हुए ejs व्यू इंजन का उपयोग कर सकते हैं

स्रोत: http://www.makebetterthings.com/node-js/how-to-use-html-with-express-node-js/

आपको यह दो पैकेज इंस्टॉल करने होंगे:

`npm install ejs --save`
`npm install path --save`

और फिर आवश्यक पैकेज आयात करें:

`var path = require('path');`


इस तरह आप अपने विचारों को .ejs के बजाय .html के रूप में सहेज सकते हैं । आईडीई के साथ काम करते समय बहुत मददगार है जो html का समर्थन करता है लेकिन न ही ईजे को पहचानता है।


1
app.set ('विचार', path.join (__ dirname, '/ path / to / your / folder')); app.set ("विकल्प देखें", {लेआउट: झूठी}); app.engine ('html', function (पाथ, ऑप्ट, fn) {fs.readFile (पाथ, 'utf-8', फंक्शन (एरर, str) {if (एरर) str str; रिटर्न fn (null, str) ;});});
नीलकंठ सिंह देव

16

अपने सर्वर कॉन्फ़िगरेशन के लिए यह प्रयास करें

app.configure(function() {
    app.use(express.static(__dirname + '/public'));         // set the static files location
    app.use(express.logger('dev'));                         // log every request to the console
    app.use(express.bodyParser());                          // pull information from html in POST
    app.use(express.methodOverride());                      // simulate DELETE and PUT
    app.use(express.favicon(__dirname + '/public/img/favicon.ico'));
});

तब मार्गों पर आपके कॉलबैक कार्य इस तरह दिखाई देंगे:

function(req, res) {
    res.sendfile('./public/index.html');
};

14

कोई दृश्य इंजन आवश्यक नहीं है, यदि आप सरल सादे HTML फ़ाइल के साथ कोणीय का उपयोग करना चाहते हैं। यह कैसे करना है: आपकी route.jsफाइल में है:

router.get('/', (req, res) => {
   res.sendFile('index.html', {
     root: 'yourPathToIndexDirectory'
   });
});

1
बिल्कुल आसान उपाय। मेरे पास कोई दृश्य इंजन स्थापित / कॉन्फ़िगर नहीं किया गया है और HTML भेजा गया है।
न्यूक्लिक

7

मैं https://www.npmjs.com/package/express-es6-template-engine - अत्यंत lightwave और धधकते तेज टेम्पलेट इंजन का उपयोग करने की सलाह देता हूं । नाम थोड़ा भ्रामक है क्योंकि यह एक्सप्रेस के बिना भी काम कर सकता है।

express-es6-template-engineआपके एप्लिकेशन में एकीकृत करने के लिए आवश्यक मूल बातें बहुत सरल हैं और लागू करने के लिए काफी सीधे हैं:

const express = require('express'),
  es6Renderer = require('express-es6-template-engine'),
  app = express();
  
app.engine('html', es6Renderer);
app.set('views', 'views');
app.set('view engine', 'html');
 
app.get('/', function(req, res) {
  res.render('index', {locals: {title: 'Welcome!'}});
});
 
app.listen(3000);
यहाँ index.htmlफ़ाइल की सामग्री आपके 'दृश्य' निर्देशिका के अंदर है:

<!DOCTYPE html>
<html>
<body>
    <h1>${title}</h1>
</body>
</html>

4

उत्तर बहुत सरल है। * .Html पेजों को रेंडर करने के लिए आपको app.engine ('html') का उपयोग करना चाहिए। यह कोशिश करो। यह समस्या को हल करना चाहिए।

app.set('views', path.join(__dirname, 'views'));
**// Set EJS View Engine**
app.set('view engine','ejs');
**// Set HTML engine**
app.engine('html', require('ejs').renderFile);

.html फ़ाइल काम करेगी


2
अधूरा जवाब। ये बदलाव कहां किए गए हैं? App.js मान लें, लेकिन आपका जवाब विशिष्ट होना चाहिए। इसके अलावा, यह संभावना नहीं है कि सभी को बदलने की आवश्यकता है क्योंकि केवल इन तीन परिवर्तनों / परिवर्धन बनाने का परिणाम "मॉड्यूल 'ejs' नहीं मिल सकता है"। आपका जवाब शायद करीब है, लेकिन आपको बस थोड़ा और जानकारी जोड़ने की आवश्यकता है।
न्यूक्लिक

इसके अलावा, रेंडरिंग एक फ़ाइल की सेवा के समान नहीं है। रेंडरिंग के लिए सर्वर को फाइल प्री-प्रोसेस करने और रेंडर विधि में जो भी डायनामिक कंटेंट पास होता है उसे जोड़ने की आवश्यकता होती है। हो सकता है कि ओपी चाहता था, लेकिन कुछ लोग सेवा प्रदान करने के साथ प्रतिपादन को स्वीकार करते हैं। बहुत अलग अवधारणाएँ।
न्यूक्लियर

@ इसके बजाय ejs फ़ाइल के बजाय HTML फ़ाइल प्रदान करने के लिए।
दिनेश कानिवु

3

HTML फ़ाइलों को ejs इंजन का उपयोग करके प्रदान किया जा सकता है:

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

और सुनिश्चित करें कि "/ विचार" के तहत आपकी फाइलें ".ejs" के साथ नामित की गई हैं।

उदाहरण के लिए "index.ejs"।


यह काम करता है लेकिन थोड़ा हैकरी लगता है। क्या आप जानते हैं कि .html के स्थान पर .ejs का उपयोग करने से कोई चेतावनी है? संभवत: सबसे तेजी से तय करने के लिए चीयर्स ने सभी का सुझाव दिया!
20

3

Html के लिए मिडलवेयर पर टिप्पणी करें

//app.set('view engine', 'html');

इसके बजाय उपयोग करें:

app.get("/",(req,res)=>{
    res.sendFile("index.html");
});

2

html एक व्यू इंजन नहीं है, लेकिन ejs इसके भीतर html कोड लिखने की संभावना प्रदान करता है


1

रूट करने के माध्यम से सर्वर html पेजों के लिए, मैंने यह किया है।

var hbs = require('express-hbs');
app.engine('hbs', hbs.express4({
  partialsDir: __dirname + '/views/partials'
}));
app.set('views', __dirname + '/views');
app.set('view engine', 'hbs');

और .hbs फ़ाइलों के लिए मेरी .html फ़ाइलों का नाम बदल दिया - हैंडलबार सादे HTML का समर्थन करते हैं


1

जेड के बजाय HTML के रेंडर इंजन को स्वीकार करने के लिए आप निम्नलिखित चरणों का पालन कर सकते हैं;

Install consolidate and swig to your directory.

 npm install consolidate
 npm install swig

add following lines to your app.js file

var cons = require('consolidate');

// view engine setup
app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

add your view templates as .html inside views folder. Restart you node server and start the app in the browser.

यह काम करना चाहिए


1

इस सरल समाधान की कोशिश करो, यह मेरे लिए काम किया

app.get('/', function(req, res){
    res.render('index.html')
  });

1
आपको अपनी सभी लाइनों को जोड़ना चाहिए, यह अपने आप काम नहीं कर रहा है।
मुशायरे

1

ईजेएस टेम्पलेट स्थापित करें

npm install ejs --save

App.js में ejs देखें

app.set('views', path.join(__dirname, 'views'));`
app.set('view engine', 'ejs');

विचारों / indes.ejs जैसे विचारों में एक ejs टेम्पलेट बनाएं और रूटर में ejs tempalte का उपयोग करें

router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
});

0

Swig की मदद से html टेम्पलेट को रेंडर करें।

//require module swig    
    var swig = require('swig');

// view engine setup    
    app.set('views', path.join(__dirname, 'views'));
    app.engine('html', swig.renderFile);
    app.set('view engine', 'html');

0

Html फ़ाइलों को प्रदान करने की आवश्यकता नहीं है।
एक रेंडर इंजन जो भी करता है वह एक फाइल है जो एक Html फाइल में एक Html फाइल नहीं है।
Html फाइल भेजने के लिए, बस करें:

res.sendFile("index.html");

आप का उपयोग करने की आवश्यकता हो सकती है __dirname+"/index.html"ताकि एक्सप्रेस को सटीक रास्ता पता चले।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.