Mean스텍 입문(9) - Detail.component.html + Post Component

-Detail.component.html 완성-

 

1 『details.component.html 파일 』

//코드

---

<div *ngIf="post" class="body-blur">

  <div class="row">

       <div class="columns small-12 medium-10">

              <a routerLink="/" id="back">Back</a>
              <h1>{{ post.title }}</h1>
      </div>

       <div class="columns small-12 medium-2"> 

             <a href="{{ post.url }}" id="external-btn"></a>
      </div>

  </div>

     <div class="row columns">

             <p>{{ post.description }}</p>
    </div>

</div>

---

details.component.ts의 클래스에 명시했던 post값을 가지고 온 후에 {{ }} 안에 삽입하는 게 전부다. *ngIf ="post"는, post 값이 있다면, 'body-blur'는 이후 배경을 흐리게 만들 때 사용한다. 위의 details.component.html을 실행하면, 포스팅 첫 사진과 같이 나타난다.

 

2 『 PostComponent 』

ng g c Post 명령어로 PostComponent를 만든다. Post컴포넌트는 html폼으로 사용자가 데이터를 입력할 양식을 만들 때 사용한다.

 

//실행

-> app-routing.module 파일에 PostComponent를 import한다.

-> path:'post' , component:PostComponent를 추가한다.

-> 아래 빨간색 코드 추가.

---

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

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DetailsComponent } from './details/details.component';
import { PostComponent } from './post/post.component';

const routes: Routes = [
  {path: '', component: HomeComponent },
  {path: 'details/:id', component: DetailsComponent },
  {path: 'post',component:PostComponent }
];

 

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

---

3 『 Post 라우터 생성 』 

api.js 파일로 가서 post 데이터가 넘어갈 라우터를 만든다.

 

---

// 실행

router.post('/post', function(req, res) {
    var newPost = new post();

    newPost.title = req.body.title;
    newPost.description = req.body.description;
    newPost.url = req.body.url;

    newPost.save(function(err,addedPost){

        if(err) throw err;
        res.json(addedPost);
    });

});

---

-> 몽고DB 문법상 인스턴스를 만들어 save해야 하기 때문에 post DB스키마를 불러온다. 

-> newPost에 new post();  인스턴스를 담는다.

-> bodyparser를 이용해서, 프론트에서 작성한 form값에서 지정한 name(title,description,url)을 받는다.

-> save()를 이용하되, res.json(결과값)으로 json데이터를 넘긴다.

4 『 ost.service.ts 파일 추가 』 

서버에서 라우팅을 만들었다면, angular에서 이 데이터를 활용할 수 있도록 service를 만들어야 한다.

---

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';     --> ①
import 'rxjs/add/operator/map';
import { Post } from './post';    --> ②

 

@Injectable()
export class PostService {

  result:any;

  constructor(private _http: Http) { }

 

  getPosts() {
    return this._http.get("/api/posts")
      .map(result => this.result = result.json());
  }

 

  getPost(id) {
    return this._http.get("/api/details/"+id)
      .map(result => this.result = result.json());
  }

  insertPost(post:Post){    -->③

         let headers = new Headers({ 'Content-Type':'application/json' });   -->④

         let options = new RequestOptions({ headers:headers }); -->⑤

         return this._http.post('/api/post', JSON.stringify(post), options) 
        .map(result=>this.result = result.json());   -->⑥
   }

}

---

 ① Angular 문법상, service에서 Http모듈로 데이터를 전송할 때, Headers, RequestOptions를 import해야한다.

 ② 서버로 전송할 데이터의 스키마 타입을 설정하기 위해서 미리 정의해놓은 post 모듈을 import한다.

 ③ 프론트에서 insertPost함수를 이용해서 서버로 데이터를 전송하는데, 인자값의 post를 Post로 타입설정한다.

 ④ html form으로 전송할 해더타입을 'application/json'타입으로 설정한다. (json값으로 전달)

 ⑤ options에 headers에서 선언한 json 타입을 설정한다.

 ⑥ http모듈을 이용해서 form데이터를 '/api/post' 라우터로 전달하는데, 인자로 들어온 post값을 JSON형식으로 파싱하고, option 설정을 당연히 json으로 해서 전달한다.

 

5 『  post.component.ts 설정 』 

<!-- ① 

import { Component, OnInit } from '@angular/core';                                       
import { PostService } from '../post.service';
import { Post } from '../post';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

① -->

 

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.scss']
})

export class PostComponent implements OnInit {

 

 <!-- ②

  posts: Array<Post>;
  postForm : FormGroup;

② -->

 

<!-- ③

  constructor(private _postService:PostService, fb:FormBuilder, private router:Router) {

 

    this.postForm = fb.group({

     'title':[null,Validators.compose([Validators.required,Validators.minLength(10),Validators.maxLength(75)])],
     'url' : [null,Validators.required],
     'description':[null,Validators.compose([Validators.required,Validators.minLength(30),Validators.maxLength(500)])],
        });

     }

 ③-->

 

  ngOnInit() {

<!-- ④
   this._postService.getPosts()
   .subscribe(res => this.posts = res);
  }

④-->

 

<!--⑤

  addPost(post:Post){

   this._postService.insertPost(post)
   .subscribe(newPost=>{
    this.posts.push(newPost);

    this.router.navigateByUrl('/');

   })

⑤-->

  }

}

---

① FormGroup,Validator를 import하는 부분을 주의해서 import한다. Validator는 말 그대로 유효성 검사모듈이다. FormGroup모듈은 Angular 자체 Form기능을 사용하려면 import해야 한다.

② posts 값은 배열값으로 정해주고, postForm값은 Angular FormGroup설정을 사용한다.

③ postService, FormBuilder, Router를 상속받은 후에 FormBuilder를 활용해서 Validator를 실행한다. 가령, Form에 입력될 title값은 최소 10자 이상, 최대 75자를 넘지 않아야 한다는 의미

④ DB에 있는 전체 데이터 값이 언제 사용될 지 모르니 일단 받아놓는다.(폼 Edit에서 유용하게 사용)

⑤ addPost 함수를 생성하고, postService에서 만들었던 insertPost의 인자값으로 post(사용자가 입력한 데이터)를 전달한 후에 posts 배열에도 저장한다. (push는 배열 마지막에 저장) 마지막으로 router.navigateByUrl('/')로 메인 화면으로 이동한다.