Golang+Angular+MariaDB #11 입력을 위한 Form 세팅

Development/Go+Angular+MariaDB 2021. 2. 2. 22:24 |
728x90

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

 

더보기

src/app/app.module.ts 수정

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http'; 

// 코드 추가
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule   // 코드 추가
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

src/app/app.component.ts 수정

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

import { UserService } from './user.service';

// 코드 추가
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myApp';
   
  users: Array<any> = [];
 
  constructor(public service: UserService) {
    this.service.getUsers()
      .subscribe((data) => {
        this.users = data;
        console.log(this.users);
      })

      // 코드 추가
      this.service.selectedUser = {
        "id": null,
        "name": '',
        "email": '',
        "password": ''
      };

  }

  // 코드 추가
  public onSubmit(form: FormGroup) {
 
    console.log(form.value)
 
  }

}

 

src/app/app.component 수정

<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>
          <input type="text" name="name" id="name" class="form-control" placeholder="insert your name" [(ngModel)]="service.selectedUser.name">
        </div> 
        <div class="form-group">
          <label for="email">Email : </label>
          <input type="text" name="email" id="email" class="form-control" placeholder="insert your email" [(ngModel)]="service.selectedUser.email">
        </div>
        <div class="form-group">
          <label for="password">Password : </label>
          <input type="text" name="password" id="password" class="form-control" placeholder="insert your password" [(ngModel)]="service.selectedUser.password">
        </div>
 
        <div class="form-row">
          <div class="col-lg-8"></div>
          <div class="col-lg-2">
            <button class="btn btn-sm btn-block btn-primary">submit</button>
          </div>
          <div class="col-lg-2">
            <button class="btn btn-sm btn-block btn-secondary">clear</button>
          </div>
        </div>
 
      </form>
    </div>
  </div>
  
  <br>
  <div class="row">
    ...
</div>

 

Web 결과화면

 

참고영상과는 다르게 실행화면에서는 버튼이 멋대로 표시되고 있습니다.

원인을 찾을 수 없기에, 그냥 하는 걸로..... ㅜㅜ

 

그래도 괜찮은 것을 사용하시고 싶으시다면, 아래 Source를 이용하시기 바랍니다.

<div class="form-row"></div> 사이에 넣으시면 됩니다.

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
	<button class="btn btn-sm btn-block btn-primary col-lg-2">submit</button>
	<button class="btn btn-sm btn-block btn-secondary col-lg-2">clear</button>
</div>
728x90
저작자표시 비영리 변경금지

'Development > Go+Angular+MariaDB' 카테고리의 다른 글

Golang+Angular+MariaDB #13 Font Awesome 아이콘 적용  (0) 2021.02.03
Golang+Angular+MariaDB #12 User 정보 등록  (0) 2021.02.03
Golang+Angular+MariaDB #10 Bootstrap 적용  (0) 2021.02.02
Golang+Angular+MariaDB #9 Golang 데이터 불러오기  (0) 2021.02.02
Golang+Angular+MariaDB #8 Angular 기본 세팅  (0) 2021.02.02
Posted by 게으른거북
:

Golang+Angular+MariaDB #10 Bootstrap 적용

Development/Go+Angular+MariaDB 2021. 2. 2. 19:33 |
728x90

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

 

더보기

Bootstrap 코드 복사 (링크)

Get Started 선택
CSS와 JS를 복사

src/index.html 수정

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  
  
</head>
<body>
  <app-root></app-root>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>

<head> </head> 사이에 복사한 link를
<body> </body> 사이에 복사한 script를 붙여넣습니다.

 

src/app/app.component 수정

<div class="container">
  <header>
  	<nav>
      <ul class="nav justify-content-end">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </nav>
  </header>
  
  <hr>
 
  <div class="row">
    <div clas="col-md-12" *ngIf="users">
       <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Password</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let user of users">
            <td>{{ user.id }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.password }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<tr *ngFor="let user of users">

전달 받은 users 배열 데이터를 ng-for문으로 반복진행합니다.

 

 

실행화면
728x90
저작자표시 비영리 변경금지

'Development > Go+Angular+MariaDB' 카테고리의 다른 글

Golang+Angular+MariaDB #12 User 정보 등록  (0) 2021.02.03
Golang+Angular+MariaDB #11 입력을 위한 Form 세팅  (0) 2021.02.02
Golang+Angular+MariaDB #9 Golang 데이터 불러오기  (0) 2021.02.02
Golang+Angular+MariaDB #8 Angular 기본 세팅  (0) 2021.02.02
Golang+Angular+MariaDB #7 Handlers CORS 세팅  (0) 2021.02.02
Posted by 게으른거북
:

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

Development/Go+Angular+MariaDB 2021. 2. 2. 13:13 |
728x90

참고영상 : 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 실행화면
728x90
저작자표시 비영리 변경금지

'Development > Go+Angular+MariaDB' 카테고리의 다른 글

