E is for effective or embeddable. EJS is a simple templating language that lets you generate HTML markup with plain JavaScript.
We are creating web apps to retrieve speaker and all speaker information from the data .JSON in the data folder and photo from public/images. To use the Ejs we have to install the Ejs through NPM and then we have to tell apps what type of view engine we want to use, this can be achieved with following code
app.set(‘view engine’, ???)
We need to set the location of view engine, by default, it will take main web app folder but we can also change the location with help of the following code.
app.set(‘views’, ???)
The file structure of our web apps as follows. The view is main app folder, we have app, node_modules folder with one package.JSON file.
Inside the app folder, we have four folders and one app.js file. Data folder containing data.JSON file where all information about
the speaker. The file structure of our web apps.
Add the following code in app.js file
var express = require('express');
var reload = require('reload')
var app = express();
var dataFile = require('./data/data.json');
app.set('port', process.env.PORT || 3000);
app.set('appData', dataFile);
app.set('view engine', 'ejs');
app.set('views', 'app/views');
app.locals.siteTitle = 'Tamo M';
app.locals.allSpeakers = dataFile.speakers;
app.use(express.static('app/public'));
app.use(require('./routes/index'));
app.use(require('./routes/speakers'));
var server = app.listen(app.get('port'), function(){
console.log('Listening on port' + app.get('port'));
});
reload(server, app);
app.js
Add following code in routes/index.js
var express = require('express');
var router = express.Router();
router.get('/', function(req, res){
var data = req.app.get('appData');
var pagePhotos = [];
var pageSpeakers = data.speakers;
data.speakers.forEach(function(item) {
pagePhotos = pagePhotos.concat(item.artwork);
});
res.render('index',{
pageTitle: 'Home',
artwork: pagePhotos,
speakers: pageSpeakers,
pageID: 'home'
});
});
module.exports = router;
In the first highlight in the code, we are creating a local variable of array type called pagePhotos will collect all the photo of the artists or speaker and then we are setting pagePhotos variable to artwork variable which we can access in index.ejs in views folder.
Note: We have specified all the image name with artists or the speaker name.
In the second highlight line, we have to specify what file to render for root web page /, here we are rendering to index.ejs file of view folder. We don’t have to specify the .ejs extension for index file as we have already specified view engine for views, it is assuming that file is in app/views folder. We can define a local variable in the app.js which is available to all file in views folder.
app.locals.siteTitle = ‘Tamo M’;
In the real web app, we need to pass data along with the template and we want to pass data or variable from route to view.
res.render(‘index’, {
pageTitle: ‘Home’
})
where data or pageTitle become a local variable that we can use inside the view template in the index.ejs. We can also set a variable in app.js, it will be a global version of a variable that will become local variable inside our view. It will apply to all routes in your application.
app.locals.??? = {}
Inside the template, we can access variable by using this code <%= data %>
Add the following code in app/view/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<% include partials/template/head.ejs %>
</head>
<body id="<%= pageID %>">
<% include partials/template/header.ejs %>
<% include partials/content/speakerslist.ejs %>
<div class='container'>
<div id='content' class='row'>
<div class='col-sm-8'>
<% include partials/content/maincontent.ejs %>
</div> <!-- primary -->
<aside class='col-sm-4'>
<% include partials/content/whoshouldcome.ejs %>
<% include partials/content/artworklist.ejs %>
</aside>
</div>
</div>
<% include partials/template/jsdefaults.ejs %>
</body>
</html>We can define loop and condition in ejs.
Add the following code in app/views/partials/template/jsdefaults.ejs. Here we are checking if variable artwork if it doesn’t exist then don’t load the file pixgrid.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<% if(typeof artwork !== "undefined") { %>
<script src="/js/pixgrid.js"></script>
<% } %>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="/reload/reload.js"></script>
We will continue this app with adding the client to communicate with the server through the feedback form.
