Anglar - Module(2)

안녕하세요.

저번시간에 이어서 모듈에 대해 알아보겠습니다.

 

 

---

 

Angular Module

 

컴포넌트, 파이프, 서비스 등과 같은 앵귤러 애플리케이션의 

중요 부분을 기능 단위로 그룹핑하게 해주는 역할을 합니다.

 

주요 기능

 

- 모든 앵귤러 애플리케이션은 하나의 Root Module을 가진다.

- 여러 Feature Module을 가질 수 있다.

- 재사용 할 수 있는 기능을 외부에 배포하기 위해 사용한다( ex. bootstrap의 ModalModule)

 

 

 

 

 

---

Feature Module 실습

 

cmd를 실행한 뒤,

프로젝트 경로로 디렉토리를 이동하여 

ng generate module todo

( ng generate module 모듈명)

명령어를 이용하여 모듈을 생성합니다

 

 

 

 

생성이 잘 된 된 것 같네요.

 

 

 

그리고 todo라는 모듈이 생성이 된 것을 확인 할 수 있습니다.

 

 

 

 

 

이번에는 컴퍼넌트를 만들겠습니다.

ng g c todo/todos --module todo/todo.module.ts --export 명령어를 입력합니다

g = generate의 약어

c = component의 약어

--module todo/todo.module.ts = component의 특정 모듈을 지정

--export = 다른곳에서도 사용 할 수 있다고 지정

 

 

컴퍼넌트까지 잘 만들어 졌습니다.

 

 

그 다음 app.component.html로 오셔서 

적혀있는 모든 코드를 지운 후,

<app-todos></app-todos>를 작성합니다.

 

 

그리고 app.module.ts로 와서

TodoModule을 import해줍니다.

모듈에게 이런 모듈도 있다고 알려주는 겁니다.

 

 

 

 

cmd에 ng serve 명령어를 쳐서 빌드합니다

 

 

 

 

 

 

빌드 완료 후, 접속하시면,

todos component가 호출된 것을 확인 할 수 있습니다.

 

 

 

 

Angular에서는 하나의 root Module이 필요하며, 그것이 App Module 입니다.

모든 모듈에서는 다른 모듈을 import 할 수 있습니다.

 

 

 

단, 모듈에서 export를 해야 다른 모듈에서 import가 가능합니다.

 

 

 

---

※요약

 

App.module.ts

 

App.module.ts라는 root Module이

여러개의  Feature Module을 가진 것을 확인 했습니다.

 

todo.module.ts

단,  export한 모듈만 import 할 수 있다.

 

---

 

 

 

 

 

이것으로 모듈을 생성하고, 다른 모듈을 import해서 사용하는 방법을 알아봤습니다.

 

 

감사합니다.