Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Express, Jade, & NodeJS: Navigate between pages

How do I create a Jade page that has two buttons where each one of them redirects to another page made with Jade?

like image 825
janiv Avatar asked Mar 08 '15 10:03

janiv


People also ask

What is Jade in Express?

Jade is a template engine for node. js and the default rendering engine for the Express web framework. It is a new, simplified language that compiles into HTML and is extremely useful for web developers. Jade is designed primarily for server-side templating in node.

Which template engine is best?

Popular template engines Template engines are mostly used for server-side applications that are run on only one server and are not built as APIs. The popular ones include Ejs, Jade, Pug, Mustache, HandlebarsJS, Jinja2, and Blade.

Is Jade and Pug same?

js, also known as PUG, is a Javascript library that was previously known as JADE. It is an easy-to-code template engine used to code HTML in a more readable fashion. One upside to PUG is that it equips developers to code reusable HTML documents by pulling data dynamically from the API.

Is Jade better than EJS?

According to some benchmark tests, EJS is way faster than Jade or Haml.


1 Answers

This is the code I made for your question:

server.js

var express = require('express');
var path = require('path');

var app = express(); 

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.get('/', function(req, res){
  res.render('layout', {
    title: 'Home'
  });
});

app.get('/newpage', function(req, res){
  res.render('anotherpage', {
    title: 'Home'
  });
});
app.listen(3000);

page1.jade

doctype html
html
  head
    title= title
  body
    p hi there!
    button(onclick="move()") newPage
script.
  function move() {
    window.location.href = '/newpage'
  }

anotherpage.jade

doctype html
html
  head
    title= title
  body
    p welcome to the other page!

Enjoy, because it took me 15 minutes to write all this and the post.

Luca

like image 121
LucaSpeedStack Avatar answered Oct 27 '22 15:10

LucaSpeedStack