Golang+Angular+MariaDB #11 입력을 위한 Form 세팅  (0) 2021.02.02
Golang+Angular+MariaDB #10 Bootstrap 적용  (0) 2021.02.02
Golang+Angular+MariaDB #8 Angular 기본 세팅  (0) 2021.02.02
Golang+Angular+MariaDB #7 Handlers CORS 세팅  (0) 2021.02.02
Golang+Angular+MariaDB #6 Response 세팅  (0) 2021.02.01
Posted by 게으른거북
:

Golang+Angular+MariaDB #8 Angular 기본 세팅

Development/Go+Angular+MariaDB 2021. 2. 2. 12:20 |
728x90

참고영상 : Como Programar uma API REST em Golang Parte 7 - HANDLERS CORS - Iniciando

 

더보기

프로젝트 환경 세팅

node.js, npm, angular를 기본적으로 세팅한 상태에서 진행하겠습니다.

cmd 창에서 angular 프로젝트를 myapp 으로 생성.

cd workspace/angular
ng new myapp

 

No -> No -> CSS 선택

cmd - angular 프로젝트 설정

 

Angular 테스트

폴더로 이동하여, 실행 명령어를 입력해줍니다.

cd myapp
ng serve --open

 

잠시 기다려 주면, 아래와 같이 실행화면이 띄워집니다.

웹페이지가 실행이 안될 경우, localhost:4200 을 들어가시면 됩니다.

angular 실행화면
728x90
저작자표시 비영리 변경금지

'Development > Go+Angular+MariaDB' 카테고리의 다른 글

Golang+Angular+MariaDB #10 Bootstrap 적용  (0) 2021.02.02
Golang+Angular+MariaDB #9 Golang 데이터 불러오기  (0) 2021.02.02
Golang+Angular+MariaDB #7 Handlers CORS 세팅  (0) 2021.02.02
Golang+Angular+MariaDB #6 Response 세팅  (0) 2021.02.01
Golang+Angular+MariaDB #5 User 정보 삭제  (0) 2021.02.01
Posted by 게으른거북
:

Golang+Angular+MariaDB #7 Handlers CORS 세팅

Development/Go+Angular+MariaDB 2021. 2. 2. 11:50 |
728x90

참고영상 : Como Programar uma API REST em Golang Parte 7 - HANDLERS CORS - Iniciando um Projeto Angular # 24

 

더보기

Go 세팅

별도의 go 라이브러리를 추가 세팅

cd workspace/go/src
go get -u github.com/gorilla/handlers
cd go_server

 

main.go 수정

* CORS 추가

package main

import ( 
	...
    
	"github.com/gorilla/handlers" // 추가
)

type User struct { ... }

var users = []User{ ... }

type Response struct { ... }

func NewResponse(method, message string, status int) Response { ... }

func HttpInfo(r *http.Request) { ... }

func setJsonHeader(w http.ResponseWriter) { ... }

func main() {
	fmt.Println("Api Connected Port 3000....")

	r := mux.NewRouter().StrictSlash(true)

	// 추가
	headers := handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type", "Authorization"})
	methods := handlers.AllowedMethods([]string{"GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS"})
	origins := handlers.AllowedOrigins([]string{"*"})

	r.HandleFunc("/users", getUsers).Methods("GET")
	r.HandleFunc("/users/{id}", getUser).Methods("GET")
	r.HandleFunc("/users", postUser).Methods("POST")
	r.HandleFunc("/users/{id}", putUser).Methods(("PUT"))
	r.HandleFunc("/users/{id}", deleteUser).Methods(("DELETE"))

	// 수정
	//log.Fatal(http.ListenAndServe(":3000", r))
	log.Fatal(http.ListenAndServe(":3000", handlers.CORS(headers, methods, origins)(r)))
}

func getUsers(w http.ResponseWriter, r *http.Request) {
	...
}

func getUser(w http.ResponseWriter, r *http.Request) {
	...
}

func postUser(w http.ResponseWriter, r *http.Request) {
	...
}

func putUser(w http.ResponseWriter, r *http.Request) {
	...
}

func deleteUser(w http.ResponseWriter, r *http.Request) {
	...
}

 

headers := handlers.AllowedHeaders([]string{"X-Request", "Content-Tyoe", "Authorization"})

methods := handlers.AllowedHeaders([]string{"GET", "POST", "PUT", "DELETE"})

origins := handlers.AllowedHeaders([]string{"*"})

CORS 핸들러를 만들 때에 Origins, Methods, Headers에 대한 옵션을 지정.

 

log.Fatal(http.ListenAndServe(":3000", handlers.CORS(headers, methods, origins)(r)))

위 옵션으로 http 요청에 CORS를 적용하며, 해당 핸들러를 기반으로 3000 포트 서버를 구동합니다.

728x90
저작자표시 비영리 변경금지

'Development > Go+Angular+MariaDB' 카테고리의 다른 글

Golang+Angular+MariaDB #9 Golang 데이터 불러오기  (0) 2021.02.02
Golang+Angular+MariaDB #8 Angular 기본 세팅  (0) 2021.02.02
Golang+Angular+MariaDB #6 Response 세팅  (0) 2021.02.01
Golang+Angular+MariaDB #5 User 정보 삭제  (0) 2021.02.01
Golang+Angular+MariaDB #4 User 정보 수정  (0) 2021.02.01
Posted by 게으른거북
:

티스토리툴바