Embedded javascript template
Hello viewers, whats up!! Here i am back again with the new series of Nodejs. Node.js is an open-source, cross-platform JavaScript runtime environment that allows developers to run JavaScript code outside of a web browser. It is built on the V8 JavaScript runtime engine, which is the same engine that powers the Google Chrome browser.
Node.js is commonly used for building APIs (Application Programming Interfaces). You can create RESTful APIs or GraphQL APIs using Node.js to handle HTTP requests and serve data to client applications.
Key features of Node.js include:
# Asynchronous - Node.js is designed to be asynchronous, meaning it can
handle a large number of concurrent connections without the need for
multithreading.
# Single-threaded, Non-blocking I/O -
Node.js uses a single-threaded event loop to manage asynchronous
operations.
# npm (Node Package Manager): npm is the default
package manager for Node.js, allowing developers to easily manage and install
libraries and dependencies for their projects.
# Server-Side Development: Node.js is commonly used for server-side development, where it excels at
handling real-time, data-intensive applications, such as chat applications,
online gaming, and streaming services.
But Why we are using Expressjs Here, just because of incase if
you want to make API using nodejs directly then
its a very complex method to create API and integrate directly thats why we
are using Expressjs framework and in this framework with the help, you
can create RESTful API easily.
Why we need of EJS ?
Here we gonna discuss about ejs template because of you are all aware about our previous blog where we have to written static page name where we don't need to implement database and in static page for not possible but for this template you can Database connectivity with dynamic page.
Install EJS
With this command npm i ejs, you can install ejs template.
In this nodejs we are not less make dynamic website but 95% we can say make API in nodejs but you need to aware all about that.
Setup Dynamic Routing
First we set ejs template in our index.js to tell about ejs and we will use.
app.set('view engine', 'ejs');
Now we will make folder name as views (by default configuration name views). So, don't change the name and make HTML Code.
Now we can consider profile page in index.js page so in this time we will
write (resp.render) except resp.sendFile. Otherwise
DON'T FORGET TO VISIT OUR PREVIOUS BLOG - CLICK HERE
app.get('/profile',(__,resp) => { resp.render('profile'); })
WAIT WAIT WAIT - This is not dynamic page...oh oh ho :-)
When we connect mongodb database then we will make dynamic through get data
from database but dont worry at this time. we will get data from
index.js file and write an object and after that get data in
profile.ejs
app.get('/profile',(__,resp) => { const user = { name: 'atul', email: 'kumaratuljaiswal222@gmail.com', city: 'hyderabad' } resp.render('profile', {user}); })
Whole Code (index.js)
const express = require('express') const path = require('path') const app = express(); const publicPath = path.join(__dirname, 'public'); app.set('view engine', 'ejs'); app.get('',(__,resp) =< { resp.sendFile(`${publicPath}/home.html`) }) app.get('/profile',(__,resp) =< { const user = { name: 'atul', email: 'kumaratuljaiswal222@gmail.com', city: 'hyderabad', skills: ['php', 'js', 'reactjs', 'nodejs'] } resp.render('profile', {user}); }) app.get('/about',(__,resp) =< { resp.sendFile(`${publicPath}/about.html`) }) app.get('/contact',(__,resp) =< { resp.sendFile(`${publicPath}/contact.html`) }) app.get('*',(__,resp) =< { resp.sendFile(`${publicPath}/404.html`) }) app.listen(5000)
Get Data in Profile.ejs
Escaped output with <%= %> (escape function configurable)
For more info (
https://www.npmjs.com/package/ejs
)
<!DOCTYPE html> <html lang="en"> <head> <title>Profile Page (EJS)</title> </head> <body> <h1>Welcome <%= user.name %></h1> <!-- <h1>EmailID <%= user.email %></h1> <h1>City <%= user.city %></h1> --> </body> </html>
Loop in ejs embedded javascript template
# Install redux and saga packages - CLICK HERE
# Make reducer wrapper - CLICK HERE
# Action in reducer - CLICK HERE
# Reducer in redux -
CLICK HERE
# Switch Stmt in redux -
CLICK HERE
# Get data in component from redux - CLICK HERE
# Remove from cart - CLICK HERE
# Add Redux Toolkit in react redux saga - CLICK HERE
# Configure MiddleWare saga - CLICK HERE
# Call API with Saga and Set Result in react redux saga - CLICK HERE
# Product list ui with API data in react redux saga - CLICK HERE
# Remove to Cart with ID react redux saga - CLICK HERE
# Add Routing and Make Cart Page - CLICK HERE
# Show Added To Cart Product with Price Calculation -
CLICK HERE
Disclaimer
0 comments:
Post a Comment
For Any Tech Updates, Hacking News, Internet, Computer, Technology and related to IT Field Articles Follow Our Blog.