앱개발/Ionic 3 / 아이오닉 3

[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 2. NgModule 에 대해

ODB 2017. 9. 4. 13:53

ngModule에 대해서 알아보도록 하자


application에는 여러개의 module이 사용되고 module은 여러개의 component로 구성된다


프로젝트를 만들고 시작해보자


ng new myProject2

cd myProject2

code .



그러면 코드 스튜디오가 나올것이다


app/app.module.ts먼저 보도록 하자

안에 @NgModule 이 선언되어있고

bootstrap이 AppComponent인것을 볼 수 있다


그럼 상단에서 ./app.component에서 AppComponent를 import하기에

app.component파일로 넘어가도록 하자



class AppComponent 는 title = 'app' 을 가지고 있다

해당 component는 app-root라는 이름으로

app.component.html의 templateurl를 가지고 app.component.css파일로 꾸밀 수 있다


뭐 복잡하지만 결론은

AppComponent는 title이라는 변수에 app이라는 값을 넣은 클라스를 정의한 component파일이다


그럼 app.component.html로 가서 어떻게 출력되는지 확인 해보도록 하자


{{title}} 이 4번째 줄에 있는데 어떻게 출력되는지 확인 해보도록 하자


ng serve -o 명령을 아까의 cmd창에 입력하면


위와 같은 화면이 나온다


그럼 app을 바꿔볼까?


app/app.components.ts 파일로 돌아가서 'app'을 원하는 문자열로 변경하고 저장하면? 자동으로 갱신이 된다




오늘은 여기까지.. 모듈, 컴포넌트, html에 연관관계만 대충 알고 넘어가도록 하자