Golang+Angular+MariaDB #9 Golang 데이터 불러오기

참고영상 : Consumindo uma (GO) API REST com Angular 7 Parte 1 # 25

 

myapp/src/app/app.modules.ts 수정

http 통신을 위한 모듈 추가

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);
      })
  }

}

 

프로젝트 테스트

별개의 cmd 창에서

Golang을 먼저 실행하신 후, Angular를 실행하는 것을 추천드립니다.

go run main.go
ng serve --open

 

Golang, Angular 실행화면

 

웹 Angular 실행화면