After creating a backend RESTful API, I encountered difficulties while trying to access it.
To address this issue, I developed a database-connection.service specifically for making POST requests.
However, I am facing challenges in implementing this solution.
Below is the code snippet that I'm currently working with. Any insights on identifying and explaining the problem would be greatly appreciated...
+ app
|- app-routing.module.ts
|- app.component.css
|- app.component.html
|- app.component.spec.ts
|- app.component.ts
|- app.module.ts
|-+ homepage
|- homepage-routing.module.ts
|- homepage.module.ts
|-+ spelling-app
|- database-connection.service.ts
|- database-connection.service.spec.ts
|- spelling-app.module.ts
|- user.model.ts
|-+ intro-page
|- intro-page.component.ts
|- intro-page.component.css
|- intro-page.component.html
|- intro-page.component.spec.ts
spelling-app.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SpellingAppRoutingModule } from './spelling-app-routing.module';
import { IntroPageComponent } from './intro-page/intro-page.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
CommonModule,
SpellingAppRoutingModule,
FormsModule,
HttpClientModule
],
declarations: [IntroPageComponent]
})
export class SpellingAppModule { }
database-connection.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { User } from './user.model';
import { Observable } from 'rxjs';
@Injectable()
export class DatabaseConnectionService {
constructor(private http:HttpClient) { }
private httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
public addUser(user: User): Observable<User> {
return this.http.post<User>('http://localhost:8081/add-user', user, this.httpOptions)
}
}
intro-page.component.ts
import { Component, OnInit } from '@angular/core';
import { User } from '../user.model';
import { DatabaseConnectionService } from '../database-connection.service';
@Component({
selector: 'app-intro-page',
templateUrl: './intro-page.component.html',
styleUrls: ['./intro-page.component.css']
})
export class IntroPageComponent implements OnInit {
public results:any;
private user = new User();
constructor(
private DatabaseConnectionService: DatabaseConnectionService
) { }
ngOnInit() { }
callpost() {
this.results = this.DatabaseConnectionService.addUser(this.user);
}
}