i'm using nodejs + express + ejs and i am having a problem when i try to include another view.
When I try:
<% include dochead %>
I get 'unexpected identifier';
when i try:
<% include /admin/global/dochead %>
I get 'include is not defined';
What is going on?
Thanks
Try
<%- include ('dochead') %>
or
<%- include ('admin/global/dochead') %>
set
app.set('view engine', 'ejs');
app.set('views', 'YOUR CUSTOM VIEW FOLDER PATH FROM ROOT FILE');
I think here <% include /admin/global/dochead %> should be
<% include ../admin/global/dochead %>
or
<% include admin/global/dochead %>
depending on the location.
Also check the view engine you use
app.set('view engine', 'ejs');
Related
I am using EJS as my templating engine. I am passing variables from node js to ejs like...
router.get("/AdminDatabase", function(req, res) {
res.render('Pages/AdminDatabase', {title: 'WebFormsAdmin', role: 'System Admin' });
});
I am building a role base control and for this I want to change the header of the page base on the role of user.
<% include ../partials/Common/header_<%= role %> %>
The problem is with the above segment. How can I place the variable role inside this EJS code segment?
My header files are
header_System Admin.ejs,
header_Survey Admin.ejs,
header_Survey Taker.ejs
A workaround would be to do a conditional render like so:
<% switch (role) {
case 'System Admin': %>
<% include ./partials/header_System_Admin %>
<% break; %>
<% case 'Survey Admin': %>
<% include ./partials/header_Survey_Admin %>
<% break; %>
<% default: %>
<% include ./partials/header_Survey_Taker %>
<% break; %>
<% } %>
Note that the first case must be grouped with the switch declaration. Make sure the paths are correct for your partials.
You can concatenate the path and the variable.
<%- include('../partials/Common/header_'+role) %>
I have a header.html and a footer.html which I would like to be rendered along with other views. I want to accomplish this using Node+Express.
I tried to render views in the following way but clearly it doesn't work:
var express = require('express');
var app = express();
app.get('/', function(req, res) {
res.render('header');
res.render('home');
res.render('footer');
});
You have to set a template engine to your project.
You can use Swig for instance, it works very nice and it is well documented.
The example below, shows you how to set it and how you can call partial views from a layout or master page.
Install it by doing npm install swig --save on your project root.
You need to install an additional library called consolidate which acts as interface among different template engine libraries, it is kind of standard in express applications.
npm install consolidate --save
require the library in your main script with
consolidate = require('consolidate');
swig = require('swig');
Configure it as follows:
app.engine('html', cons.swig);
app.set('view engine', 'html');
app.set('views', __dirname + '/views'); // set your view path correctly here
Then you can render a page as:
app.get('/', function (req, res) {
res.render('index', {});
});
(Example taken from Swig's author, Paul Armstrong github page)
Layout.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>{% block title %}{% endblock %} - Example</title>
</head>
<body>
<header>
<h1>{% block title %}{% endblock %}</h1>
{% block header %}{% endblock %}
<nav>
<ul>
<li>Home Page</li>
<li>People</li>
</ul>
</nav>
</header>
<section role="main">
{% block body %}{% endblock %}
</section>
</body>
</html>
Index.html:
{% extends 'layout.html' %}
{% block title %}Home Page{% endblock %}
This way, you can decoupled your views as you need :)
When you are using pug, you can take an advantage of include feature, like #Kangcor suggestion
home.pug
html
head
include ./path/to/header.pug
title= title
body
...
include ./path/to/footer.pug
You can use Handlebars partial views
Here is a well documented library
https://handlebarsjs.com/guide/partials.html#basic-partials
Install hbs
https://handlebarsjs.com/installation/#npm-or-yarn-recommended
npm install handlebars
Configure Handlebars
// import library on the your start js file ie: app.js || index.js
let hbs = require('hbs');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
hbs.registerPartials(__dirname + '/views/partials');
app.set('view engine', 'hbs');
Create your partial views ie: header.hbs and footer.hbs on the partials directory
Create a file layout.hbs and you can call the partial view as follows
<div>
{{> header}}
{{> body}}
{{> footer}}
</div>
Then when calling
res.render("home", {});
home.hbs will be mapped as the body and the footer and header will be added to the layout.
I am using html views.
Is there a something like this? :
{{include head.html}}
index
</body>
</html>
What you are looking for is a templating engine, since you mentioned the {{ }}tags I am assuming you are using Hogan.js aka moustache(the javascript version).
The documentation can be found here and what you are specifically looking for is the partials section.
Please note, the default express app(if you select hogan) comes installed with the hjs module which does not support partials, you will need to install the hogan-express module and replace them.
A partial looks like so:
{{> head}}
index
</body>
</html>
Partials are sent from a get or post object like so:
res.render('index.html', {
partials: {
head: 'partials/head.html'
}
});
You are looking for a template engine for nodejs?
For example check here: http://node-modules.com/search?q=template+engine
I found the solution.
server.js
var hbs = require('hbs');
app.set('view engine', 'html');
app.engine('html', hbs.__express);
app.set('views', __dirname + '/views');
app.use(express.static(__dirname + '/public'));
hbs.registerPartials(__dirname + '/views/'); <-------- include folder
index.html
Index.html includes head.html like this:
{{> head}}
index
</body>
</html>
If you do not want to use ejs or jade etc then you could do it with jquery. Put this code in index.html
<html>
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>
i'm using html files instead of ejs, but the express engine is ejs
views
|
|--header.html
|--footer.html
|
|--index.html
I configured like
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
I render my index template by this:
res.render('index.html', {title: 'test'});
But how can i include header and footer.html in index.html
Similar posts
Node.js express: confuse about ejs template
Existing example which is not working
https://github.com/visionmedia/express/tree/master/examples/ejs
The original method for what you asked would be to use partials. Partials have since been removed, and replaced with the include function of EJS. This is how you would include a file:
<% include header.html %>
<% include footer.html %>
Any locals you pass to the rendered page will also be passed to an include. For example:
app.js
app.get('/', function(req, res) {
res.render(__dirname + '/index.html', {
string: 'random_value',
other: 'value'
});
});
index.html
<!DOCTYPE html>
<body>
<%= other %>
<% include content.html %>
</body>
content.html
<pre><%= string %></pre>
The resultant HTML you would get is:
<!DOCTYPE html>
<body>
value
<pre>random_value</pre>
</body>
newbie here, I want to display my sql query result into my ejs file but I don't know how to.
any help will be appreciated.
To use ejs, the Express render engine must be set.
app.engine('html', require('ejs').renderFile);
Then you can pass variables to templates a SQL query:
connection.query('SELECT 1', function (err, rows) {
res.render('file.html', {
'sql': rows
});
});
In your template, then you can use code like so:
<%= sql.property %>
and even use scripts inside tags:
<% sql.forEach(function(field){ %>
<%= field.property %>
<% }) %>
Use EJS template url and send sql results using:
.render()