...
export class UserService {
...
constructor(private http: HttpClient) { ... }
public getUsers() { ... }
// 코드 추가
public getUser(id: string) {
// 특정 user의 데이터를 Get
return this.http.get(`${this.Uri}/${id}`);
}
// 코드 추가
public postUser(user: any) {
user.id = this.nextUserId;
// form을 통해 전달 받은 값을 저장
let data = {
"id" : user.id,
"name" : user.name,
"email" : user.email,
"password" : user.password
};
// data에 저장된 데이터를 JOSN 형식으로 변경하여,
// Uri로 Post 진행
// Return 값은 Response가 반환됨
return this.http.post(this.Uri, JSON.stringify(data));
}
}
src/app/app.component.ts 수정
...
export class AppComponent {
...
constructor(public service: UserService) { ... }
public onSubmit(form: FormGroup) {
console.log(form.value)
// 코드 추가
if( form.value.id == null) {
// postUser 서비스 함수 이용
this.service.postUser(form.value)
.subscribe((resp) => {
console.log(resp)
// Response를 통해 전달 받은 Status가 201일 경우,
// user 데이터를 갱신
if(resp["Status"] == 201) {
this.service.getUsers()
.subscribe((data) => this.users = data);
}
})
}
}
}
src/app/app.component.html 수정
<div class="container">
<header>
...
</header>
<hr>
<div class="row">
<div class="col-md-12">
<h3>Insert User Data</h3>
<form method="post" #form="ngForm" (ngSubmit)="onSubmit(form)">
<input type="hidden" name="id" [(ngModel)]="service.selectedUser.id">
<div class="form-group">
<label for="name">Name : </label>
<!-- 입력 여부를 파악하기 위한 구분자 required 추가 -->
<input type="text" name="name" id="name" class="form-control" placeholder="insert your name" [(ngModel)]="service.selectedUser.name" required >
</div>
<div class="form-group">
<label for="email">Email : </label>
<!-- 입력 여부를 파악하기 위한 구분자 required 추가 -->
<input type="text" name="email" id="email" class="form-control" placeholder="insert your email" [(ngModel)]="service.selectedUser.email" required>
</div>
<div class="form-group">
<label for="password">Password : </label>
<!-- 입력 여부를 파악하기 위한 구분자 required 추가 -->
<input type="text" name="password" id="password" class="form-control" placeholder="insert your password" [(ngModel)]="service.selectedUser.password" required>
</div>
<div class="form-row">
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<!-- [disabled]="!form.valid : 미입력한 항목(required)이 있을 경우, disable 처리 -->
<button class="btn btn-sm btn-block btn-primary col-lg-2" [disabled]="!form.valid" >submit</button>
<button class="btn btn-sm btn-block btn-secondary col-lg-2">clear</button>
</div>
</div>
</form>
</div>
</div>
<br>
<div class="row">
...
</div>
</div>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// 코드 추가
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule // 코드 추가
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
angular service 추가
user라는 이름을 가진 service를 추가
ng g service user
cmd 결과 화면
파일 생성 결과 화면
src/app/user.service.ts 수정
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class UserService {
private Uri : string = "http://localhost:3000/users";
public selectedUser = null;
public nextUserId = null;
constructor(private http: HttpClient) {
// getUsers함수를 통해 전달 받은 Return 값에서
// user 등록시, 다음 등록될 userID에 대한 값을 체크
this.getUsers()
.subscribe((data) => {
this.nextUserId = (data[ data.length -1].id +1);
console.log("ID disponivel : " + this.nextUserId);
});
}
// Uri를 통해 전달 받은 JSON 데이터를 Return
public getUsers() {
return this.http.get<Array<any>>(this.Uri);
}
}
src/app/app.component.ts 수정
import { Component } from '@angular/core';
// import 추가
import { UserService } from './user.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
// 수정
export class AppComponent {
title = 'myApp';
users: Array<any> = [];
constructor(public service: UserService) {
// getUsers함수를 통해 전달 받은 Return 값을
// users 배열에 저장
this.service.getUsers()
.subscribe((data) => {
this.users = data;
console.log(this.users);
})
}
}
