할일 가져오기

메뉴 구성

todo 컴포넌트를 생성.

ng g component todo

1	ng g component todo

app.module.ts에 라우팅 path를 설정한다.

  {path: 'todo', component: TodoComponent}

1	{path: 'todo', component: TodoComponent}

app.component.html에 메뉴 링크 추가하고 좌우 화면 폭을 줄인다.

      <li class="nav-item"  routerLinkActive="active">
        <a class="nav-link" href routerLink="/todo">todo</a>
      </li>
...

<div class="container p-3">
  <router-outlet></router-outlet>
</div>

</li>

...

<router-outlet></router-outlet>

</div>

이제 todo 메뉴를 누르면 todo works가 보여야 한다.

화면 구성

할일 목록 보기 화면을 구성한다.

<table class="table table-striped">
  <thead>
    <tr>
      <th>완료</th>
      <th>todo</th>
      <th>생성일</th>
      <th>수정일</th>
      <th>삭제</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td>완료</td>
    <td>빨래하기</td>
    <td>2018-06-01</td>
    <td>2018-06-01</td>
    <td>
      <button class="btn btn-success btn-sm">수정</button>
      <button class="btn btn-danger btn-sm ml-1">삭제</button>
    </td>
  </tr>
  </tbody>
</table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>

</td>

</tr>

</tbody>

</table>

객체 정의

먼저 postman으로 REST api를 테스트하고 리턴되는 결과를 보고 받을 객체를 정의한다.

domain폴더를 추가하고 todo.vo.ts 화일에 다음과 같이 타입을 정의한다.

export class TodoVo {
  todo_id: number;
  isFinished: boolean;
  todo: string;
  created: string;
  updated: string;
}

export class TodoVo {

todo_id: number;

isFinished: boolean;

todo: string;

created: string;

updated: string;

}

서비스 구현

  getTodoList(): Observable<TodoVo[]> {
    return this.http.get<TodoVo[]>(environment.HOST + '/api/todo');
  }

getTodoList(): Observable<TodoVo[]> {

return this.http.get<TodoVo[]>(environment.HOST + '/api/todo');

}

REST api 프로토콜 규격서에 있는 그대로 프로토콜과 메서드를 구현한다.

Get 메서드는 body가 없으므로 첫번째 파라메터에 프로토콜만 넣어준다.

리턴타입은 Json Array에 TodoVo 객체로 넘어오므로 TodoVo[] 타입으로 정의한다. 리턴 타입을 정의하면 컴포넌트에서 호출해서 불러쓰기가 쉽다.

서비스 호출 및 모델 생성

export class TodoComponent implements OnInit {
  todoList: TodoVo[];

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getTodoList();
  }

  getTodoList() {
    this.heroService.getTodoList()
      .subscribe(body => {
        console.log('getTodoList', body);
        this.todoList = body;
      });
  }
}

export class TodoComponent implements OnInit {

todoList: TodoVo[];

constructor(private heroService: HeroService) { }

ngOnInit() {

this.getTodoList();

}

getTodoList() {

this.heroService.getTodoList()

.subscribe(body => {

console.log('getTodoList', body);

this.todoList = body;

});

}

생성자로 서비스를 주입받고, ngOnInit()에서 서비스를 호출한다. request의 body 부분이 리턴되므로 body부분을 todoList에 넣는다.

제대로 받았는지 개발자 콘솔에서 확인해보자.

모델을 뷰에 바인딩하기

<table class="table table-striped">
  <thead>
    <tr>
      <th>완료</th>
      <th>todo</th>
      <th>생성일</th>
      <th>수정일</th>
      <th>삭제</th>
    </tr>
  </thead>
  <tbody>
  <tr *ngFor="let todo of todoList">
    <td>{{todo.isFinished ? '완료' : '미완료'}}</td>
    <td>{{todo.todo}}</td>
    <td>{{todo.created}}</td>
    <td>{{todo.updated}}</td>
    <td>
      <button class="btn btn-success btn-sm">수정</button>
      <button class="btn btn-danger btn-sm ml-1">삭제</button>
    </td>
  </tr>
  </tbody>
</table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<td>{{todo.isFinished ? '완료' : '미완료'}}</td>

<td>{{todo.created}}</td>

<td>{{todo.updated}}</td>

<td>

</td>

</tr>

</tbody>

</table>

jquery의 경우는 모델 데이터를 가져왔으면 모델 데이터로 다시 뷰를 직접 만들어서 원하는 노드에 삽입하였다. jquery에서는 이 코드가 전체의 절반이상을 차지할 정도로 아주 번거로운 작업이다.

컴포넌트 기반 개발 방식은 뷰를 조작하는게 아니라 모델 정보를 업데이트하고 모델과 뷰를 바인딩 시킨다는 개념을 기억하자.

이미 모델을 생성하였고, 이제 뷰를 모델 데이터와 바인딩 시키기만 하면 된다. ngFor를 이용한 반복문과 interpolation ({{}})문법을 이용하여 바인딩하자.

로드 중…