FACULTY OF ENGINEERING AND TECHNOLOGY

Subject Name: MSWD LAB

Subject Code: 203105380
B.Tech. 3rd year 6TH semester

Practical 9

Aim: - To Create a simple login form using Angular Framework. “

Src/main.ts ”

import { platformBrowserDynamic } from '@angular/platformbrowser-dynamic';

import { AppModule } from './app/app.module'; import axios

from 'axios'; import { environment } from
'./environments/environment.development';

axios.defaults.baseURL = environment.apiUrl

axios.interceptors.request.use(function (config) { config.headers['X-

Binarybox- Api-Key'] = environment.apiKey return config;
});
platformBrowserDynamic().bootstrapModule(AppModule) .catch(err =>
console.error(err));

“ login.component.ts “

import { Component, OnInit } from '@angular/core'; import {

UserAuthService } from '../user-auth.service'; import { Router } from '@angular/router';

@Component({ selector: 'app- login',

templateUrl: './login.component.html', styleUrls:
['./login.component.css'] }) export class
LoginComponent implements OnInit{
email:string = '' password:string = '' isSubmitting:boolean = false
validationErrors:Array<any> = []

1
 FACULTY OF ENGINEERING AND
TECHNOLOGY
Subject Name: MSWD LAB
Subject Code: 203105380
B.Tech. 3rd year 6TH semester

ngOnInit(): void { if(localStorage.getItem('token') != "" &&

localStorage.getItem('token') != null){
this.router.navigateByUrl('/dashboard')
} } loginAction() {
this.isSubmitting = true;
let payload = { email:this.email, password:
this.password,
}
this.userAuthService.login(payload)
.then(({data}) => { localStorage.setItem('token',
data.token)
this.router.navigateByUrl('/dashboard') return data
}).catch(error => { this.isSubmitting = false; if (error.response.data.errors
!= undefined) { this.validationErrors =
error.response.data.message
}
if (error.response.data.error != undefined) { this.validationErrors =
error.response.data.error
} return error
})
}
}
“reg.component.ts “
import { Component, OnInit } from '@angular/core'; import {
UserAuthService } from '../user-auth.service'; import { Router } from
'@angular/router';
@Component({ selector: 'app-register', templateUrl:
'./register.component.html', styleUrls:
['./register.component.css']
})
export class RegisterComponent implements OnInit{ name:string
= '' email:string = '' password:string = '' confirmPassword:string
= '' isSubmitting:boolean = false validationErrors:any = []
constructor(public userAuthService: UserAuthService, private router: Router) {}

ngOnInit(): void {
if(localStorage.getItem('token') != "" && localStorage.getItem('token') != null){
this.router.navigateByUrl('/dashboard')
}
} registerAction() { this.isSubmitting
= true; let payload =
{ name:this.name,
email:this.email, password:this.password,
confirmPassword:this.confirmPassword

2
 FACULTY OF ENGINEERING AND
TECHNOLOGY
Subject Name: MSWD LAB
Subject Code: 203105380
B.Tech. 3rd year 6TH semester

}
this.userAuthService.register(payload)
.then(({data}) => { localStorage.setItem('token',
data.token)
this.router.navigateByUrl('/dashboard') return data }).catch(error => {
this.isSubmitting = false; if (error.response.data.errors != undefined) {
this.validationErrors =
error.response.data.errors
} return
error
})
}
}

“ app.module.ts “

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser'; import {
FormsModule, ReactiveFormsModule } from
'@angular/forms';
import { AppRoutingModule } from './app-routing.module'; import {
AppComponent } from './app.component'; import { LoginComponent } from
'./login/login.component'; import { RegisterComponent } from
'./register/register.component'; import { DashboardComponent } from
'./dashboard/dashboard.component';
@NgModule({ declarations:
[
AppComponent,
LoginComponent,
RegisterComponent,
DashboardComponent
], imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule
], providers: [], bootstrap:
[AppComponent]
}) export class AppModule
{}

“ app-routing-module.ts “

3
 FACULTY OF ENGINEERING AND
TECHNOLOGY
Subject Name: MSWD LAB
Subject Code: 203105380
B.Tech. 3rd year 6TH semester

import { NgModule } from '@angular/core'; import { RouterModule, Routes }

from '@angular/router'; import { LoginComponent } from
'./login/login.component'; import { RegisterComponent } from
'./register/register.component'; import { DashboardComponent } from
'./dashboard/dashboard.component';

const routes: Routes = [

{ path: '', redirectTo: 'login', pathMatch: 'full'},
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
{ path: 'dashboard', component: DashboardComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)], exports: [RouterModule]
})
export class AppRoutingModule { }
OUTPUT:-

