Full-Stack Web Development with Vue.js and Node

Building an Express Application Chapter 2

Now, if we used nodemon, we don't have to restart our server; just reload the browser with

the location http://localhost:3000/users. This should render the following:

Now that we know how to connect controllers and views and how to create view files,

let's get a little bit more information on the code of the file.

The first line says:

extends layout

What this means is that it is asking to extend the views that are already in

the layout.pug file. Now, look at layout.pug:

doctype html

html

head

title= title

link(rel='stylesheet', href='/stylesheets/style.css')

body

block content

This is a simple HTML file with doctype, HTML, head, and body tags. Inside the body tag,

it says to block content, which means it yields the content from any other files that are

written under this block content statement. If we look at users.jade, we can see that

the content is written under the block content statement. Now, this is very useful because

we don't have to repeat the entire HTML tags in every view file that we create.

Also, if we look at users.js inside the controller, there's a line that says:

res.render('users', { title: 'Users' });