Anglar - Module(2)

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.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해서 사용하는 방법을 알아봤습니다.

감사합니다.

from http://le-piee.tistory.com/29 by ccl(A) rewrite - 2020-05-10 02:01:50