Summarizer Website using MEAN Stack
This article aims to develop a project using MEAN stack which will work as a summarizer website. MEAN stack technologies include MongoDB, AngularJS, NodeJS, and Express. It will give you a thorough understanding of how to create a MEAN stack application end to end from backend to frontend including the user authentication feature.
Output Preview: Let us have a look at how the final output will look like.
Prerequisites:
Approach to Create Summarizer Website using MEAN Stack:
Backend:
- Set up a new node js project
- Set up the server using express with CORS as the middleware in file server.js
- Create the app instance using const app = express()
- Create controllers folder which will define the methods required for servicing various routes
- Create models folder to create the database schema for summarized-text and user
- Create router folder and mention all the routes related to user login, register, getting and adding summarized text and deleting the summarized text
- Set up local Mongo DB database
- Set up the connection to local Mongo DB in server.js file
- Create collections within the database to store and retrieve the data from database
- Two collections are created – summarized-text, user
- Implement the core logic of creating the summary, getting the summarized text and user authentication
- Test the API endpoints using postman
Frontend:
- Create a new angular project
- Create components folder and seperate components for seperate routes
- Create HTML, CSS and ts files for all the components
- Create service to establish communication between frontend and backend routes
- Create various routes in app.routes.ts folder
- Test the frontend application in browser at https://localhost:3000
Steps to Create Backend and Installing Module:
Step 1: Create the main folder for complete project
mkdir summarized-text
cd summarized-text
Step 2: Initialize the node.js project
npm init -y
Step 3: Install the required dependencies
npm install express mongoose jsonwebtoken bcryptjs nodemon cors body-parser
Project Structure (Backend):
The updated dependencies in package.json file of backend will look like:
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.20.2",
"cors": "^2.8.5",
"express": "^4.18.3",
"jsonwebtoken": "^9.0.2",
"mongoose": "^8.2.2",
"natural": "^6.12.0",
"nodemon": "^3.1.0",
"stopword": "^3.0.1"
}
Example: Create the required files as seen on the project structure and add the following codes.
// authController.js
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const User = require('../model/authModel');
exports.register = async (req, res) => {
try {
const { username, email, password } = req.body;
let user = await User.findOne({ email });
if (user) {
return res.status(400).json({
message: "User Already Exist",
success: false
});
}
user = new User({
username: username,
email: email,
password: password
});
const salt = await bcrypt.genSalt(10);
user.password = await bcrypt.hash(password, salt);
await user.save();
const token = generateJwtToken(user.id);
res.status(201).json({
success: true,
token: token,
message: "User registered successfully"
});
}
catch (error) {
res.status(500).json({
message: "Server error! New user registration failed",
success: false
});
}
};
exports.login = async (req, res) => {
try {
const { email, password } = req.body;
const user = await User.findOne({ email });
if (!user) {
return res.status(400).json({
message: "Invalid credentials",
success: false
});
}
const isMatched = await bcrypt.compare(password,
user.password);
if (!isMatched) {
return res.status(400).json({
message: "Invalid credentials",
success: false
});
}
const token = generateJwtToken(user.id);
res.status(200).json({
success: true,
message: "User logged in successfully",
token: token
});
}
catch (error) {
return res.status(500).json({
success: false,
message: "Internal Server Error, Login unsuccessful"
});
}
};
function generateJwtToken(userID) {
const payload = {
user: {
id: userID
}
};
return jwt.sign(payload, 'jwtSecret', {
expiresIn: 3600
});
}
exports.getUserDetailsFronUserId = async (req, res) => {
try {
const { id } = req.params;
const user = await User.findById(id);
return res.status(200).json(user);
}
catch (error) {
res.status(500).json({
success: false,
message: error.message
});
}
};
// summarizeController.js
const { summarizeText } = require('../utils/utils');
const SummarizedText = require('../model/summarizeModel');
exports.getSummarizedTextByUserId = async (req, res) => {
const { userId } = req.params;
try {
const summarizedTexts = await SummarizedText.find({
user: userId
});
res.json({ summarizedTexts });
} catch (error) {
console.error('Error occurred while fetching summarized text:',
error);
res.status(500).json({
error: 'An error occurred while fetching summarized text'
});
}
};
exports.summarize = async (req, res) => {
const { text, userId, summaryLength } = req.body;
try {
const summarizedText = summarizeText(text, summaryLength);
const newSummarizedText = new SummarizedText({
user: userId,
originalText: text,
summarizedText: summarizedText
});
await newSummarizedText.save();
res.json({ summary: summarizedText });
} catch (error) {
console.error('Error occurred during text summarization:', error);
res.status(500).json({
error: 'An error occurred during text summarization'
});
}
};
exports.deleteSummarizedText = async (req, res) => {
const { textId } = req.params;
try {
const text = await SummarizedText.findOneAndDelete({ _id: textId });
console.log(text);
res.status(200).json({
success: true,
message: "Summary Text deleted successfully",
text: text
});
}
catch (error) {
res.status(500).json({
success: true,
message: error.message
});
}
};
// authModel.js
const mongoose = require('mongoose');
const userSchema = new mongoose.Schema({
username: {
type: String,
required: true
},
email: {
type: String,
required: true
},
password: {
type: String,
required: true
}
});
module.exports = mongoose.model('User', userSchema);
// summarizeModel.js
const mongoose = require('mongoose');
const User = require('../model/authModel');
const summarizedTextSchema = new mongoose.Schema({
user: {
type: mongoose.Schema.ObjectId,
ref: User,
required: true
},
originalText: {
type: String,
required: true
},
summarizedText: {
type: String,
required: true
}
});
module.exports = mongoose.model('SummarizedText', summarizedTextSchema);
// authRoutes.js
const express = require('express');
const router = express.Router();
const authController = require('../controller/authController');
router.post('/register', authController.register);
router.post('/login', authController.login);
router.get('/:id', authController.getUserDetailsFronUserId);
module.exports = router;
// summarizeRoutes.js
const express = require('express');
const router = express.Router();
const summarizeController = require('../controller/summarizeController');
router.get('/summarized-text/:userId', summarizeController.getSummarizedTextByUserId);
router.post('/summarized-text', summarizeController.summarize);
router.delete('/deleteText/:textId', summarizeController.deleteSummarizedText);
module.exports = router;
// utils.js
const natural = require('natural');
const sw = require('stopword');
function summarizeText(text, summaryLength) {
try {
const tokenizer = new natural.WordTokenizer();
const words = tokenizer.tokenize(text);
const stemmer = natural.PorterStemmer;
const stemWords = words.map(word => stemmer.stem(word));
const uniqueStemWords = Array.from(new Set(stemWords));
const key = sw.removeStopwords(uniqueStemWords);
const sentenceTokenizer = new natural.SentenceTokenizer();
const sentences = sentenceTokenizer.tokenize(text);
const rankedSentences = sentences.map((sentence, index) => ({
sentence,
index,
rank: rankSentence(sentence, key)
}));
rankedSentences.sort((a, b) => b.rank - a.rank);
const summarySentences = rankedSentences.slice(0,
Math.min(summaryLength, rankedSentences.length));
summarySentences.sort((a, b) => a.index - b.index);
const summary = summarySentences.map(s => s.sentence).join(' ');
return summary;
} catch (error) {
console.error('Error occurred during text summarization:', error);
throw error;
}
}
function rankSentence(sentence, keywords) {
const tokenizer = new natural.WordTokenizer();
const words = tokenizer.tokenize(sentence);
const stemmer = natural.PorterStemmer;
const stemmedWords = words.map(word => stemmer.stem(word));
const keywordCount = stemmedWords.reduce((count, word) => {
if (keywords.includes(word)) {
return count + 1;
}
return count;
}, 0);
return keywordCount;
}
module.exports = { summarizeText };
// server.js
const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose')
const summarizeRoute = require('../backend/route/summarizeRoute');
const authRoute = require('../backend/route/authRoute');
const app = express();
app.use(cors());
app.use(express.json());
mongoose.connect('mongodb://localhost:27017/summarize', {
family: 4
})
.then(() => console.log("Mongo DB connected"))
.catch(error => console.log(error));
app.use('/api/auth', authRoute);
app.use('/api/summarize', summarizeRoute);
const PORT = 5000;
app.listen(PORT, () => console.log(`Server started on port ${PORT}`));
To start the backend run the following command
nodemon server.js
Steps to Create a Angular App and Installing Module:
Step 1: Install the angular CLI
npm install -g @angular/cli
Step 2: Create a new angular project
ng new frontend
Step 3: Create components for different functionalities in angular
Syntax - ng generate component <component-name>
ng generate component auth
ng generate component add-summarizer
ng generate component summarizer
Step 4: Create services for communication between frontend and backend
ng generate service <service-name>
ng generate service auth
ng generate service summarizer
Project Structure (Frontend):
The updated dependencies in package.json file of frontend will look like:
"dependencies": {
"@angular/animations": "^17.2.0",
"@angular/common": "^17.2.0",
"@angular/compiler": "^17.2.0",
"@angular/core": "^17.2.0",
"@angular/forms": "^17.2.0",
"@angular/platform-browser": "^17.2.0",
"@angular/platform-browser-dynamic": "^17.2.0",
"@angular/platform-server": "^17.2.0",
"@angular/router": "^17.2.0",
"@angular/ssr": "^17.2.3",
"@auth0/angular-jwt": "^5.2.0",
"express": "^4.18.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
}
Example: Create the required files as seen in project structure and add the following codes.
<!-- auth.component.html -->
<div class="error-message" *ngIf="errorMessage">
{{ errorMessage }}
</div>
<div class="success-message" *ngIf="successMessage">
{{ successMessage }}
</div>
<div class="container" *ngIf="loginActive">
<h2>Login</h2>
<form (ngSubmit)="login()">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" [(ngModel)]="email" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="password" name="password" [(ngModel)]="password" required>
</div>
<button type="submit" class="btn btn-primary" href="getAllPosts">Login</button>
</form>
</div>
<div class="container" *ngIf="registerActive">
<h2>Register</h2>
<form (submit)="register()">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" class="form-control" [(ngModel)]="username" name="username" required />
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" class="form-control" [(ngModel)]="email" name="email" required />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" class="form-control" [(ngModel)]="password" name="password" required />
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
<!-- sidebar.component.html -->
<ul class="nav">
<li><a (click)="loadContent('summarizedText')">My Summarized Texts</a></li>
<li><a (click)="loadContent('summarizeHere')">Summarize Here</a></li>
</ul>
<!-- summarizer.component.html -->
<div *ngIf="summarizedTextList && summarizedTextList.length > 0; else noSummarizedTexts">
<div class="summary" *ngFor="let text of summarizedTextList; let i = index">
<div class="summary-content">
{{text.summarizedText}}
</div>
<button (click)="deleteSummarizedText(text._id)">Delete</button>
</div>
</div>
<ng-template #noSummarizedTexts>
<div class="no-summary-container">
<p>No Summarized Text available</p>
</div>
</ng-template>
<!-- add-summarizer.component.html -->
<div class="container">
<div class="input-section">
<label for="inputText">Enter Text to summarize</label>
<textarea class="input-text" name="inputText" id="inputText" [(ngModel)]="inputText" rows="10"
cols="50"></textarea>
<label for="length">Enter Summary Length</label>
<input class="summary-length" type="number" [(ngModel)]="summaryLength" placeholder="Enter summary length"
min="1" />
<button class="summarize-button" (click)="summarize()">Summarize</button>
</div>
<div class="summarized-text-section" *ngIf="summarizedText">
<h3>Summarized Text</h3>
<p>{{ summarizedText }}</p>
</div>
</div>
<!-- app.component.html -->
<nav class="navbar">
<div class="navbar-title">{{ title }}</div>
<ul class="navbar-menu">
<li><a href="#" (click)="login()" *ngIf="!isLoggedIn">Login</a></li>
<li><a href="#" (click)="register()" *ngIf="!isLoggedIn">Register</a></li>
<li><a href="#" (click)="logout()" *ngIf="isLoggedIn">Logout</a></li>
</ul>
</nav>
<div class="container">
<app-sidebar (contentLoad)="loadContent($event)"></app-sidebar>
<div class="content">
<router-outlet></router-outlet>
</div>
</div>
/* app.component.css */
.navbar {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5vmax 3vmax;
}
.navbar-title {
font-size: 1.7rem;
}
.navbar-menu {
list-style-type: none;
padding: 0;
margin: 0;
}
.navbar-menu li {
display: inline;
margin-right: 2vmax;
font-size: 1.3rem;
}
.navbar-menu li:last-child {
margin-right: 0;
}
.navbar-menu li a {
color: #fff;
text-decoration: none;
}
.navbar-menu li a:hover {
text-decoration: underline;
}
.container {
display: flex;
height: 100%;
min-height: 87vh;
margin-top: 0.4vmax;
}
.content {
flex: 1;
padding: 20px;
}
app-sidebar {
width: 25%;
background-color: #333;
padding: 20px;
color: white;
font-size: 1.4rem;
}
/* summarizer.component.css */
.summary {
border: 1px solid #ccc;
border-radius: 5px;
padding: 1vmax;
margin-bottom: 2vmax;
}
.summary-content {
margin-bottom: 1vmax;
}
button {
background-color: crimson;
padding: 0.4vmax;
color: white;
border: none;
border-radius: 4px;
}
.no-summary-container {
margin-top: 20px;
padding: 10px;
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
border-radius: 4px;
}
.no-summary-container p {
text-align: center;
margin: 0;
}
/* auth.component.css */
.container {
width: 50%;
margin: 2rem auto;
padding: 1.5vmax;
padding-right: 2.5vmax;
border: 1px solid #ccc;
border-radius: 5px;
}
h2 {
text-align: center;
margin-bottom: 20px;
font-size: 2rem;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 97%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button[type="submit"] {
width: 20%;
padding: 1.1vmax;
background-color: #0056b3;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
font-size: 1rem;
align-self: center;
margin-top: 1vmax;
}
.container {
width: 50%;
margin: 2rem auto;
padding: 1.5vmax;
padding-right: 3.5vmax;
border: 1px solid #ccc;
border-radius: 5px;
}
h2 {
text-align: center;
margin-bottom: 20px;
font-size: 2rem;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="email"],
input[type="password"] {
width: 99%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button[type="submit"] {
width: 20%;
padding: 1.1vmax;
background-color: #0056b3;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
font-size: 1rem;
align-self: center;
margin-top: 1vmax;
}
.error-message {
color: #FF0000;
background-color: #FFEFEF;
padding: 10px;
border: 1px solid #FF0000;
border-radius: 5px;
margin-bottom: 10px;
}
.success-message {
color: green;
background-color: rgb(185, 231, 185);
padding: 10px;
border: 1px solid green;
border-radius: 5px;
margin-bottom: 10px;
}
/* add-summarizer.component.css */
.container {
max-width: 70%;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
.input-section {
margin-bottom: 20px;
}
.input-section label {
display: block;
font-weight: bold;
margin-bottom: 5px;
margin-top: 1vmax;
}
.input-section textarea {
width: 98%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
text-align: justify;
}
.input-section input[type="number"] {
width: 98%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.input-section button {
padding: 10px 20px;
background-color: #0056b3;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 3vmax;
width: 30%;
font-weight: 700;
font-size: 1rem;
}
.summarized-text-section {
margin-top: 20px;
}
.summarized-text-section h3 {
font-size: 24px;
margin-bottom: 10px;
}
.summarized-text-section p {
font-size: 16px;
line-height: 1.6;
text-align: justify;
}
/* sidebar.component.css */
ul {
border: 1px solid lightgray;
margin-top: 0%;
border-radius: 10px;
}
li {
list-style-type: none;
margin: 3vmax;
cursor: pointer;
box-sizing: border-box;
}
li:hover {
color: lightgray;
}
a {
color: lightgray;
text-decoration: none;
}
a:hover {
color: white;
text-decoration: none;
}
// auth.component.ts
import { Component } from '@angular/core';
import { AuthService } from '../../service/auth.service';
import { SharedService } from '../../service/shared.service';
import { Router } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-auth',
standalone: true,
imports: [FormsModule, CommonModule],
templateUrl: './auth.component.html',
styleUrl: './auth.component.css'
})
export class AuthComponent {
username!: string;
email!: string;
password!: string;
credentials: any = {};
successMessage: string = '';
errorMessage: string = '';
loginActive: boolean = true;
registerActive: boolean = false;
constructor(private authService: AuthService,
private router: Router,
private sharedService: SharedService) { }
ngOnInit(): void {
this.sharedService.loginEvent.subscribe(() => {
this.errorMessage = "";
this.successMessage = "";
this.loginActive = true;
this.registerActive = false;
});
this.sharedService.registerEvent.subscribe(() => {
this.errorMessage = "";
this.successMessage = "";
this.registerActive = true;
this.loginActive = false;
});
}
login(): void {
const credentials = {
email: this.email,
password: this.password
};
this.authService.login(credentials).subscribe(
(response: any) => {
const token = response.token;
localStorage.setItem("token", token);
this.authService.emitLoggedInEvent();
this.loginActive = false;
this.registerActive = false;
this.email = "";
this.password = "";
this.successMessage = response.message;
this.router.navigate(["/summarized-text"]);
},
(error: any) => {
console.error('Error logging in:', error);
this.errorMessage = "Login unsuccessfull ! Please reload or try in incognito tab";
}
);
this.errorMessage = "";
this.successMessage = "";
this.email = "";
this.password = "";
}
register(): void {
const userData = {
username: this.username,
email: this.email,
password: this.password
};
this.authService.register(userData).subscribe(
(response: any) => {
this.successMessage = response.message;
this.loginActive = true;
this.registerActive = false;
this.username = '';
this.email = '';
this.password = '';
},
(error: any) => {
console.error(error);
this.errorMessage = "User not registered successfully";
}
);
this.username = "";
this.email = "";
this.password = "";
}
}
// sidebar.component.ts
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-sidebar',
standalone: true,
imports: [],
templateUrl: './sidebar.component.html',
styleUrl: './sidebar.component.css'
})
export class SidebarComponent {
isLoggedIn: boolean = true;
constructor() { }
ngOnInit(): void {
if (typeof localStorage !== 'undefined') {
const token = localStorage.getItem('token');
if (token) {
this.isLoggedIn = true;
}
}
}
@Output() contentLoad = new EventEmitter<string>();
loadContent(page: any) {
console.log("Event emit");
this.contentLoad.emit(page);
}
}
// summarizer.component.ts
import { Component } from '@angular/core';
import { SummarizerService } from '../../service/summarizer.service';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { AuthService } from '../../service/auth.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-summarizer',
standalone: true,
imports: [FormsModule, CommonModule],
templateUrl: './summarizer.component.html',
styleUrl: './summarizer.component.css'
})
export class SummarizerComponent {
inputText: string = '';
summarizedText: string = '';
userId: any = "";
summarizedTextList: any[] = [];
constructor(
private summarizerService: SummarizerService,
private router: Router) { }
ngOnInit(): void {
this.userId = this.getUserId();
if (this.userId) {
this.getSummarizedText(this.userId);
}
}
getUserId(): string | null {
if (typeof localStorage !== 'undefined') {
const token = localStorage.getItem('token');
if (token) {
const tokenPayload = JSON.parse(atob(token.split('.')[1]));
return tokenPayload.user.id;
}
}
return null;
}
getSummarizedText(userId: string) {
this.summarizerService.getSummarizedText(userId)
.subscribe((response: any) => {
this.summarizedTextList = response.summarizedTexts;
}, (error: any) => {
console.error('Error occurred:', error);
});
}
async deleteSummarizedText(textId: string) {
await this.summarizerService.deleteSummarizedText(textId)
.subscribe((response: any) => {
console.log("Summary Text Deleted Successfully");
this.getSummarizedText(this.userId);
}, (error: any) => {
console.log('Error occured', error);
});
}
}
// add-summarizer.component.ts
import { Component } from '@angular/core';
import { SummarizerService } from '../../service/summarizer.service';
import { AuthService } from '../../service/auth.service';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-add-summarizer',
standalone: true,
imports: [FormsModule, CommonModule],
templateUrl: './add-summarizer.component.html',
styleUrl: './add-summarizer.component.css'
})
export class AddSummarizerComponent {
inputText: string = '';
summarizedText: string = '';
userId: any = "";
summaryLength: number = 1;
constructor(private summarizerService: SummarizerService,
private authService: AuthService) { }
ngOnInit(): void {
}
getUserId(): string | null {
if (typeof localStorage !== 'undefined') {
const token = localStorage.getItem('token');
if (token) {
const tokenPayload = JSON.parse(atob(token.split('.')[1]));
return tokenPayload.user.id;
}
}
return null;
}
summarize() {
if (this.getUserId() && this.getUserId() !== "") {
this.userId = this.getUserId();
}
this.summarizerService.summarizeText(this.inputText,
this.userId, this.summaryLength)
.subscribe((response: any) => {
this.summarizedText = response.summary;
}, (error: any) => {
console.error('Error occurred:', error);
});
}
}
// app.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Router, RouterOutlet } from '@angular/router';
import { AuthService } from '../app/service/auth.service';
import { SharedService } from './service/shared.service';
import { SidebarComponent } from './component/sidebar/sidebar.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, FormsModule, CommonModule, SidebarComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'w3wiki Summarizer';
isLoggedIn: boolean = false;
constructor(private router: Router,
private authService: AuthService,
private sharedService: SharedService) { }
ngOnInit(): void {
this.authService.loggedInEvent.subscribe((data: any) => {
this.isLoggedIn = true;
});
if (typeof localStorage !== 'undefined' &&
localStorage.getItem('token')) {
this.isLoggedIn = true;
}
}
login(): void {
this.sharedService.triggerLoginEvent();
this.router.navigate(["/"]);
}
register(): void {
this.sharedService.triggerRegisterEvent();
this.router.navigate(["/"]);
}
logout(): void {
this.isLoggedIn = false;
localStorage.removeItem('token');
this.router.navigate(["/"]);
}
loadContent(page: any) {
if (page === "summarizedText") {
this.router.navigate(["/getSummarizedText"]);
}
else if (page === "summarizeHere") {
this.router.navigate(["/summarized-text"]);
}
}
}
// app.routes.ts
import {
Routes
} from '@angular/router';
import {
AuthComponent
} from './component/auth/auth.component';
import {
SummarizerComponent
} from './component/summarizer/summarizer.component';
import {
AddSummarizerComponent
} from './component/add-summarizer/add-summarizer.component';
export const routes: Routes = [
{ path: "", component: AuthComponent },
{
path: "summarized-text",
component: AddSummarizerComponent
},
{
path: "getSummarizedText",
component: SummarizerComponent
}
];
// app.module.ts
import {
InjectionToken,
NgModule
} from '@angular/core';
import {
BrowserModule
} from '@angular/platform-browser';
import {
FormsModule
} from '@angular/forms';
import {
AppComponent
} from './app.component';
import {
JwtHelperService,
JWT_OPTIONS
} from '@auth0/angular-jwt';
import {
RouterModule
} from '@angular/router';
import {
routes
} from './app.routes';
import {
AuthComponent
} from './component/auth/auth.component';
import {
SummarizerComponent
} from './component/summarizer/summarizer.component';
import {
SidebarComponent
} from './component/sidebar/sidebar.component';
import {
AddSummarizerComponent
} from './component/add-summarizer/add-summarizer.component';
@NgModule({
declarations: [
AppComponent,
AuthComponent,
SummarizerComponent,
SidebarComponent,
AddSummarizerComponent
],
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(routes),
],
exports: [RouterModule],
providers: [{
provide: JWT_OPTIONS,
useValue: JWT_OPTIONS
}, JwtHelperService],
bootstrap: [AppComponent]
})
export class AppModule { }
// shared.service.ts
import {
EventEmitter,
Injectable
} from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class SharedService {
loginEvent: EventEmitter<void> = new EventEmitter<void>();
registerEvent: EventEmitter<void> = new EventEmitter<void>();
constructor() { }
triggerLoginEvent(): void {
this.loginEvent.emit();
}
triggerRegisterEvent(): void {
this.registerEvent.emit();
}
}
// auth.service.ts
import { HttpClient } from '@angular/common/http';
import { EventEmitter, Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthService {
private baseUrl = 'http://localhost:5000/api/auth';
constructor(private httpClient: HttpClient) { }
register(userData: any): Observable<any> {
return this.httpClient.post(`${this.baseUrl}/register`,
userData);
};
login(credentials: any): Observable<any> {
return this.httpClient.post(`${this.baseUrl}/login`,
credentials);
};
loggedInEvent: EventEmitter<any> = new EventEmitter();
emitLoggedInEvent() {
this.loggedInEvent.emit();
}
}
// summarizer.service.ts
import {
HttpClient,
HttpHeaders
} from '@angular/common/http';
import {
Injectable
} from '@angular/core';
import {
Observable
} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class SummarizerService {
private baseUrl = "http://localhost:5000/api/summarize";
constructor(private http: HttpClient) { }
summarizeText(inputText: string,
userId: string,
summaryLength: number): Observable<any> {
return this.http.post<any>(`${this.baseUrl}/summarized-text`, {
text: inputText,
userId: userId,
summaryLength: summaryLength
});
}
getSummarizedText(userId: string): Observable<any> {
return this.http.get<any>(`${this.baseUrl}/summarized-text/${userId}`);
}
deleteSummarizedText(textId: string): Observable<void> {
return this.http.delete<void>(`${this.baseUrl}/deleteText/${textId}`);
}
}
Contact Us