Enjoy Programming

지난 Angular 2 포스팅에서는 Directive에 대해 간단히 알아봤습니다. 지난번까지 작성한 소스는 app.component에 모든것을 다 넣은 형태였습니다. Hero 인터페이스 선언과 Hero 리스트 배열, 그리고 AppComponent가 한곳에 있으니 자연히 가독성이 떨어집니다. 이것을 이제부터 하나하나 나눠보겠습니다. 이번에도 역시나 npm start와 함께 시작합니다. 가장 먼저 제일 쉬운 Hero 인터페이스를 밖으로 빼내어 보겠습니다. 새로 hero.ts를 생성하고, app.component.ts에 있던 Hero 인터페이스 정의 부분을 빼냅니다.export class Hero { id: number; name: string; } 위와 같이 별도 파일로 빼내면 import를 시켜줘야 app..