Node.js ejs, jade module basic

Node.js

ejs module

We can install ejs module by this code.

1
npm install ejs;

Then, npm installs eternal modules.
We can use those by the same way to internal modules.

1
var ejs = require('ejs');

Module ejs is the engine of template.
So it translates specific String to HTML type String.

We will make the server page which changes ejs page to HTML page.
When we translate ejs to HTML page, we use render(str, data, option) of ejs module.

Though we can use variables after declaring in ejs in side,
usually people declare them in Javascript and pass them to ejs for using.
When we pass Javascript‘ variables, we use the 2nd parameter of render() method like 9, 10th row.

Tip — we should set UTF-8 as that file’s encoding

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var http = require("http");
var fs = require('fs');
var ejs = require('ejs');

http.createServer(function ( request, response){
  fs.readFile("ejsPage.ejs", 'utf8', function(error, data){
    response.writeHead(200, {'Content-Type':'text/html'});
    response.end(ejs.render(data, {
      name: 'booski',
      description : 'Hellow ejs with node.js'
      }));
    });
  }).listen(52273, function(){
    console.log("Server Running at http://127.0.0.1.52273");
  });

When we write ejs page, we can use some special tags.

  • <% Code %> → writing Javascript code inside
  • <%= Value %> → printing the data

With using these tags, I made ejsPage.ejs file like this.

1
2
3
4
5
6
<h1><%=name%></h1>
<p><%=description%></p>
<hr/>
<%for(var i = 0;i<10;i++){%>
  <h2>The Square of <%= i %> is <%= i*i%></h2>
 <%}%>

Starting the server, we can see this page.

Jade module

Jade module is one of template engine modules too like ejs module.
We can install that by the same way to ejs like this

1
npm install jade

When jade module translates jade page to HTML page, it uses compile(string,option)method.
One different thing is that if ejs‘ render() returns String, compile() returns a function. And we can pass Javascript‘ variable with the function.
We put them as the parameter of the function which compile() returned like 11, 12 rows.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var http = require("http");
var fs = require('fs');
var jade = require('jade');

http.createServer(function ( request, response){
  fs.readFile("jadePage.jade", 'utf8', function(error, data){
    var fn = jade.compile(data);

    response.writeHead(200, {'Content-Type':'text/html'});
    response.end(fn({
      name: 'booski',
      description : 'Hellow jade with node.js'
    }));
  });
}).listen(52273, function(){
    console.log("Server Running at http://127.0.0.1.52273");
});

Jade has special way to write down the page too like ejs.
The most important thing is making an indentation.
Jade module makes new HTML tag based on each indentations.

Tip: we should use ‘tap’ or ‘space bar’ for every indentation. If not, there will be an error

When we input words in the tag, we go to the next row and make an indentation again and then write down them there.
And If we want to give an attribute to the tag, we give it with parenthesis.
(if we want to give many attributes, we divide them by ,)

Jade translates some specific words in special way like doctype or annotation,

  • doctype html → <!DOCTYPE html>
  • // JADE String → <!-- JADE String -->

Especially making new div tag, we don’t need to write ‘div’ down.
If we write #header for example, that makes the div tag having ‘header’ as its id.
As the same way, .article makes the div having ‘article’ as its class.

Jade has special tags too.

  • -Code → writing Javascript code
  • #{Value} → printing the value (inputting the value between content)
  • =Value → printing the value (whole content becomes value)

Using these tags, we can make for repetitive statement like 11th row.

Based on what I mentioned, we can make this code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
doctype html
html
  head
    title index Page
  body
    // JADE String
    #header
      h1 hello jade...!
      h2 #{name}, we are the World
      h3= description
    hr
    - for(var i = 0; i< 10;i++) {
    .article
      p
        a(href="https://medium.com/@booski/", data-test="attribute added") Go to new world #{i}
    - }

And this code shows this page well.

Comments