This is a continuation of the tutorial started on node js angular and mongo db shown on
node js console tutorial
In this tutorial, the user input was accepted and processed, but the result was not sent to another html page that contains the result.
In real world application that is common task, say if you have a page listing the name of countries by reading them from data source, the returned page should populate the list of countries with probably other information which is well formatted with css and even some javascripts.
For this, the node has provided the templating engine.
What the template engine does is, it will put some placeholders for the variables that are sent from the server, process them and will finally output html file.
There are many template engines out there for node, I have used ejs since it is easy to use and has similarity with HTML and javascript.
Using template engine in node js to render html pages
1. create a directory node-template
2. move to that directory and issue the following command to install express
in it
sudo npm install express
3. The above command would install express package in node_modules
folder. This is the folder where all third party packages would be stored.
4. install ejs template engine
sudo npm install ejs
5. create server.js in node-template folder and add the following code in it
var express = require("express");
var app = express();
app.set("view engine", "ejs");
app.set("views", __dirname + '/views');
//router for the home page
app.get("/", function(request, response){
//this doesn't need anything to be rendered so it is provided simple html file
response.sendFile(__dirname + '/views/index.html');
});
//router for listcountries path
app.get("/listcountries", function(request, response){
var title = "List of Countries";
//instantiate the list of countries from hard coded array
var hardCodedCountries = [{"name":"America","population":300}, {"name":"Britain","population":53},{"name":"Canada","population":35},{"name": "Democratic Congo","population":67},{"name": "Ethiopia","population":90}, {"name":"Finland", "population":5}, {"name":"Gabon", "population": 2}];
response.render("countries", {'countries': hardCodedCountries, 'title': title});
});
app.listen(8080);
console.log("Hit http://localhost:8080");
From the above code, the part
app.set("view engine", "ejs");
app.set("views", __dirname + '/views');
Tells the node what template engine we are using and where the template pages are supposed to be residing. The __dirname
is the current directory of the running script
Another point is, you see response.render
that is where the ejs
would be useful. It would take the countries list and iterate through them to display. The hardCodedCountries
and title
are computed values that are passed to the template file.
Further ejs syntax and usage can be seen here
6. Create file countries.ejs
and add the following code in it.
<html>
<head><title>With template engine</title></head>
<body>
<h2><%= title %></h2>
<table>
<% for(var i=0; i<countries.length; i++) {%>
<tr><td><%= countries[i].name %> </td>
<td><%= countries[i].population %> million </td></tr>
<% } %>
</table>
</body>
</html>
7. Then being in the node-template
folder, run
node server.js
This would require, as you can see it, having the pages tightly coupled with the logic and that is not good.
What is needed for this then is, a separate front end from the nodejs
Next: Quick introduction to Angular js