4
 FACULTY OF ENGINEERING AND
TECHNOLOGY
Subject Name: MSWD LAB
Subject Code: 203105380
B.Tech. 3rd year 6TH semester

Practical 10

Aim: - Demonstrating a CRUD Api With the help of Angular, Node and
MongoDB.

“ Create.comp.ts ”

import { Component, OnInit } from '@angular/core'; import { StudentService }

from 'src/app/student.service'; import { Router } from '@angular/router'; import
{ FormGroup, FormControl, Validators } from

@angular/forms';
@Component({ selector: 'app-create',
templateUrl: './create.component.html', styleUrls:
['./create.component.css']
}) export class CreateComponent { form!:FormGroup;
//Contructor constructor( public
studentService: StudentService, private router: Router
) { } ngOnInit(): void { this.form = new FormGroup({ id: new
FormControl('', [Validators.required]), title: new FormControl('',
[Validators.required]), body: new FormControl('', Validators.required) });
} get
frmctl(){
return this.form.controls;
} submit(){ console.log(this.form.value);
this.studentService.create(this.form.value).subscribe((r es:any) =>
{ console.log('Student created successfully!');
this.router.navigateByUrl('student/index');
})
}
}

“ Index.comp.ts ”

5
 FACULTY OF ENGINEERING AND
TECHNOLOGY
Subject Name: MSWD LAB
Subject Code: 203105380
B.Tech. 3rd year 6TH semester

import { Component } from '@angular/core'; import { StudentService } from

'src/app/student.service'; import { Student } from '../student';

@Component({ selector: 'app-index',

templateUrl: './index.component.html', styleUrls:
['./index.component.css']
}) export class IndexComponent { students: Student[] = [];
constructor(public studentService: StudentService) { } ngOnInit():
void { this.studentService.getAll().subscribe((data:
Student[])=>{ this.students
= data;
})

}
deleteStudent(id:number){ this.studentService.delete(id).subscribe(res
=> { this.students = this.students.filter(item => item.id !== id);
console.log('Student deleted successfully!'); })
}
}

“ Update.comp.ts ”

import { Component, OnInit } from '@angular/core'; import { StudentService }

from 'src/app/student.service'; import { ActivatedRoute, Router } from
'@angular/router'; import { Student } from '../student'; import
{ FormGroup, FormControl, Validators}
from '@angular/forms';

@Component({ selector: 'app-update', templateUrl:

'./update.component.html', styleUrls:
['./update.component.css']
}) export class UpdateComponent implements OnInit { id!:
number; student!:
Student; form!:
FormGroup; constructor( public
studentService: StudentService,
private route: ActivatedRoute, private router: Router
){}

6
 FACULTY OF ENGINEERING AND
TECHNOLOGY
Subject Name: MSWD LAB
Subject Code: 203105380
B.Tech. 3rd year 6TH semester

ngOnInit(): void { this.id = this.route.snapshot.params['studentId'];

this.studentService.find(this.id).subscribe((data: Student)=>{
this.student
= data;
}); this.form = new FormGroup({ title: new FormControl('',
[Validators.required]), body: new FormControl('',
Validators.required)
});
} get frmctl(){ return
this.form.controls;

} submit(){ console.log(this.form.value);
this.studentService.update(this.id, this.form.value).subscribe((res:any) =>
{ console.log('Student updated successfully!');
this.router.navigateByUrl('student/index');
})
}}

“ Student.Routing.module.ts ”

import { NgModule } from '@angular/core'; import {

RouterModule, Routes } from '@angular/router';
import { IndexComponent } from './index/index.component'; import
{ ViewComponent } from './view/view.component'; import {
CreateComponent } from './create/create.component'; import {
UpdateComponent } from './update/update.component'; const
routes: Routes = [ { path:
'student', redirectTo:
'student/index', pathMatch:
'full'},
{ path: 'student/index', component: IndexComponent }, {
path: 'student/:studentId/view', component:
ViewComponent },
{ path: 'student/create', component: CreateComponent }, {
path: 'student/:studentId/edit', component:
UpdateComponent }
];

@NgModule({ imports: [RouterModule.forChild(routes)], exports:

[RouterModule]
}) export class StudentRoutingModule { }

7
 FACULTY OF ENGINEERING AND
TECHNOLOGY
Subject Name: MSWD LAB
Subject Code: 203105380
B.Tech. 3rd year 6TH semester

“ Main.ts ”
import { platformBrowserDynamic } from '@angular/platformbrowser-
dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

-:OutPut:-

8
 FACULTY OF ENGINEERING AND
TECHNOLOGY
Subject Name: MSWD LAB
Subject Code: 203105380
B.Tech. 3rd year 6TH semester

uPDate stuDent Data