[Angular 4/vscode] 3. 컴포넌트, 서비스 생성

 

이 글은 아래 사이트에서 튜토리얼로 나와있는 투어 프로젝트를 따라 하며, 복습 개념으로 간단하게 정리한 내용입니다.

 

https://angular.io/tutorial

 

 

이전 글에 이어서 진행되는 내용입니다.

 

2020/07/26 - [개발 일지] - [Angular 4/vscode] 2. 프로젝트 생성 및 구동

[Angular 4/vscode] 2. 프로젝트 생성 및 구동

 

 

---

 

 

 

1. 컴포넌트 생성

 

컴포넌트는 ng generate component 컴포넌트이름 을 입력하여 생성할 수 있습니다.

줄여서 ng g c 컴포넌트이름 으로도 생성이 가능합니다.

 

커맨드를 이용해 생성하면 두 종류 작업이 실행됩니다.

 

 

 

(1) CREATE : html, css, ts, spec.ts 파일 생성

 

html, css 파일 그리고 ts(typeScript)까지는 알겠는데 spec.ts 라는 파일도 생성되었습니다.

 

spec.ts는 컴포넌트 유닛 테스트를 위한 스펙 파일이라고 하며, 없어도 된다고 합니다.

 

컴포넌트 생성 시 --skip-tests 를 붙이면 spec.ts 파일 생성을 생략할 수 있습니다.

 

 

spec.ts 파일을 이용한 테스트는 안 해봐서 나중에 해보고 다루도록 하겠습니다.

 

 

 

(2) UPDATE : src/app/app.module.ts 파일이 업데이트

 

새로 생성한 컴포넌트를 앱에서 사용하기 위해 등록하는 동작입니다.

 

 

import한 컴포넌트를 declarations에 추가하는 내용으로 제가 생성한 컴포넌트(heroes)에 맞게

5, 10번 라인이 추가되었습니다.

 

hero는 지워서 없습니다.

 

추가로 커맨드를 사용하여 컴포넌트를 생성하지 않고 임의로 복붙하여 만드는 경우 역시

app.module.ts에 동일한 내용을 추가해주어야 사용이 가능합니다.

 

 

 

 

 

 

2. 서비스 생성

 

서비스 역시 생성하는 방법은 동일합니다. 

ng generate service 서비스이름 으로 생성 가능하며, 이 역시 ng g s 서비스이름 으로도 생성됩니다.

 

서비스 생성 시에도 spec.ts 파일이 생성되며, --skip-tests 를 이용해 생략 가능합니다.

 

 

 

 

서비스는 컴포넌트에 직접 import 하여 사용할 수 있습니다.

 

사용하려는 서비스를 import 한 후에는 위 이미지 처럼 constructor에 등록해주어야 사용이 가능합니다.

 

위 사이트 예제와 달리 app.module.ts에 등록하여 사용하는 예제도 봤는데, 자세히 공부한 뒤 다루도록 하겠습니다.

 

 

 

 

 

3. 컴포넌트 및 서비스 생성 끝