Prash's Blog

A simple Expressjs application May 2, 2012

Filed under: Nodejs — prazjain @ 1:35 pm
Tags: ,

This is part of a multipart nodejs series.

Now we will port the example to use Expressjs.

npm install express ejs qs

Start with writing a module app-express.js
Here we set ejs as the template engine for express. And as you can see below Express simplifies a lot of routing logic for us.

var htutil = require('./htutil');
var math = require('./math');
var express = require('express');
var app = express.createServer();

app.register('.html', require('ejs'));

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

app.get('/',function(req,res)
{
	res.render('home.html', {title : "Math App" } );
});

app.get('/mult',	htutil.loadParams, function (req, res )
{
	if (req.a && req.b) res.result = req.a * req.b;
	res.render('mult.html', { title : "Math App", req: req });
});

app.get('/square', 	htutil.loadParams, function (req, res )
{
	if (req.a) req.result = req.a * req.a ;
	res.render('square.html', {title: "Math App", req: req });
});

app.get('/fibonacci', 	htutil.loadParams, function (req, res )
{
	if (req.a) 
	{
		math.fibonacciAsync(Math.floor(req.a), function(val)
		{
			req.result = val;
			res.render('fibo.html', {title: "Math App", req: req });
		});
	}
	else 
	{
		res.render('fibo.html', { title : "Math App", req:req });
	}
});

app.get('/factorial', htutil.loadParams, function(req, res)
{
	if (req.a)
	{
		req.result = math.factorial(req.a);
	}
	res.render('factorial.html', {title : "Math App", req: req });
});

app.get('/404', function(req,res) 
{
	res.send('NOT FOUND' + req.url);
});

app.listen(8124);
console.log('listening to http://localhost:8124');

Create a views directory

mkdir views

Create the html files for template in the views directory. EJS templating engine will pick up these files automatically.
We will have a layout.html which will have the common html code.

<html>
<head><title><%= title %></title></head>
<body>
<h1><%= title %></h1>
<table>
<tr><td>
<div class='navbar'>
<p><a href='/'>home</a></p>
<p><a href='/mult'>Multiplication</a></p>
<p><a href='/square'>Square's</a></p>
<p><a href='/factorial'>Factorial's</a></p>
<p><a href='/fibonacci'>Fibonacci's</a></p>
</div>
</td>
<td><%- body %></td>
</tr>
</table></body></html>

Now we need to have template html files for the four operations.
Home.html

<p>Math App</p>

mult.html

<% if (req.a && req.b) { %>
<p class='result'>
<%= req.a %> * <%= req.b %> = <%= req.result %>
</p>
<% } %>
<p>Enter numbers to multiply</p>
<form name='mult' action='/mult' method='get'>
A: <input type='text' name='a' /><br/>
B: <input type='text' name='b' />
<input type='submit' value='Submit' />
</form>

square.html

<% if (req.a) { %>
<p class='result'>
<%= req.a %> squared = <%= req.result %>
</p>
<% } %>
<p>Enter numbers to multiply</p>
<form name='square' action='/square' method='get'>
A: <input type='text' name='a' />
<input type='submit' value='Submit' />
</form>

factorial.html

<% if (req.a) { %>
<p class='result'>
<%= req.a %> factorial = <%= req.result %>
</p>
<% } %>
<p>Enter a number to see it's factorial</p>
<form name='factorial' action='/factorial' method='get'>
A: <input type='text' name='a' />
<input type='submit' value='Submit' />
</form>

fibo.html

<% if (req.a) { %>
<p class='result'>
fibonacci <%= req.a %> = <%= req.result %>
</p>
<% } %>
<p>Enter a number to see it's fibonacci</p>
<form name='fibonacci' action='/fibonacci' method='get'>
A: <input type='text' name='a' />
<input type='submit' value='Submit' />
</form>

Now you can run the app like this

node app-express.js

And hit the url : http://localhost:8124.
Go back to the main nodejs tutorial.

Advertisements
 

3 Responses to “A simple Expressjs application”

  1. […] Use Expressjs. Like this:LikeBe the first to like this post.   Comments (3) […]

  2. Sony Arouje Says:

    Thanks Prazjain, the post helped me to get started with ejs view engine.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s