ExpressJs Handwritten Notes

ExpressJs :
Fast , unopionated,
minimalist web
framework for Node.js.
----> Unopinionated means, doesn't you HOW TO STRUCTURE YOUR

Files.
Angular
Sails.js
Meteor
Next.js
Svelte
automatically handles by express
prevoius we had to
use Switch cases.
Non-Ajax or Synchronous object.
_ _ dirname: __dirname is an environment variable
that tells you the absolute path
of the directory
containing the currently executing file.
View: View is the file that is viewed by the users.

How to setup use ejs?
Tell express
that ejs will be the
view Engine/
Template engine
that will be used.
tell express
where
the views
file
is kept.
so, whenever html changes
it doesn't
get precompiled.
creating a
controller
for
practice
html file.
for loop
in html
if statement.
It will
always be true.
passing contact list as
one of our locals.
using method
post since, we have to some
change in the database.
before view show us
we pages.
make a route
in controller.
now it will take you to the
other page. /practice
form Filled
Submit
Action Required
Redirected
analyze the data

in parse.
create server (write at last) app.listen(port, function(err){
Express const app = express();

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.get('/', function(req, res){

return res.render ('home', {
// locals or 'context'
title: "Contact List",
contact_list : contactList
});
})
practice.ejs is file app.get('/practice', (req, res)=> {

return res.render ('practice', {
app.get(route, controller function) title: "let us play with ejs"
});
app.post('/contact-list', function(req, res){

return res.redirect
index.js
const express = require('express');
const path = require('path'); app.get('/practice', (req, res)=> {
return res.render('practice', {
const port = 8000; title: "let us play with ejs"
});
const app = express(); });
//setting template engine
app.set('view engine', 'ejs'); //for post html request.
//setting path to views app.post('/contact-list', function(req, res){
app.set('views', path.join(__dirname, 'views')); return res.redirect('/practice');
});
var contactList = [
{
name: "Sharielle", app.listen(port, function(err){
phone: 1233434347 }, if(err){
{ console.log('hey kariel, Error in running the server');
name: "Dante", }
phone: 2123343434 }, console.log(`Yup,Hey fallen Angel,
{ My Express server is running on port: ${port}`);
name: "Mark", })
phone: 3233434348 }
]

return res.render('home', {
});
})
home.ejs
<html>
<head>
<title><%=title %></title>
</head>
<body>
<h1>Contact List</h1>
<div>
<ul>
<% for(let i of contact_list) {%>
<li>
<p> <%=i.name%></p>
<p><%= i.type%></p>
</li>
<%}%>
</ul>
</div>
<form action="/contact-list" method="POST">

<input type="text" name="name" placeholder="Enter Name">
<input type="text" name="phone" placeholder="Enter Phone">
<button type="submit">Add Contact</button>
</form>
</body>
</html>
th
TTT
to append into
contactList
code
added the parser

which is
middleware.
code
1. controller
2. added a parser
which is middleware.
3.added parse data to our Controller

contact list.
note: After refreshing the

compile file is removed from the
ram. and so from webpage.
create server (write at last) app.listen(port, function(err){
Express const app = express();

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

return res.render ('home', {
});
})
practice.ejs is file app.get('/practice', (req, res)=> {

return res.render ('practice', {
app.get(route, controller function) title: "let us play with ejs"
});
app.post('/contact-list', function(req, res){

return res.redirect
index.js
const express = require('express');
const path = require('path'); app.get('/practice', (req, res)=> {
return res.render('practice', {
const port = 8000; title: "let us play with ejs"
});
const app = express(); });
//setting template engine
app.set('view engine', 'ejs'); //for post html request.
//setting path to views app.post('/contact-list', function(req, res){
app.set('views', path.join(__dirname, 'views')); return res.redirect('/practice');
});
var contactList = [
{
name: "Sharielle", app.listen(port, function(err){
phone: 1233434347 }, if(err){
{ console.log('hey kariel, Error in running the server');
name: "Dante", }
phone: 2123343434 }, console.log(`Yup,Hey fallen Angel,
{ My Express server is running on port: ${port}`);
name: "Mark", })
phone: 3233434348 }
]

return res.render('home', {
});
})
home.ejs
<html>
<head>
<title><%=title %></title>
</head>
<body>
<h1>Contact List</h1>
<div>
<ul>
<% for(let i of contact_list) {%>
<li>
<p> <%=i.name%></p>
<p><%= i.type%></p>
</li>
<%}%>
</ul>
</div>
<form action="/contact-list" method="POST">

<input type="text" name="name" placeholder="Enter Name">
<input type="text" name="phone" placeholder="Enter Phone">
<button type="submit">Add Contact</button>
</form>
</body>
</html>
Middleware
Middleware functions are functions
that have access to the
request object (req), the response object (res), and the next()
in the application’s request-response cycle.
The next() in the Express router

which, when invoked
executes the middleware
succeeding the current middleware.
Middleware functions can perform the following tasks:

Execute any code.
Make changes to the request and the response objects.
End the request-response cycle.
Call the next middleware in the stack.
Web pages doesn't go the
next controller.
Code
3.
4.
2.
Q. why is middle ware

executed twice the number.?
code
myName is set over here in req body.

code
C 7.
Adding css and images
in express app.
c
why not?
/assets/css/home.css
why not?
/assets/js/home.js
note:
writing the path
in the following ways.
so we don't need to set "/assets/css/home.css"

to override any css
put your css below
any other css.
10. Query & String params:
10. Query & String params:
param & query param
code
check in inspect.
since we have
set that
with
note: here we create "--KEYS--" --- /<%= i.phone%>
and in home.ejs we get "--values--"
but
:phone
is creating a
key named value
and take values from a tag.
There was a query
here. <%= i.phone %>
method="GET"
controller takes the

values
as
{phone: Arpan}
value for controller to use
-- :phone -- here
Here, we are getting through

get method.
It reads only the data that is
submmited through the form.
like here a tag
uses
"get" method
to post.
query params:
same in
url
2.
Note: Now, You don't need to
put
1. app.get('/delete-contact/:phone/:name ', function)
3. since we have generated keys this ways.
we now don't have to write these

Keys in controller.
code
remove the name as keys.

12. Delete A Contact
note:
think what
array becomes
and what it returns.
ob
code
code

ExpressJs Handwritten Notes

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ExpressJs Handwritten Notes

Uploaded by

Copyright:

Available Formats

ExpressJs :

----> Unopinionated means, doesn't you HOW TO STRUCTURE YOUR

View: View is the file that is viewed by the users.

analyze the data

Express const app = express();

app.get('/', function(req, res){

practice.ejs is file app.get('/practice', (req, res)=> {

app.post('/contact-list', function(req, res){

app.get('/', function(req, res){

<form action="/contact-list" method="POST">

added the parser

3.added parse data to our Controller

note: After refreshing the

Express const app = express();

app.get('/', function(req, res){

practice.ejs is file app.get('/practice', (req, res)=> {

app.post('/contact-list', function(req, res){

app.get('/', function(req, res){

<form action="/contact-list" method="POST">

The next() in the Express router

Middleware functions can perform the following tasks:

Q. why is middle ware

myName is set over here in req body.

so we don't need to set "/assets/css/home.css"

controller takes the

Here, we are getting through

3. since we have generated keys this ways.

we now don't have to write these

remove the name as keys.

You might also like